CSS File from the HTML/CSS Class on 4/20/18

styles.css

/* Change the box-sizing so we don't have issues calculating the width */
* {
    box-sizing: inherit;
}

html {
    box-sizing: border-box;
    font-size: 16px;
}

body {
    /* Change the fonts used on the site */
    font-family: Verdana, sans-serif;
    margin: 0; /* Gets rid of the default margin around the edge of the browser */
}

.site-header {
    background-image: url(images/header.jpg); /* Add a background image to header */
    background-size: cover; /* fill the area of the header and scale up and down */
    background-position: right top; /* change alignment of background image */
    height: 70vh; /* vh=view height or 60% of the screen height */

    /* Use Flexbox to arrange the logo and the navigation horizontally */
    display: flex;
    justify-content: space-between; 
    align-items: flex-start; /* make sure image doesn't stretch to the bottom */
}

/* Navigation Styles */
.main-navigation ul {
    list-style: none;
    display: flex;
}

.main-navigation ul li {
    /*margin: 10px 20px;*/
    margin: .8rem 1.2rem; /* Using the font size to add spacing */
}

.main-navigation a {
    color: #fff;
    text-decoration: none;
    font-size: 1.2rem;
    padding: .5rem 1rem;
    border-bottom: 2px solid #fff; /* settings are the border thickness, border type, and border color */
    position: relative;
}

/*  Roll-over (hover) effect for navigation links */
.main-navigation a:hover {
    background-color: rgba(255, 255, 255, .3);
    border-bottom: 2px solid yellow;
}

/* Animated border below the link */
.main-navigation a:after {
    content: "";
    height: 3px;
    width: 0;
    background-color: yellow;
    position: absolute;
    left: 0;
    bottom: -4px;
    transition: width .5s; /* CSS Trasition: Have the width animate for 1 second */
}

.main-navigation a:hover:after {
    width: 100%;
}


/* Styles for our <section> content */
.content {
    padding: 4rem 2rem;
}

/* The .wrapper element keeps our content centered on the page */
.content .wrapper {
    max-width: 900px;
    margin: 0 auto; /* Using margin to center it on the page. "auto" means have the left/rigtht margin be equal */
}

.content-dark {
    background-color: #232629;
    color: #fff;
}

/* Paralax Styles for that cool background image effect */
.paralax:before {
    background-attachment: fixed; /* this is the key to paralax -- make the background stay fixed */
    background-position: center center;
    background-size: cover;
    min-height: 300px;
    position: relative;
    z-index: -1;
    content:"";
    position: absolute;
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0;
}

.paralax {
    background-color: rgba(255, 255, 255, .6);
    position: relative;
}

/* Styles for the specific background images for our paralax sections */
.paralax-bg1:before {
    background-image: url(images/trees.jpg);
}

.site-footer {
    background-color: #262a2e;
    color: #fff; /* shortcut for #ffffff */
    padding: 20px;
}


/* Media Queries for our Responsive Web Design - Override any issues from above */

@media(max-width: 920px){
    .site-header{
        /* Display logo & navigation in a column instead of a row */
        flex-direction: column-reverse;
        justify-content: flex-end; /* lining everything up with the top (no space-between) */
        align-items: center; /* centering the items instead of keeping them left aligned */
    }
}

@media(max-width: 600px) {
    /* Reduces the spacing between the navigation items */
    .main-navigation ul li {
        margin: .8rem 0rem;
    }
}