:root {
  	--text: darkslategray;
  	--line: darkseagreen;
  	--accent: cadetblue;
  	--bg: lightgrey;
  	--fill: whitesmoke;
  }
  
  body { 
  	color: #9723cb ;
  	font-family: verdana, sans-serif; 
  }
  
  { 
  	margin: 0;
  	padding: 0;
  	box-sizing: border-box;
  	scrollbar-color: #9723cb }
  
  *::-webkit-scrollbar { width: 20px; }
  *::-webkit-scrollbar-track { background: var(--line); }
  *::-webkit-scrollbar-thumb { background-color: var(--text); border: transparent; }
  
  img { max-width: 100% }
  
  nav {
  	float: left;
  	width: 15%;
  	height: 100vh;
  	position: relative;
  	background-color: var(--bg);
  }
  
  nav div {
  	height: fit-content;
  	width: fit-content;
  	position: absolute;
  	top: 50%;
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);
  	right: -1.5vw;
  	text-align: right;
  }
  
  nav a {
  	display: block;
  	margin: 10px 0;
  	padding: 0;
  	font-size: 1.5em;
  	text-decoration: none;
  	color:var(--fill);
  	filter: drop-shadow(1px 1px 0 var(--text)) 
  			drop-shadow(-1px 1px 0 var(--text)) 
  			drop-shadow(0 -1px 0 var(--text)) 
  			drop-shadow(1px 0 var(--text));
  }
  
  nav a:hover, nav a:focus {
  	color: var(--accent);
  }
  
  main {
  	float:left;
  	width: 82%;
  	height: 100vh;
  	padding: 2em;
  	overflow-y: scroll;
  	background-color: var(--bg);
  }
  
  .container { max-width: 1500px }
  
  section {
  	margin: 2em 0;
  	padding: 1em 2em;
  	background-color: var(--fill);
  	border: 5px solid var(--line);
  }
  
  .stripe {
  	float: left;
  	width: 3%;
  	height: 100vh;
  	background-color: var(--line);
  }
  
  hr {
  	border: none;
  	border-top: 5px solid var(--line);
  }
  
  header {
  	font-size: 2em;
  	margin-bottom: 2rem;
  	color:var(--fill);
  	filter: drop-shadow(1px 1px 0 var(--text))
  			drop-shadow(-1px 1px 0 var(--text))
  			drop-shadow(0 -1px 0 var(--text))
  			drop-shadow(1px 0 var(--text));
  }
  
  h2, h3, h4, h5, h6, p, table, details, cite, blockquote, img {
  	margin: 1rem 0;
  }
  
  ul, ol, dl {
  	margin: 1rem 0 1rem 2rem;
  }
  
  ul ul, ol ol { 
  	margin: 0 0 0 2rem;
  }
  
  p, table,  ul, ol, dl {
  	font-size: 1rem;
  }
  
  a { 
  	color: var(--accent);
  	padding: 2px;
  }
  
  p a:hover { 
  	color: var(--fill);
  	background-color: var(--accent);
  }
  
  h6 { font-size: 1em; }
  h5 { font-size: 1.25em; }
  h4 { font-size: 1.5em; }
  h3 { font-size: 1.75em; }
  h2 { font-size: 2em;
  	text-align: center;
  	background-color: var(--accent);
  	padding: 5px;
  }
  
  blockquote {
  	background-color: var(--accent);
  	color: var(--fill);
  	padding: 1em;
  }
  
  blockquote a, blockquote code {
  	color: var(--text);
  }
  
  cite { 
  	display: block;
  	text-align: right;
  }
  
  code, details, pre {
  	background-color: var(--bg);
  }
  
  code { 
  	font-family: 'Courier New', monospace; 
  	padding: 2px;
  }
  
  details, pre {
  	padding: 1em;
  }
  
  pre { overflow-x: auto; }
  
  details p { margin: 1rem 0 1rem 2rem; }
  
  table {	border: 5px solid var(--line); }
  tr, td, th { border: 2px solid var(--line); }
  td, th { padding: 3px }
  
  figcaption { 
  	text-align: center;
  	margin: -0.5em 1em 1em 1em;
  }
  
  footer { 
  	font-size: 1em;
  	text-align: center;
  	background-color: var(--accent); 
  	margin-top: 2em;
  	padding: 5px;
  }
  
  footer a { color: var(--text); }
  
  .flex-box {
      display:flex;
      flex-wrap:wrap;
      margin: -1em;
  	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: 800px){
  
  	nav, main, .stripe {
  		float: none;
  		width: 100%;
  		height: fit-content;
  	}
  	
  	nav { padding: 2vw }
  	
  	nav div {
  		height: fit-content;
  		width: 100%;
  		position: static;
  		-ms-transform: translateY(0);
  		transform: translateY(0);
  		text-align: right;
  	}
  	
  	nav img {
  		z-index: -1;
  		position: absolute;
  		left:0;
  		max-height: 100%;
  	}
  	
  	nav a {
  		display: inline-block;
  		margin: 5px;
  	}
  	
  	nav a::after { content: " ↗"; }
  	
  	main { 
  		overflow: auto;
  		padding: 2em 1em;
  	}
  	
  	header { 
  		text-align: center;
  		font-size: 1.5em;
  	}
  	
  	section { padding: 0 1em; }
  	
  	.stripe { height: 30px; }
  	
  	*::-webkit-scrollbar { width: 10px; }
  	
  }