/*		Michelle Stoneking
		3/17/2025
		CS-125H Final Project
*/
:root {
	--color-1: #523436;   /* dark brown */
	--color-2: #6a4b54;   /* medium brown */  
	--color-3: #8b8184;   /* medium gray */
	--color-4: #d5d9da;   /* light gray */
	--color-5: #9dbcd4;    /* medium gray-blue */
	--color-6: #f3f2ee;    /* cream */
}
#mobile_menu { display: none }

Body {
	font-family: "microsoft sans serif", arial, sans-serif;
    font-size: 100%;
	margin-bottom: 1em;
	background: var(--color-6);
}

/* the styles for the header */
header img {
	float: left;
	margin: 1em;
	height: 20%;
	width: 20%;
}
header h1 {
	font-weight: bold;
	font-size: 400%;
	color: white;
	text-shadow: 2.5px 2.5px 1px var(--color-5);
	height: 1.8em;
	margin: auto;
	padding: .5em 2em .5em .5em;
	background-image: linear-gradient(45deg, var(--color-1), 10%, var(--color-2) 40%, var(--color-6) 90%);
}
/* the styles for the main navigation bar */
#menu_bar ul { 
	clear: both;
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	font-size: 120%;
	display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
#menu_bar ul li {
    float: left;
	width: 25%;
	text-align: center;
	margin: 0em auto;
    padding: 0;
	background-color: var(--color-4); 
	border: 3px solid var(--color-3);
	border-radius: 10px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
}
#menu_bar ul li a {
	display: inline-block;
	padding: 1em;
	text-decoration: none;
}
#menu_bar ul ul {
	display: none;
	position: absolute;
	top: 100%;
	font-size: 100%;
}
#menu_bar ul ul li {
	float: none;
	text-align: left;
	width: 100%;
	margin: 0;
    padding: 0;
	background-color: var(--color-4); 
	border: 3px solid var(--color-3);
	border-radius: 10px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
}
#menu_bar ul ul li a {
	position: relative;
	display: inline-block;
	padding: .5em;
	text-decoration: none;
}
/* styles for the dropdown menu */
#menu_bar ul li:hover > ul {
	display: block;
}
#menu_bar ul li ul:hover > li {
	display: block;
	position: relative;
}
#menu_bar > ul ul::after {
	content: "";
	display: block;
	clear: both;
}  
#menu_bar a.current {
	color: white;  
	text-shadow: 2px 2px 1px var(--color-1);	
}

/*  the styles for the headers */
main header h2 {
	font-size: 140%;
	color: var(--color-1);
	text-indent: 10px;
	margin: 2em 0;
	padding: 0 2em;
	text-shadow: 1px 1px 1px #ffffff;
}
h3{
	width: 40%;
	font-size: 140%;
	margin: 1em;
	padding: .5em;
	text-align: center;
	Color: var(--color-6);
	border: 5px solid var(--color-3);
	border-radius: 10px 20px 0 20px;
	background-color: var(--color-3);  
}
h4 {
	margin: 0 auto;
	font-size: 130%;
	padding: .5em;
	text-align: center;
}
main p {
	text-indent: 30px;
}
blockquote {
	padding: .5em;
	font-style: italic;
	color: var(--color-1);
	background-color: #ffffff;
	border-radius: 10px;
}
/* the styles for the main - article */
main article {
	margin: 2em 2em;
}
article p {
	padding: .5em;
	font-size: 110%;
}
/* The styles for the main - figure & table */
figure {
	clear: both;
	margin: 1.5em;
	padding: 0;
}
figcaption {
	font-size: 140%;
	font-weight: bold;
	text-align: center;
	padding: 1em;
}
table {
	clear: both;
	width: 80%;
	margin: 1em auto 2em auto;
	border: .25em solid var(--color-1); 
}
table caption {
	width: 100%;
	caption-side: bottom;
}
thead {
	font-weight: bold;
	font-size: 120%;
	padding: .2em .4em .2em 1em;
	text-align: left;
}
td {
	padding: 1em;
	text-align: center;
	border-collapse: collapse;
	border-spacing: 1em;
}
tr:nth-child(odd) {
	background-color:  #dcdcdc;
}
.subhead {
	border-collapse: collapse;
}
.bofd {
	font-size: 150%;
	text-align: center;
	padding: 1em;
	color: var(--color-6);
	background-color: var(--color-3);
}
.rtjust {
	text-align: right;
}
.centjust {
	text-align: center;
}
hr.rounded {
  border-top: 8px solid var(--color-3);
  border-radius: 5px;
  margin: 2em;
}
/* the styles for the main - section */
main section {
	clear: both;
	margin: 1em;
	padding: 1em;
	border-top: 4px solid var(--color-2);
}
main section h2 {
	text-align: center;
	font-size: 200%;
	width: 400px;
	margin: auto;
	padding: .25em;
	border: 5px solid var(--color-3);
	border-radius: 10px 20px 0 20px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
	background-color: var(--color-3);
}
main section nav h3{
	width: 375px;
	padding: .5em;
	Color: var(--color-6);
	border: 5px solid var(--color-3);
	border-radius: 10px 20px 0 20px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
	background-color: var(--color-3); 
}
main section p {
	text-align: center;
	padding: 0 0 1em;
}
main section nav ol {
	font-size: 120%
}
/* format for the contact form */
fieldset {
    width: 70%;
	margin: 0 auto 3em auto;
    padding: 1em;
}
label {
    float: left;
    width: 12em;
    text-align: right;
}
label, input, select {
	font-size: 90%;
}
input, select {
    width: 15em;
    margin-left: .5em;
    margin-bottom: .5em;
}
input:required {
	border: 2px solid var(--color-5);
}
input:valid {
	border: 1px solid var(--color-1);
}
input:invalid {
	box-shadow: none;
	border: 2px solid var(--color-5);
}
#submit {
	margin-left: 7em;
	margin-top: 1em;
	width: 12em;
	background-color: var(--color-4); 
	border: 3px solid var(--color-3);
	border-radius: 10px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
}
#reset {
	width: 12em;
	background-color: var(--color-4); 
	border: 3px solid var(--color-3);
	border-radius: 10px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
}
/* format for image credits */
.credit {
	font-size: 50%;
	color: var(--color-3);
}

/* format color of links */
a[href] {
	color: var(--color-1);
	font-weight: bold;
}	
	
/* mouse focuses on or hovers over link */
a:hover, a:focus {
	color: #ffffff;
	text-shadow: 1px 1px .5px var(--color-5);
}

/* nested elements in ordered lists */
ol li {
	color: var(--color-2);
	font-size: 100%;
	text-indent: 10px;
	margin-bottom: .2em;
	list-style-type: upper-roman;
}

/* the styles for the footer */
footer {
	background-image: linear-gradient(225deg, var(--color-1), 10%, var(--color-2) 40%, var(--color-6) 90%);
	min-height: 100px;
	padding: .5em .5em 0 .5em;
}
address {
	margin-left: 50px;
	padding: 1em;
	color: var(--color-1); 
	font-weight: bold;
	float: left;
	background-color: var(--color-4); 
	border: 3px solid var(--color-3);
	border-radius: 10px;
	box-shadow: 2px 3px 4px 4px var(--color-5);
}
footer a[href] {
	color: #ffffff; 
}
footer p { 
	text-align: right;
	font-size: 90%;
	color: #ffffff;
}
/* the styles for the media queries */

/* 1015px or less */
@media screen and (max-width: 1015px) {
	header h1 { font-size: 350%; } 
}
/* 890px or less */
@media screen and (max-width: 890px) {
	header h1 { font-size: 300%; } 
	section { float: none; width: 100%; }
	section img { float: none; margin: 0 auto;}
	aside ol li {font-size: 90%; }
	aside { width: 16%; }
}
/* 770px or less */
@media screen and (max-width: 770px) {
	header h1 { font-size: 250%; } 
	main h4 { font-size: 130%;}
	main header h2 { font-size: 120%; }
	h5 { font-size: 120%; }
	#menu_bar ul li { width: 20%; }
	footer address { margin-left: .5em; padding: .5em; }
	#book { float: none; margin: 1em auto; }
}
/* 650px or less */
@media screen and (max-width: 650px) {
	main { margin: .5em auto; }
	h2 { font-size: 115%; }
	header h1 { font-size: 200%; }
	h3 { font-size: 130%; width: auto; }
	section nav ol { margin-top: .5em; }
	article { float: none; width: 95%; margin: 0 auto;}
	main p { text-align: center; margin: 0;}
	.bofd { font-size: 130%; padding: .5em;}
	th { font-size: 105%; }
	td { font-size: 100%; }
	main p { text-align: center; margin: 0; }
}
/* 550px or less */
@media screen and (max-width: 550px) {
	header h1 { font-size: 150%; } 
	main h4 { font-size: 110%; }
	main header h2 { font-size: 110%; }
	h5 { font-size: 110%; }
	main article { margin: 1em .25em; }
	#submit { margin: 1em; box-shadow: 1px 2px 3px 3px var(--color-5); }
	#reset { margin: 1em; box-shadow: 1px 2px 3px 3px var(--color-5); }
	#menu_bar { display: none; }
	#mobile_menu { display: block; margin-top: 4em; }
	.slicknav_menu { background-color: var(--color-3) !important; }
	.slicknav_menutxt { color:#ffffff !important; font-size:.8em !important; }
	.slicknav_btn { background-color: var(--color-1) !important; }
	.slicknav_nav a[href] { color: #ffffff !important; }
	#mobile_menu a.current { color: #ffffff; text-shadow: 2px 2px 1px var(--color-1); }
	label { text-align: left; }
}
/* 390px or less */
@media screen and (max-width: 390px) {
	header h1 { font-size: 130%; } 
	footer address { margin-left: .2em; padding: .2em; font-size: 75%; }
	footer p { font-size: 60%; } 
	footer img { max-width: 15%; height: auto; }
	figure { margin: .5em; padding: 0; }
	th { font-size: 90%; }
	td { font-size: 90%; padding: .2em .1em; }
	#mobile_menu { margin-top: 3em; }
}
/* 360px or less */
@media screen and (max-width: 360px) {
	header h1 { font-size: 120%; } 
}