:root {
	--bg1:#5b3b25; /*dark brown*/
	--bg2:#f4d166; /*yellow-ish*/
	--bg3:rgba(255,206,93,1); /*yellow-er-ish*/
	--bg4:#eda261; /*orange*/
	--bg5:#d19c6e; /*brown2*/
	--bg6:#b7110e; /*red-velvet*/
}

a:link {
	color: var(--bg6);
}

a:visited {
	color: var(--bg6);
}

body {
	font-family: "Trebuchet MS", Helvetica, sans-serif;
	font-size: 100%;
	line-height: 130%;
	color: var(--bg1);
	background-color: var(--bg2);
	margin: 0;
}

h1 {
	display: flex;
	justify-content: flex-start;
	font-size: 100px;
	height: 80px;
	padding-left: 0.2em;
	padding-top: 0.5em;
	color: var(--bg5);
	background-color: var(--bg1);
}

h2.nav1h2 {
	padding-left: 1em;
	font-size: 45px;
}

h2.nav2h2 {
	padding-left: 1em;
	padding-top: 1em;
}

ul.nav li {
	font-size: 20px;
	padding-top: 0.5em;
}

section {
	padding-top: 1em;
	padding-left: 2em;
	padding-right: 2em;
}

section.cookie_img {
	padding-left: 0em;
	display: flex;
	justify-content: center;
}

ul {
	padding-left: 4em;
	list-style: disc;
}

ul.cnav { /*this is the chip nav */
	padding-bottom: 1.5em;
	background-color: var(--bg3);
	outline-style: solid;
	outline-color: var(--bg1);
}

ul.cnav li {
	width: 10%;
	float: left; /* this is what causes the chip nav to look like.. that. i think */
}

h3 {
	clear: both;
	padding-top: 0em;
	padding-left: 2em;
}

h3.cookie_header {
	font-size: 20px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: var(--bg3);
	outline-style: solid;
	outline-color: var(--bg1);
}

h3.big_cookie_header {
	font-size: 50px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: var(--bg3);
	outline-style: solid;
	outline-color: var(--bg1);
}

ul.recipe_link_list {
	list-style: square;
	padding: 1em;
	display: flex;
}

ul.ingredients {
	list-style: circle;
}

ol.instructions {
}

footer {
	text-align: center;
	padding-top: 5em;
	padding-bottom: 5em;
}

@media (prefers-color-scheme: dark) {
}