* { box-sizing: border-box; }
body { background-color: #40407A;
       color: #40407A;

	   margin: 0;
	   font-family: Verdana, Arial, sans-serif; 
}
#wrapper { 
		   background-color: #F5F5F5;
		   padding: 2em; 
}
header { background-color: #40407A;
         color: #FFFFFF;
		 background-image: url(sunrise.jpg);
		 background-size: 100% 100%; 
		 margin-top: 50px;
		 font-size:90%;
		 min-height: 200px;
}
header a         { text-decoration: none;
                   transition: color 10s ease-out;  }
header a:link 	 { color: #FFF; }
header a:visited { color: #FFF; }
header a:hover 	 { color: #8F92B2; }

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

nav ul { list-style-type: none; 
         margin: 0;
		 padding-right: 2em;
		 font-size: 1.2em; 
}
nav li { display: inline; 
         padding-left: 4em; 
}
nav a         { text-decoration: none; }
nav a:link    { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover   { color: #A26100; }
footer { font-size: small;
		 font-style: italic;
		 text-align: center;
		 clear: right;
}
li, dd { font-size: 90%; }
.home { height: 50vh;
        padding-top: 2em;
		padding-left: 10%;
		height: 20vh;
}
.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%;
		   background-repeat: no-repeat;
		   display: none;
}	
section { padding-right: .5em;
          padding-left: .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; }		
form { display: flex;
       flex-flow: column nowrap; }
input, datalist, textarea { margin-bottom: .5em; }

@media (min-width: 600px) {
		nv ul 		{ display: flex;
					  flex-direction: row;
					  flex-wrap: nowrap; 
					  justify-content: flex-end; }
		section 	{ padding-left: 2em;
					  padding-right: 2em;
					  flex: 1; }
		#mathero    { display: block;
					  margin-bottom: 1em; }
		#loungehero { display: block;
					  margin-bottom: 1em; }
		#flow 		{ display: flex;
					  flex-direction: row;
				      flex-wrap: wrap; }
		form 		{ width: 60%; 
					  max-width: 40em;
					  display: grid;
                      gap: 1em;
		              grid-template-columns: 9em 1fr; }	
        input[type="submit"] { grid-column: 2 / 3;
                               width: 9em; 
							   margin-bottom: .5em;}	
}	
@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%; }	
}