/* External CSS file for Path of Light Yoga, class & index html files. */
/* I removed all comments from the css, and replaced them with only the ones that are relevent to Chapters 8 & 9 PoLY (Path of Light
    Yoga). This basically means their is way less green here! Am I happy? I am a little bit, makes things less chaotic. (Note: 
    I just edited this comment to say "chapter 8 & 9" out of laziness when doing chapter 9...*/

/* I like to comment what each block of css does, but when they're constantly being modified its a bit annoying. */
/* Making my webpage more mobile, user, and "comment-friendly" friendly I suppose... */


* { box-sizing: border-box; }


body 
{ 
    /* Removed the max-width and min-width properties as part of chapter 8 PoLY*/
    background-color:  #40407A;
    color: #40407A; 
    font-family: Verdana, Arial, sans-serif; 
    margin: 0;
    
}


header 
{ 
    background-color: #40407A;
    background-image: url(sunrise.jpg);
    color: #FFFFFF;
    background-size: 100% 100%;
    margin-top: 50px;

    /*Added the min height to the header & font size attribute as part of chapter 8 PoLY*/
    min-height: 200px;
    font-size: 90%;

}


header a
{
    text-decoration: none;
}


header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #EDF5F5; }


footer 
{ 
    
    text-align: center;
    font-style: italic;
    font-size: .80em;
    clear: right;
}


nav 
{
    /* Massive block of css, looks a bit annoying since i removed the comments sorry! */
    /* Changed height to auto, and right-padding to 0 as part of chapter 8 PoLY */
    font-weight: bold;
    text-align: right;
    margin: 0;
    background-color: white;
    padding-top: .5em;
    padding-right: 0;
    padding-bottom: 1em;
    width: 100%;
    height: auto;
    z-index: 9999;
    top: 0;
    left: 0;
    position: fixed;

}


nav ul
{
    list-style-type: none;
    margin: 0;
    padding-right: 2em;
    font-size: 1.2em;

}


nav li
{
    /*Changed the left padding to 4em as part of chapter 8 PoLY*/
    padding-left: 4em;
    display: inline;

}


nav a
{
    text-decoration: none;

}


nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100 ; }


/* Created styling for the <selection> tag, making its elements have smal left/right padding as part of chapter 8 PoLY*/
section
{
    padding-right: .5em;
    padding-right: .5em;
}

#wrapper
{
    /* Removed margin-left, marign-right, and width attributes as part of chapter 8 PoLY*/
    padding: 2em;
    background-color: #F5F5F5;
}


#mathero
{
    /*Changed display to none and removed clear attribute as part of chapter 8 PoLY*/
    display: none;

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


#loungehero
{
    /*Changed display to none and removed clear attribute as part of chapter 8 PoLY*/
    display: none;

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

/*Creating a "flow" id which will set the display to "block" for the content its used by, as part of chapter 8 PoLY*/
#flow
{
    display: block;
}


.home
{
    /*Changed the viewport value to 20vh, left padding to 10%, and top padding to 2em as part of chapter 8 PoLY*/
    height: 20vh;
    padding-top: 2em;
    padding-left: 10%;
}


.content
{
    /*Changed the viewport value to 20vh and left padding to 10% as part of chapter 8 PoLY*/
    height: 20vh;
    padding-top: 2em;
    padding-left: 10%;
}


li { font-size:90% }
dd { font-size:90% }
h2 { margin: 0; }


/* Creating css style for the table element as part of chapter 9 PoLY. Basically making it so that there is a collored boarder,
    with no cell spacing & a small bottom margin. */
table
{
    border-collapse: collapse;
    border: 1px solid #40407A;
    margin-bottom: 1em;
}


/*  Styling the <td> and <th> elements such that they have a small amount of padding and a purplish boarder 
    as part of chapter 9 PoLY. */
td, th
{
    padding: .5em;
    border: 1px solid #40407A;
}


/*Creating a pseudo class with "tr:nth-of-type(even)" to make the even number rows have a white-ish background color as
  part of Chapter 9 PoLY. */
tr:nth-of-type(even) 
{ 
    background-color: #D7E8E9; 
}


/* Styling the caption element such that is has a small margin, while also being bold and slightly bigger, as part of Chapter 9 PoLY.*/
caption
{
    margin: 1em;
    font-weight:bold;
    font-size: 120%;
}

/*Creating a media query which triggers if the min-width of the window is 600px or greater, as part of Chapter 8 PoLY */
@media(min-width: 600px)
{
    /*Making the "header" links be able to adjust based on window size*/
    nav ul
    {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: flex-end;
    }

    /*Changing the padding/flex based on window size */
    section
    {
        padding-left: 2em;
        padding-right: 2em;

        flex: 1;
    }

    /*changing the display/bottom padding based on window size*/
    #mathero
    {
        display: block;
        padding-bottom: 1em;

    }

    /*changing the display/bottom padding based on window size*/
    #loungehero
    {
        display: block;
        padding-bottom: 1em;

    }

    /* Making content with the "flow" id be able to change based on window size */
    #flow
    {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
}



/*Making another media query as part of Chapter 8 PoLY, which targets a min window width of 1024px*/
@media(min-width: 1024px)
{

    /*Change the size of the header based on the window size*/
    header
    {
        font-size: 120%;
    }

    /*Change the size of the contents with the "home" class to take up 50% of the viewport height alongside adding padding,
      all based on window size.*/
    .home
    {
        height: 50vh;
        padding-top: 5em;
        padding-left: 8em;
    }

    /*Change the size of the contents with the "content" class to take up 30% of the viewport height alongside adding padding,
      all based on window size. This basically functions just like the "home" class with different values*/
    .content
    {
        height: 30vh;
        padding-top: 2em;
        padding-left: 8em;
    }

    /* Changes the width and margins (center aligning with auto margins) for the container with the wrapper id, based on the 
       size of the window*/
    #wrapper
    {
        width: 80%;
        margin: auto;
    }

}