/*----------------- CSS File For the Path of Light Yoga Site V4 --------------*/
/* For this chapter, I'm adding some size adjusters/other CSS to position,    */
/* resize, and overall organize the webpage.

/* NOTE: if confused about anything, see the hands-on activities for the chapter!*/

body
{

        color:#40407A;
        background-color: #40407A;
        font-family: Verdana, Arial, sans-serif;
        max-width: 1600px;
        min-width: 900px;
        margin: 0;

}


header
{

        background-color: #80CBC4;
        background-image: url(sunrise.jpg);
        background-color: #40407A;
        color: #FFFFFF;
        background-size: 100% 100%;


}

h2
{

        margin: 0;

}


footer
{

        font-style: italic;
        text-align: center;
        font-size: 0.80em;

}


nav
{

        
        background-color: white;
        margin: 0;
        padding-top: 0.5em;
        padding-bottom: 1em;
        padding-right: 1em;
        font-weight: bold;
        text-align: right;

}


nav a
{
        
        text-decoration: none;

}


li, dd 
{

        font-size: 90%;

}


#wrapper
{

/*NOTE: This (the margins) centers the contents that have this ID                             */
        margin-right:auto;
        margin-left:auto;

        
        width: 80%;
        background-color: #F5F5F5;
        padding: 2em;

}


/* NOTE: "40vh" means that you're setting the contents to be 40% of the viewports height      */
/*(aka 40% the height of your browsers window)                                                */

.home
{

        height: 40vh;
        padding-top: 6em;
        padding-left: 8em;
        font-size: 120%;
        min-height: 300px;

}


.content
{

        height: 200px;
        padding-top: 2em;
        padding-left: 8em;
        padding-bottom: 2em;

}


#mathero
{

        height: 300px;
        background-image: url(yogamat.jpg);
        background-size: 100% 100%;
        background-repeat: no-repeat;

}


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

}