header{background-color:#40407A;
       color:#FFFFFF;
       background-image:url(sunrise.jpg);
       background-size:100% 100%;
       margin-top:50px;
       font-size:90%;
       min-height:200px;}
body{background-color:#40407A; color:#40407A;
     font-family:verdana, arial, sans-serif;
     margin:0;}
#wrapper{ 
         background-color:#f5f5f5;
         padding:2em;}
.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%;
         display:none;}

.loungehero{height:300px;
         background-image:url(yogalounge.jpg);
         background-size:100% 100%;
         display:none;}
         
nav{text-align:right;
    font-weight:bold;
    font-size:1.2em;
    background-color:#FFFFFF;
    color:#40407A;
    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:link{color:#3F2860;}
    nav a:visited{color:#497777;}
    nav a:hover{color:#A26100;}
nav a{text-decoration:none;}
h2{margin:0;}
footer{font-size:small;
       font-style:italic;
       text-align:center;
       float-right:clear;}
li{font-size:90%
   padding-left:4em;}
dd{font-size:90%}
*{box-sizing:border-box;}
section{padding-left:.5em;
        padding-right:.5em;}
#flow{display:block;}
@media (min-width:600px) {nav ul{display:flex;
                         flex-wrap: nowrap;
                          justify-content: flex-end;}
                          section{padding-left:2em;
                                   padding-right:2em;}
                          #mathero{display:block;
                           margin-bottom: 1em;}
                          #loungehero{display:block;
                            margin-bottom: 1em;}
                          #flow{display:flex;
                           flex-direction: row;
                           flex-wrap:wrap;}
    @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%;}
    }