/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


main {
	margin: 10px auto;
	max-width: 60rem;
}

body {
/* Location of the image */
background-image: url(Bodybg.jpeg);

/* Background image is centered vertically and horizontally at all times */
background-position: top;

/* Background image doesn't tile */
background-repeat: no-repeat;

/* Background image is fixed in the viewport so that it doesn't move when
the content's height is greater than the image's height */
background-attachment: fixed;

/* This is what makes the background image rescale based
on the container's size */
background-size: 100%;

/* Set a background color
while the background image is loading */
background-color: #F8FAFD;


}

section {
	margin: 2em auto;
	padding: 1em 2em;
	border: 1px dashed #A9ABA1;
	outline: 1px dotted #A9ABA1;
	outline-offset: 5px;
	max-width: calc(100% - 10px);
	background-color: white;
}

nav a, .up a {
	color: #FF0000;
	display: inline;
	border: 1px #8B2635 solid;
	margin: 5px;
	padding: 10px 20px 10px 10px;
	text-decoration: none;
	font-size: 30px;
	max-width: calc(100% - 20px);
	background-color: white;
}
img {
width: 90%;
}
#overlay {
  position: fixed; /* Sit on top of the page content */
  display: block; /* Hidden by default */
  width: 100%; /* Full width (cover the whole page) */
  height: 30%; /* Full height (cover the whole page) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 50;
  background-color: rgba(0,0,0,0); /* Black background with opacity */
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

.bgimg {
    background-image: url('');
}

hr {
	border: none;
	border-top: 1px solid #2E3532;
}


@font-face {
  font-family: "Reenie Beanie", serif;
  src: url('https://fonts.googleapis.com/css2?family=Reenie+Beanie&display=swap');
  font-weight: 600;
  font-style: normal;
}

header {
	font-size: 50px;
	margin: 10px;
	display: flex;
	justify-content: space-between;
	font-family: 'Reenie Beanie';
	font-weight: normal;
	color: #FF0000;
	max-width: calc(100% - 30px);

}

header div { margin: 10px 10px 20px; background-color: white; }

h1, h2, h3, h4, h5, h6, p, table, details, cite, pre, blockquote {
	margin: 1rem 0;
}

h1, h2, h3 { font-family: 'Reenie Beanie'; font-weight: normal; }

a { color: #FF0000; padding: 2px 2px; font-size: 1.25em; }

ul, ol {
	margin: 1rem 0 1rem 1.5rem;
}

dl { margin: 1rem 0; }

dt { 
	background: linear-gradient(to right, #2E3532, #E0E2DB);
	padding: 0.25rem 0.5rem;
	color: #E0E2DB;
}

dd { padding: 1rem; }

ul ul, ol ol { 
	margin: 0 0 0 2rem;
}

p, table,  ul, ol, dl {
	font-size: 1rem;
	line-height: 1.5;
}

a:hover { 
	background-color: #8B2635;
	color:#E0E2DB;
}

h6 { font-size: 1em; }
h5 { font-size: 1.25em; }
h4 { font-size: 1.5em; }
h3 { font-size: 2.5em; }
h2 { font-size: 3em; }
h1 { font-size: 3.75em; text-align: center; }

blockquote {
	border-left: #8B2635 3px solid;
	padding: 0 1rem;
}

cite { 
	display: block;
	text-align: right;
}

code, pre {
	background-color: #2E3532;
	color: #E0E2DB;
}

details { border: 1px solid; }

code { 
	font-family: 'Courier New', monospace; 
	padding: 2px 4px;
}

details, pre {
	padding: 1em;
}

pre { overflow-x: auto; }

details p { margin: 0.5rem 0 0 2rem; }

table {	border: 3px solid #2E3532; margin: 1rem auto; }
tr, td, th { border: 1px solid #2E3532; }
td, th { padding: 0.5rem }

figure {  display: table; margin: 1rem; }

figure img { margin: 5px auto; }

figcaption { 
	display: table-caption;
    caption-side: bottom;
    text-align: center;
}

footer { 
	font-size: 0.8em;
	text-align: center; 
	padding: 5px 10px;
	margin: 2rem;
}

.up { position: fixed;
	bottom: 10px; right: 10px; }

.flex-box {
    display:flex;
    flex-wrap:wrap;
    margin: 0 auto;
	padding: 0;
	align-items: flex-start;
}

.flex-box section {
	margin: 1em;
	}

.full { flex: 1 1 100%;}
.half { flex: 1 1 calc(50% - 2em); }
.third { flex: 1 1 calc(33% - 2em); }
.twothird { flex: 1 1 calc(66% - 2em); }
.quarter { flex: 1 1 calc(25% - 2em); }
.threequarter { flex: 1 1 calc(75% - 2em); }


@media screen and (max-width: 1270px){
	.up { position: static; width: fit-content; margin: 10px auto; }
}

@media screen and (max-width: 700px){
	header { flex-wrap: wrap; }
	header div { margin: 5px; }
	nav a {
		margin: 5px;
		padding: 10px 5px 2px 10px;
		text-decoration: none;
		font-size: 24px;
	}
	section {
		margin: 1em auto;
		padding: 0.5em 1em;
	}
	ul, ol {
		margin: 1rem 0 1rem 0.5rem;
	}
	ul ul, ol ol { 
		margin: 0 0 0 1rem;
	}
}