/*----------------- CSS File For the Path of Light Yoga Site V6 --------------*/
/* For this chapter, I'm am focusing on responsive web design - so using stuff*/
/* like flex box and grid box layouts, alongside responsive (size adjusting)  */
/* images. It's so that the webpage looks good no matter the width of the screen*/

/* NOTE: if confused about anything, see the hands-on activities for the chapter!*/
/* NOTE: I removed some of the CSS (such as min-width/max-width in the body)     */
/* to avoid issues.                                                              */




*{

/* This here makes it so that every elements width/heigh includes the padding and margins*/
/* By default, the width/heigh is only the content, not the padding/margin (this undo's that)*/
        box-sizing: border-box;

}


body
{

        color:#40407A;
        background-color: #40407A;
        font-family: Verdana, Arial, sans-serif;
        margin: 0;


}


header
{

        background-color: #80CBC4;
        background-image: url(sunrise.jpg);
        background-color: #40407A;
        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;

}


h2
{

        margin: 0;

}


footer
{

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


/* This clears right float                                                               */
        
        clear: right;

}


nav
{

        
        background-color: white;
        
        margin: 0;
        padding-top: 0.5em;
        padding-bottom: 1em;
        padding-right: 0;
        font-weight: bold;
        text-align: right;
        width: 100%;
        height: auto;
        
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;

}


nav a
{
        
        text-decoration: none;

}


nav ul
{

        list-style-type: none; 
        
        margin: 0;
        padding-right: 2em;
        font-size: 1.23em;

}


nav li
{

        padding-left: 4em;

/* "display:inline" simply states that for this given element, don't start on a new line */
/*  and base the elements size on the content it holds                                   */

        display: inline;

}


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


nav a:visited 
{ 
            
        color: #497777; 
        
}


nav a:hover 
{ 
            
        color: #A26100; 
        
}


li, dd 
{

        font-size: 90%;

}


section
{

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

}


#wrapper
{

        background-color: #F5F5F5;
        padding: 2em;

}


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

.home
{

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

}


.content
{

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

}


#mathero
{

        display: none;

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

        

}


#loungehero
{
   
        display: none;

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

}


#flow
{

    display: block;

}


/*These here are the media querries. They'll be used/applied when the screen width*/
/* is above the specified value!                                                 */


@media (min-width: 600px)
{

    nav 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;

    }

}


@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
    {

/* Worth noting that "margin:auto" can be used to center things (left/right center)*/

        margin: auto;
        width: 80%

    }

}