/*
Path of Light Yoga Studio
Author: Casey Moore
Date: 12/14/2025
*/
header {background-color:#40407A;
	background-image:url(sunrise.jpg);
	background-size: 100% 100%;
	background-position: right;
	color:#FFFFFF;
	background-repeat: no-repeat;
	margin-top: 50px;
	min-height: 200px;
	font-size: 90%;}/*Makes the background of the header blue, inserts an image that is on the right without repeating*/
header a {text-decoration: none;}/*Removes underlines from links in the header*/
header a:link {color: #FFFFFF;}/*Makes links white*/
header a:visited {color: #FFFFFF;}/*Makes visited linkes white*/
header a:hover {color: #EDF5F5;}/*Changes the links color when hovering over it*/
#home {height: 20vh;
	padding-top: 2em;
	padding-left: 10%;}/*This is the formatting for exclusively the home page header*/
#content {height: 20vh;
	padding-top: 2em;
	padding-left: 10%;}/*Formatting for the content pages headers*/
body {color:#40407A;
	background-color:#40407A;
	font-family: Verdana, Arial, sans-serif;
	margin: 0;} /*Makes whole background off white, the text violet and the font Verdana, Arial, and sans-serif*/
section {padding-left: 2em;
	padding-right: 2em;
	flex: 1;}/*configures the section*/
nav {font-weight: bold;
	text-align: right;
	background-color: white;
	margin: 0;
	padding-top: 0.5em;
	padding-bottom: 1em;
	padding-right: 0em;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	height: auto;
	width: 100%}/*To make the navigation text bold and aligned properly*/
nav a {text-decoration: none;}/*Removes the line under navigation links*/
nav ul {list-style-type: none;
	font-size: 1.2em;
	margin: 0;
	padding-right: 2em;
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-end;}/*Styles the unordered list*/
nav li {padding-left: 4em;
	display: inline;}/*Style the unordered list items*/
nav a:link {color: #3F2860}/*Makes links a color*/
nav a:visited {text-decoration: none;
	color: #497777}/*Makes visted links a different color*/
nav a:hover {color: #A26100;}/*Makes the links change color when hovered over*/
li {font-size: 90%}/*Makes the font size 90% of what it is*/
dd {font-size: 90%}/*Makes the font size 90% of what it is*/
footer {font-size: small;
	font: italic;
	text-align: center}/*Makes the background of the footer blue, the font size blue, in italics, and centered*/
#wrapper {background-color: #F5F5F5;
	padding: 2em;
	width: 80%;}/*This makes the background color behind the page purple and makes sure the page is centered*/
#mathero {height: 300px;
	background-image: url(yogamat.jpg);
	background-size: 100% 100%;
	display: block;
	margin-bottom: 1em;}/*Add an additional image to fill the space in the background*/
#loungehero {height: 300px;
	background-image: url(yogalounge.jpg);
	background-size: 100% 100%;
	display: block;
	margin-bottom: 1em;}/*Also to add an additional image to fill space*/
#flow {display: flex;
	flex-flow: row wrap;}
h2 {margin: 0%}
* {box-sizing: border-box;}
@media (min-width: 1024px) {
header {font-size: 120%;}
#home {height: 50vh;
	padding-top: 5em;
	padding-left: 8em;}
#content {height: 30vh;
	padding-top: 2em;
	padding-left: 8em;}
#wrapper {margin: auto;
	width: 80%;}
}
table {margin: 1em;
	border: 1px solid #40407A;
	border-collapse: collapse;}/*formats a table with a colored border*/
td, th {border: 1px solid #40407A;
	padding: 0.5em;}/*formats the table cells*/
caption {font-weight: bold;
	font-size: 120%;
	margin: 1em;}/*configures the table captions*/
tr:nth-of-type(even) {background-color: #D7E8E9;}/*modifies the color of the even rows*/
form {flex-direction: column;
	flex-wrap: nowrap;
	display: flex;}/*Configures a single column form*/ds
input {margin-bottom: 0.5em;}
datalist {margin-bottom: 0.5em;}
textarea {margin-bottom: 0.5em;}
form {display: grid;
	grid-template-rows: auto;
	grid-template-columns: 9em 1fr;
	gap: 1em;
	width: 60%;
	max-width: 40em;}/*Configures a two column form*/
input[type="submit"] {grid-column: 2/3;
	width: 9em;
	margin-bottom: 0.5em;}