/*
Path of Light Yoga Studio
Author: Alan Rabago
Date: 10/25/24
*/

* {box-sizing:border-box;}

body { background-color: #40407A;
	margin:0;
	color: #40407A;
	font-family:Verdana, Arial, sans-serif;
	
}
	   
#wrapper{background-color:#F5F5F5;
	background-position:center;
	padding:2em;

}

footer {font-size:.60em;
 text-align:center;
 clear:right;
 
 }

header { background-color: #40407A; 
	background-image:url(sunrise.jpg); 
	color:#FFFFFF;
	background-size:100% 100%;
	margin-top:50px;
	font-size:90%;
	min-height:200px;

}


header a {text-decoration:none;}

header a:link {color:#FFFFFF;}

header a:visited {color:#FFFFFF;}

header a:hover {color:#EDF5F5;}



nav {font-weight:bold;
	text-align: right;
	background-color:#FFFFFF;
	margin:0;
	padding-top:0.5em;
	padding-bottom:1em;
	padding-right:0;
	position:fixed;
	top:0;
	left:0;
	z-index:9999;
	width:100%;
	height:auto;
	
}

nav a {text-decoration:none;}

nav a:link {color:#3F2860;}

nav a:visited {color:#497777;}

nav a:hover {color:#A26100;}


nav ul:{margin:0;
	list-style-type:none;
	padding-right:2em;
	font-size:1.2em;
	
}

nav li{font-size:90%;
	display:inline;
	padding-left:4em;
	
}



.home{height:20vh;
	padding-top:2em;
	padding-left:10%;

}

.content {height:20vh;
	padding-top:2em;
	padding-left:10%;

}

#mathero {height:300px;
	background-image:url(yogamat.jpg);
	background-size:100% 100%;
	background-repeat:no-repeat;
	display:none;
	
}

#loungehero {height:300px;
	background-image:url(yogalounge.jpg);
	background-size:100% 100%;
	display:none;}

h2 {margin:0;}


section {padding-left:0.5em;
	padding-right:0.5em;

}

#flow {display:block;}


table {border:1px solid #40407A;
	margin-bottom:1em;
	border-collapse:collapse;
		
}

td, th {padding:0.5em;
	border: 1px solid #40407A;
	
}
	

	
tr:nth-of-type(even) {background-color:#D7E8E9;

}
	
caption {font-size:120%;
	font-weight:bold;
	margin:1em;

}
form {display:flex;
	flex-direction:column;
	flex-wrap:nowrap;}
}
input {margin-bottom:.5em;}

textarea {margin-bottom:.5em;}

datalist {margin-bottom:.5em;}
	
/********Medium Display*********/

@media (min-width:600px){
	#mathero {display:block;
	margin-bottom:1em
	}
	
	#loungehero {display:block;
	margin-bottom:1em;
	}
	
	nav ul {display:flex;
	flex-wrap:nowrap;
	justify-content:flex-end;}
	
	section {padding-left:2em;
	padding-right:2em;
	flex:1;}
	
	#flow {display:flex;
	flex-direction:row;
	flex-wrap:wrap;}
	
			
	form {display:grid;
	grid-template-columns:9em 1fr;
	width:60%;
	grid-gap:1em;
	max-width:40em;}	

input[type="submit"]
	{grid-column:2/3;
	width:9em;
	margin-bottom:9em;}
	
label {text-align:right;}
}
/******** Large Display *************/

@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%;} 

}