/* 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." */

body {
	--text: darkslategray;
	--line: darkseagreen;
	--accent: cadetblue;
	--bg: lightgrey;
	--fill: whitesmoke;
}

body { 
	color: darkslategray;
	font-family: verdana, sans-serif; 
}

  *{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: darkslategray darkseagreen }

::-webkit-scrollbar { width: 20px; }
::-webkit-scrollbar-track { background: darkslategray; }
::-webkit-scrollbar-thumb { background-color: darkseagreen; border: transparent; }

img { max-width: 100% }

nav {
	float: left;
	width: 15%;
	height: 100vh;
	position: relative;
	background-color: lightgrey;
}

nav div {
	height: fit-content;
	width: fit-content;
	position: absolute;
	top: 50%;
	-webkitt-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:whitesmoke;
	filter: drop-shadow(1px 1px 0 darkslategray)
			drop-shadow(-1px 1px 0 darkslategray) 
			drop-shadow(0 -1px 0 darkslategray) 
			drop-shadow(1px 0 darkslategray);
}

nav a:hover, nav a:focus {
	color: cadetblue;
}

main {
	float:left;
	width: 82%;
	height: 100vh;
	padding: 2em;
	overflow-y: scroll;
	background-color: lightgrey;
}

.container { max-width: 1500px }

section {
	margin: 2em 0;
	padding: 1em 2em;
	background-color: whitesmoke;
	border: 5px solid darkseagreen;
}

.stripe {
	float: left;
	width: 3%;
	height: 100vh;
	background-color: darkseagreen;
}

hr {
	border: none;
	border-top: 5px solid darkseagreen;
}

header {
	font-size: 2em;
	margin-bottom: 2rem;
	color:whitesmoke;
	filter: drop-shadow(1px 1px 0 darkslategray)
			drop-shadow(-1px 1px 0 darkslategray)
			drop-shadow(0 -1px 0 darkslategray)
			drop-shadow(1px 0 darkslategray);
}

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: cadetblue;
	padding: 2px;
}

p a:hover { 
	color: whitesmoke;
	background-color: lightgrey;
}

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: cadetblue;
	padding: 5px;
}

blockquote {
	background-color: cadetblue;
	color: whitesmoke;
	padding: 1em;
}

blockquote a, blockquote code {
	color: darkslategray;
}

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

code, details, pre {
	background-color: lightgrey;
}

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 darkseagreen; }
tr, td, th { border: 2px solid darkseagreen; }
td, th { padding: 3px }

figcaption { 
	text-align: center;
	margin: -0.5em 1em 1em 1em;
}

footer { 
	font-size: 1em;
	text-align: center;
	background-color:cadetblue; 
	margin-top: 2em;
	padding: 5px;
}

footer a { color: darkslategray; }

.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;
		-webkitt-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; }
	
}
.rotategrad {
background-size: 100vw 100vw;
margin: 0;
position: relative;
text-align: center;
font-size: 1em;
background: repeating-linear-gradient(-45deg, whitesmoke 0%, darkseagreen 25%, whitesmoke 50%);
-webkit-animation: 'slide' 30s infinite linear forwards;
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}

@keyframes slide {
0% { background-position-x: 0%; }
100% { background-position-x: 200vw; }
}

.float {
font-size:1em;
color: darkslategray;
animation-name: floating;
animation-duration: 3s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}

@keyframes floating {
0% { transform: translate(0, 0px); }
50% { transform: translate(0, 15px); }
100% { transform: translate(0, -0px); }
}