/* External CSS file for Path of Light Yoga, class & index html files. */
/* I did leave the comments in the css because they're less annoying honestly */
/* I am so tired of typing "Path of Light Yoga" so I am going to type "PoLY instead! Saves time anyways */



/*Using a Universal Selector in order ot make the box sizing property "boarder box"*/
* { box-sizing: border-box; }


/* Changing the background to a shade of white, and the text to a shade of blue. In path of light Yoga #5, font-family was added */
body 
{ 
    background-color:  #40407A;
    color: #40407A; 
    font-family: Verdana, Arial, sans-serif; 

    /* As part of chapter 6, aside from changing the background color the margins have also been adjusted (min, max, margin) */
    max-width: 1600px;
    min-width: 900px;
    margin: 0;
    
}


/* Changing the background of the text within the header tag to a lighter blue.. almost cyan-ish I think?. 
   Added the background-image & url (that is right flushed & non-repeatable) as Part of Path of Light Yoga #5 */
header 
{ 
    background-color: #40407A;
    background-image: url(sunrise.jpg);

    /* Removed background positioning as part of chaper 6 and changed the background color, text color, and changed background size */
    /* Also replaced the background image too!*/
    color: #FFFFFF;
    background-size: 100% 100%;

    /*Adding a top margin as part of PoLY Chapter 7 */
    margin-top: 50px;

}

/* removing text underline by targetting hyperlinks within the header as part of PoLY Chapter 7 */
header a
{
    text-decoration: none;

}

/*Adding Pseudo classes to change link colors as part of PoLY Chapter 7; unvisited links, visited, and hover for header links*/
header a:link { color: #FFFFFF; }
header a:visited { color: #FFFFFF; }
header a:hover { color: #EDF5F5; }


/* Changing the background of the text within the footer tag to the same shade of blue as the header in this file*/
/* Added style,size, and align as part of Path of Light Yoga #5 */
/* Removed background color as part of Chapter 6*/
footer 
{ 
    
    text-align: center;
    font-style: italic;
    font-size: .80em;

    /*Styling for clearing right float as part of PoLY Chapter 7*/
    clear: right;
}


/* Adding a "nav", "nav a", "h1 selector", "li", and "dd" as part of Path of Light Yoga #4, along with some elements/attributes within them */
/* Making text in the nav tags bold & center aligned */
nav 
{
    
    font-weight: bold;

    /*As part of chapter 6, text alignment, background, and padding where added.*/
    text-align: right;
    margin: 0;
    background-color: white;
    padding-top: .5em;
    padding-right: 1em;
    padding-bottom: 1em;

    /*Configuring a fixed position, top, left, z-index, width and hieght element as part of PoLY Chapter 7 */
    width: 100%;
    height: 50px;
    z-index: 9999;
    top: 0;
    left: 0;
    position: fixed;

}


/* Configuring the "nav ul" selector/tag, with no margins & list markers, right padding, and font size as part of PoLY Chapter 7 */
nav ul
{
    list-style-type: none;
    margin: 0;
    padding-right: 2em;
    font-size: 1.2em;

}


/*Configuring the "nav li" selector/tag, with inline display &left padding as part of PoLY Chapter 7*/
nav li
{
    padding-left: 2em;
    display: inline;

}


/* removing text underline by targetting hyperlinks in the navigation*/
nav a
{
    text-decoration: none;

}


/*Adding Pseudo classes to change link colors as part of PoLY Chapter 7; unvisited links, visited, and hover for nav links*/
nav a:link { color: #3F2860; }
nav a:visited { color: #497777; }
nav a:hover { color: #A26100 ; }


/* An id added from Chapter 6: making a custom id to be used in specific locations to apply specific elements */
/* Center aligns text, has padding, reduces width and makes the background color a light white */
#wrapper
{
    margin-left: auto; 
    margin-right: auto;
    padding: 2em;
    width: 80%;
    background-color: #F5F5F5;
}


/* Another Id from chapter 6... edits space in order to display and image */
#mathero
{
    height: 300px;
    background-image: url(yogamat.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;

    /* Clearing floats as part of PoLY Chapter 7 */
    clear: both;
}


/* Yet another id from chapter 6 I have to comment ☺ */
/* Basically does the same thing as "mathero" except for a different image on a different page */
#loungehero
{
    height: 300px;
    background-image: url(yogalounge.jpg);
    background-size: 100% 100%;
    background-repeat:no-repeat;

    /* Clearing floats as part of PoLY Chapter 7 */
    clear: both;
}


/* Adding a class (an id but it can be used multiple times per page) as part of Chapter 6 Path of Light Yoga */
/* Sets the hieght to be 40% of the viewport, changes font size, and adds different types of padding */
/* Height changed from 40vh to 50vh as part of PoLY Chapter 7 */
.home
{
    height: 50vh;
    padding-top: 6em;
    padding-left: 8em;
    font-size: 120%;
    min-height: 300px;
}


/* Similar to the above class, this was added as part of chapter 6 & is a class. */
/*Configures hieght & padding */
/* Changed the height property from 200 -> 250px as part of Chapter 7 PoLY */
.content
{
    height: 250px;
    padding-top: 2em;
    padding-left: 8em;
    padding-bottom: 2em;
}


/*Adding a class called "OneThird" as part of PoLY Chapter 7, which sets float, width, and padding to sections where it's used */
/* Width is "1/3" */
.OneThird
{
    float: left;
    width: 33%;
    padding-left: 2em;
    padding-right: 2em;
}


/*Adding a class called "OneHalf" as part of PoLY Chapter 7, which sets float, width, and padding to sections where it's used */
/* Very similar to the ".OneThird" class, except width is "1/2" */
.OneHalf
{
    float: left;
    width: 50%;
    padding-left: 2em;
    padding-right: 2em;
}


/* Making font sizes be 90% of their original size in lists */
/* Added a one-liner as part of chaoter 6; made h2 margin be 0 */
li { font-size:90% }
dd { font-size:90% }
h2 { margin: 0; }