/* 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 {
/* start light mode styling */
	:root {
		--text: darkslategrey;
		--border: lightgrey;
		--accent: teal;
		--bg: #dce3e1;
		--gradientTop: white;
		--gradientBottom: rgb(240, 248, 255, .8);
	}
	header {
		background: url('***light mode banner image***');
	}
/* end light mode styling */


/* start dark mode styling */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: white;
			--border: #5a7678;
			--accent: #74C365;
			--bg: rgb(0,60,60,.8);
			--gradientBottom: rgb(0, 50, 60);
			--gradientTop: darkslategrey;
			a:link { color: lightblue; }
		}
		header {
			background: url('***dark mode banner image***');
		}
	}
/* end dark mode styling */


* { 
	box-sizing: border-box;
}
body {
	padding: 10px;
	font-family: 'MS PGothic', sans-serif;
	color: var(--text);

	/* page background pattern */
	background-color: var(--gradientTop);
	background-image:  linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg));
	background-size: 20px 35px;
	background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px;
}


.container {
	max-width: 55rem;
	margin: 5vw auto 12px auto;
	border: 6px ridge var(--border);
	outline: 3px solid var(--gradientTop);
	outline-offset: 4px;
	border-radius: 10px;
	display: flex;
	flex-wrap: wrap;
	padding: 5px;
	gap: 5px;

	/* container background pattern */
	background-color: var(--gradientBottom);
	background-image:  repeating-radial-gradient( circle at 0 0, transparent 0, var(--gradientBottom) 9px ), repeating-linear-gradient( var(--bg), var(--bg));
}
/* these control the column widths */
.small { flex: 1 1 9%; }
.large { flex: 1 1 82%; }
.full { flex: 1 1 100%; }
.half { flex: 1 1 49%; }


header {
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 120px; /* change banner height here*/
	border: 2px ridge var(--border);
	border-radius: 5px;
	position: relative;
}
header span {
	font-size: 2.5rem;
	position: absolute;
	bottom: 0;
	right: 10px;
	margin: 10px;
	font-weight: bold;
	text-shadow: 1px 1px var(--text),
		-1px 1px var(--text),
		1px -1px var(--accent),
		-1px -1px var(--accent);
	color: var(--gradientTop);
}


nav {
	border: 2px ridge var(--border);
	border-radius: 5px;
	padding: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
}
nav div {
	text-align: center;
	font-size: 1.25rem;
	margin: 5px 5px 10px 5px;
}
nav a {
	display: block;
	margin: 5px;
	background: linear-gradient(to right,var(--bg),var(--gradientBottom));
	border-radius: 5px;
	padding: 2px 7px;
	text-decoration: none;
}
nav a:link, nav a:visited { 
	color: var(--text);
}
nav a:hover, nav a:focus {
	background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop));
}

/* optional button styling like in the preview */
div.small > img {
	display: block;
	margin: 5px auto;
	border:2px ridge var(--border);
	border-radius: 5px;
}


section {
	border: 2px ridge var(--border);
	border-radius: 5px;
	background: linear-gradient(var(--gradientTop),var(--gradientBottom));
	padding: 5px;
}


footer {
	text-align: center;
	margin-bottom: 5vw;
	font-size: 0.8rem;
}
footer a { 
	text-decoration: none;
}


h1, h2, h3, h4, h5, h6, p  { 
	margin: 5px;
	line-height: 1.2;
}
h1 { 
	font-size: 1.4rem;
	letter-spacing: 2px;
	font-weight: normal;
	text-align: center;
	border-bottom: 2px ridge var(--border);
	padding-bottom: 5px;
}
h2 { 
	font-size: 1.25rem;
	font-weight: normal;
	text-align: center;
}
h3 { 
	font-size: 1.1rem;
}
h4 { 
	font-size: 1rem;
	color: var(--accent);
	padding-left: 12px;
}

/* prevents overflow on smaller screens */
img { max-width: 100%; }
pre { overflow-x: auto; }


a:hover, a:focus {
	font-style: italic;
}
a:visited {
	color: var(--accent);
}
/* quick customization */
	:root {
		--width: 900px; /* sets the maximum width of the middle section */
		--headingfont: "Georgia"; 
		--bodyfont: "Verdana"; 
		--borderwidth: 7px;
		--borderstyle: dotted;
	}

/* light mode colors */
	:root {
		--text: #463239;
		--section: #FFFDED; /* background color for the middle section */
		--border: #FFB17A;
		--link: #A04668;
		--bgimage: linear-gradient(var(--border),var(--link)); /* you could also use an image! formatting: url("example.png") */
	}

/* dark mode colors */
	@media (prefers-color-scheme: dark) {
		:root {
			--text: #FFFDED;
			--section: #463239; /* dark mode background color for the middle section */
			--border: #C57B57;
			--link: #F7BCBC;
			--bgimage: linear-gradient(var(--link),var(--border)); /* you could also use an image! formatting: url("example.png") */
		}
	}
	
/* page layout */ 	
	* { 
		scrollbar-color: var(--link) var(--border);
		overscroll-behavior: none;
		box-sizing: border-box;
		max-width: 100%; /* so everything adjusts on smaller screens */
	}
	body { 
		margin: 0; padding: 0;
		color: var(--text);
		background: var(--border) var(--bgimage);
		background-attachment: fixed;
		font-family: var(--bodyfont), sans-serif;
	}
	.container { 
		max-width: var(--width);
		min-height: 100vh;
		margin: 0 auto;
		padding: 1rem calc(2.25rem + 1vw); 
		background: var(--section); 
		--mask: /* from https://css-generators.com/wavy-shapes/ */
			radial-gradient(25.81px at 36px 50%,#000 99%,#0000 101%) 0 calc(50% - 30px)/51% 60px repeat-y,
			radial-gradient(25.81px at -21px 50%,#0000 99%,#000 101%) 15px 50%/calc(51% - 15px) 60px repeat-y,
			radial-gradient(25.81px at calc(100% - 36px) 50%,#000 99%,#0000 101%) 100% calc(50% - 30px)/51% 60px repeat-y,
			radial-gradient(25.81px at calc(100% + 21px) 50%,#0000 99%,#000 101%) calc(100% - 15px) 50%/calc(51% - 15px) 60px repeat-y;
		-webkit-mask: var(--mask);
		mask: var(--mask);
	}
	main { 
		margin: 1rem 0;
	}
	nav { 
		margin: 1.5rem 0 1rem 0;
		padding: 0.5rem 0 1rem 0;
		border-top: var(--borderwidth) var(--borderstyle) var(--border);
		border-bottom: var(--borderwidth) var(--borderstyle) var(--border);
	}
	nav li { 
		margin: 0.25rem;
	}
	footer {
		padding: 1rem 0 1.5rem 0;
	}
	hr { 
		border: 0;
		border-top: var(--borderwidth) var(--borderstyle) var(--border);
	}
	.container > ul, footer p { 
		margin: 0;
		padding: 0;
		text-align: right;
	}
	.container > ul li { 
		list-style-type: none;
		display: inline-block;
		padding: 0 0.5rem;
	}
	
/* headings */
	h1, h2, h3, h4, nav p { 
		font-family: var(--headingfont), serif;
		line-height: 1;
		font-weight: bold;
		margin: 1rem 0;
	}
	h1 { 
		font-size: calc(2.25rem + 2.5vw);
		margin: 3rem 0 1.5rem 0;
		border-bottom: var(--borderwidth) var(--borderstyle) var(--border);
		padding-bottom: 1rem;
	}
	h2, nav p { 
		font-size: calc(1.75rem + 1.25vw);
	}
	h3 { 
		font-size: calc(1.25rem + 1.125vw);
	}
	h4 { 
		font-size: calc(1rem + 1vw);
	}
	
/* link style */
	a:link { 
		color: var(--link);
		text-underline-offset: 2px;
		text-decoration-thickness: 2px;
		text-decoration-color: var(--border);
	}
	a:visited { 
		color: var(--text);
		text-decoration-color: var(--border);
	}
	a:hover, a:focus { 
		color: var(--link);
		text-decoration-style: wavy;
		text-decoration-thickness: 1px;
	}
	
/* other page elements */
	p, ul, ol, details, table {
		margin: 1rem 0;
	}
	p, li, dd, dt, cite, code { 
		line-height: 1.4;
	}
	sup, sub { 
		line-height: 0.5;
	}
	s, del { 
		text-decoration-color: var(--link); 
		text-decoration-thickness: 2px;
	}
	ul ul, ol ul {
		margin: 0;
	}
	ul li::marker { 
		color: var(--border);
		font-size: 125%;
		line-height: 1;
	}
	ul ul li::marker, ol ul li::marker { 
		color: var(--text);
	}
	figure { 
		background: var(--border);
		border: 10px solid var(--border);
		border-radius: 8px;
		margin: 1rem auto;
		width: fit-content;
		display: table;
	}
	figure img { 
		border-radius: 5px;
	}
	figcaption { 
		text-align: center;
		display: table-caption;
		caption-side: bottom;
		background: var(--border);
		border: 10px solid var(--border);
		border-radius: 0 0 8px 8px;
		margin-top: -10px;
		padding: 0 10px 10px 10px;
	}
	figcaption a:link, figcaption a:visited {
		text-decoration-color: var(--section);
	}
	table { 
		max-width: 100%;
		margin: 1rem auto;
	}
	th, td { 
		border-radius: 8px;
		padding: 3px 5px;
	}
	th { 
		color: var(--section);
		background: var(--link);
		border: 2px solid var(--link);
	}
	td { 
		border: 2px solid var(--border);
	}
	code { 
		display: inline-block;
		border: 2px solid var(--border);
		border-radius: 8px;
		padding: 2px 5px;
	}
	pre code { 
		display: block;
		overflow-x: auto;
	}
	blockquote {
		border-left: var(--borderwidth) var(--borderstyle) var(--border);
		margin: 1rem 0 1rem 1rem;
		padding-left: 1rem;
	}
	details { 
		background: var(--border);
		border-radius: 8px;
		padding: 1rem 2rem 1rem 1rem;
	}
	details summary { 
		cursor: pointer;
	}
	details > *:not(summary) { 
		margin-left: 1.5rem;
	}
	details ul li::marker {
		color: var(--text);
	}
	details a:link, details a:visited {
		text-decoration-color: var(--section);
	}
	details code {
		border: 2px solid var(--section);
	}
	details table { 
		max-width: 100%;
		margin: 1rem auto;
	}
	details td { 
		border: 2px solid var(--section);
	}
	::selection {
		color: var(--section);
		background-color: var(--text);
	}
	:root {
	--text: darkslategray;
	--line: darkseagreen;
	--accent: cadetblue;
	--bg: lightgrey;
	--fill: whitesmoke;
}

body { 
	color: var(--text);
	font-family: verdana, sans-serif; 
}

* { 
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	scrollbar-color: var(--text) var(--line) }

*::-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; }
 
 
  background-color: white;
  color: black;
  font-family: Verdana;
}