/* External CSS file for Path of Light Yoga, class & index html files. */

/* 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%;

}

/* 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;
}



/* 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;

}

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

}


/* 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;
}

/* 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;
}

/* 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 */
.home
{
    height: 40vh;
    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 */
.content
{
    height: 200px;
    padding-top: 2em;
    padding-left: 8em;
    padding-bottom: 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; }