body { 
	font-family: Verdana; 
	padding: 0;
	max-width: calc(100% - 10px);
	color: white;
  background-color: #ffffff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' %3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' x2='0' y1='0' y2='1' gradientTransform='rotate(148,0.5,0.5)'%3E%3Cstop offset='0' stop-color='%23090611'/%3E%3Cstop offset='1' stop-color='%233C003A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpattern id='b' width='4' height='4' patternUnits='userSpaceOnUse'%3E%3Ccircle fill='%23ffffff' cx='2' cy='2' r='2'/%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='url(%23a)'/%3E%3Crect width='100%25' height='100%25' fill='url(%23b)' fill-opacity='0.12'/%3E%3C/svg%3E");
  background-attachment: fixed;
}



*::-webkit-scrollbar { width: 15px; }
*::-webkit-scrollbar-track { background: #E0E2DB; }
*::-webkit-scrollbar-thumb { background-color: #8B2635; border: transparent; }



nav {
	display: flex;
	flex-wrap: wrap;
	text-align: right;
	justify-content: center;
}

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

section {
	margin: 3em;
	padding: 1em 2em 3em;
	border-radius: 15px;
	background-color: #263b32;
	box-shadow: 14px 14px 8px black;
	max-width: calc(100% - 10px);
}

nav a, .up a {
	color: white;
	display: block;
	border: 1px #020f0b solid;
	border-radius: 5px;
	margin: 10px;
	padding: 10px 51px 2px 50px;
	text-decoration: none;
	font-size: 30px;
	background-color: black;
}

hr {
	border: none;
	width: 700px;
	max-width: 100%;
	border-top: 5px dashed hsla(0, 100%, 50%, 0.6);
	border-bottom: 5px dashed hsla(0, 100%, 50%, 0.3);
}

header {
	font-size: 50px;
	margin: 10px;
	display: flex;
	justify-content: space-between;
	font-weight: normal;
	color: white;
	max-width: calc(100% - 10px);
}

header div { margin: 20px 10px 0 20px; text-shadow: 3px 3px black; }

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

h1, h2, h3, a { font-family: Verdana; font-weight: normal; }

a { color: #5cd65c; padding: 2px 4px; 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: 1.2rem;
	line-height: 1.8;
	max-width: calc(100% - 10px);
}

a:hover { 
	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.5em;
  text-align: center;
  text-shadow: 2px 2px 3px black;
  
	padding: 0.2em;
	border-radius: 12px;
	background-color: #3f6663;
	box-shadow: 12px 12px 8px black;
	max-width: calc(100% - 10px);
	}

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

cite { 
	display: block;
	text-align: right;
	color: #5cd65c;
}

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

details { border: 1px solid; }

code { 
	font-family: 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: flex;
  flex-wrap: wrap;
  flex-flow: column;
  align-items: center;
  max-width: 100%;
}

.lfigure {
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-content: flex-start;
  align-items: center;
}

img {
  max-width: 100%
}

.flex-container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction 
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  
  /* Then we define how is distributed the remaining space */

 align-items : center;
 justify-content : center;
 
  padding: 0;
  margin: 0;
  list-style: none;
  max-width: 100%;
  
}

.flex-itemli {
  padding: 2px;
  width: 300px;
  height: 350px;
  margin-top: 10px;
  max-width: 100%;
  float: left;
}
.flex-itemrt {
  padding: 10px;
  width: 500px;
  height: 350px;
  margin-left: 0px;
  font-size: 1.2rem;
  text-align: center;
  max-width: 100%;
  float: left;
}


figure img { margin: 5px auto; }



figcaption {
  font-family: "Sans";
}

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

.center {
  text-align: center
  
}

.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: 15px 5px 2px 30px;
		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;
	}
}