* { box-sizing: border-box; }
body { background-color: #40407A;
       color: #40407A;
	    font-family: Verdana, Arial, sans-serif;
	    margin: 0; }
#wrapper { 
           background-color: #F5F5F5;
		     padding: 2em; }
header { background-color: #40407A;      
         color: #FFF;
         background-image: url(sunrise.jpg);
         background-size: 100% 100%;
			margin-top: 50px;
			font-size: 90%;
			min-height: 200px; }
header a { text-decoration: none; }
header a:link { color: #FFF; }
header a:visited { color: #FFF; }
header a:hover { color: #EDF5F5; }
.home { height: 20vh;
       padding-top: 2em;
	    padding-left: 10%; }
.content { height: 20vh;
           padding-top: 2em;
		     padding-left: 10%; }
nav { text-align: right;
      background-color: #FFF;
	   margin: 0;
	   padding-top: 0.5em; 
	   padding-bottom: 1em;
	   padding-right: 1em;
	   position: fixed;
	   top: 0;
	   left: 0;
	   z-index: 9999;
	   width: 100%;
	   height: auto;
	   padding-right: 0; }
nav ul { list-style-type: none; 
         margin: 0;
			padding-right: 2em;
			font-size: 1.2em; }
nav li { display: inline;
			padding-left: 2em; 
			width: 30%; }
nav a { text-decoration: none; }
nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100; }
li, dd { font-size: 90%; }
footer { font-size: small;
			text-align: center;
			font-style: italic; 
			clear: right; }
#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%; 
		        ackground-repeat: no-repeat;
		        display: none; }	  
h2 { margin: 0; }		  
section { padding-left: .5em;
          padding-right: .5em; }
#flow { display: block; }
table { border: 1px solid #40407A;
	     border-collapse: collapse; 
	     margin-bottom: 2em;
	     min-width: 400px; }
td, th { padding: 0.5em;
	    border: 1px solid #40407A; }
tr:nth-of-type(even) { background-color: #D7E8E9; }
caption { margin: 1em;
        font-weight: bold;
		font-size: 120%; }
form { display: flex;
      flex-flow: column nowrap; }
input, datalist, textarea { margin-bottom: .5em; }

@media (min-width: 600px) {		  
	nav ul { display: flex;
			   flex-flow: row nowrap;
				justify-content: flex-end; }	
	nav li { width: 8em; }
	section { padding-left: 2em;
			    padding-right: 2em; }
	#mathero, #loungehero { display: block;
									padding-bottom: 1em; }
	#flow { display: flex;
			  flex-direction: row; }
	form { width: 60%;
			 max-width: 40em;
		    display:grid;
		    grid-gap: 1em; gap: 1em;
		    grid-template-columns: 9em 1fr;
		    grid-template-rows: auto; }
	input[type="submit"] { grid-column: 2 / 3;
						        width: 9em; }
 }
 
 @media (min-width: 1024px) { 
	header { font-size: 120%; }
	nav { font-weight: bold; }
	.home { height: 30vh;
			  padding-top: 5em;
			  padding-left: 8em; }
	.content { height: 30vh;
				  padding-top: 2em;
				  padding-left: 8em; }
	#wrapper { width: 80%; margin: auto; }
}
		  