/* Logan Irish, Oct. 17 2018 & Oct. 28 2018 */


/* Style for body specifies a background color */

body {
    background-color: #E0F0FF;
}

img {
    max-width: 100%;
}


/* Styles for Mobile Layout */


/* Style for the container centers the page and specifies the width */

#container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}


/* Style for the header specifies top margin, background color, rounded corners, and center align content */

header {
    font-family: Verdana, Arial, serif;
    font-size: 2em;
    margin-top: 0.2em;
    margin-bottom: 0.3em;
    text-align: center;
    padding: 0.2em;
    color: #000066;
}

#banner {
    text-align: center;
}


/* Style for nav specifies text properties */

nav {
    font-family: Lucida, "Times New Roman", serif;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
}


/* Style specifies padding and margins for unordered list */

nav ul {
    padding: 0;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}


/* Style for nav li specifies the background color, rounded corners, removes bullet style, and applies margins and padding for list items within the navigation */

nav li {
    background-color: #000066;
    list-style-type: none;
    margin: 0.4em;
    padding: 0.5em;
}


/* Style changes navigation link text color to white and removes the underline */

nav li a {
    color: #FFFFFF;
    text-decoration: none;
}

nav li a:link {
    color: #FFFFFF;
}

nav li a:hover {
    color: #CCFFCC;
    font-size: 1.5em;
}


/* Style for the main specifies a block display, text properties, margins, padding, rounded corners, and borders  */

main {
    display: block;
    font-family: Georgia, "Times New Roman", sans-serif;
    font-size: 1em;
    margin-top: 0.5em;
    padding: 0.5em;
    border-radius: 1em;
    background-color: #FFFFFF;
}


/* Style for the footer specifies font size, text alignment, and top margin */

footer {
    font-size: .70em;
    text-align: center;
    margin-top: 2em;
}


/* Style displays the mobile class */

.mobile {
    display: inline;
}


/* show mobile text on mobile*/

.desktop {
    display: none;
}


/* hide desktop text on mobile*/


/* Mobile view style */

@media only screen and (max-width: 481px) {
    img {
        width: 80%;
    }
    nav li {
        display: block;
        margin-left: 1%;
        margin-right: 1%;
        padding-left: 0;
        padding-right: 0;
    }
    /* displays nav vertical */
    main {
        clear: left;
    }
    .mobile {
        display: none;
    }
    /* hides mobile text on desktop view */
    .desktop {
        display: inline;
    }
    /* shows desktop text on desktop view */
}


/* Tablet view style */

@media only screen and (max-width: 769px) {
    #container {
        width: 80%;
    }
    /* shrink container */
    img {
        width: 60%;
    }
    /* shrink img */
    nav ul {
        margin: 0;
        padding-left: 0.50%;
        padding-right: 0.50%;
    }
    /* update nav styles */
    nav li {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        white-space: nowrap;
    }
    nav li a {
        display: inline-block;
        padding: 0.7em;
        font-size: 1.25em;
    }
    /* builds nav from top to bottom */
    main {
        border: none;
        border-radius: 1em;
        box-shadow: 1em 1em 1em #331400;
        margin-top: 1em;
    }
}


/* Desktop view style */

@media only screen and (min-width: 770px) {
    /* Style specifies a width of 80% for container */
    #container {
        width: 80%;
    }
    /* Style specifies an image with a width of 60% */
    img {
        width: 60%;
    }
    /* Style specifies margin and padding for the unordered list in the navigation */
    nav ul {
        margin: 0;
        padding-left: 0.50%;
        padding-right: 0.50%;
    }
    /* Style for navigation list specifies border, margin, padding, width and white-space */
    nav li {
        border-radius: 0;
        margin-left: 0;
        margin-right: 0;
        padding: 0;
        width: 19%;
        white-space: nowrap;
        display: inline-block;
    }
    /* Style for navigation links specifies display, padding and font-size */
    nav li a {
        display: inline-block;
        padding: 0.7em;
        font-size: 1.25em;
    }
    /* Style rules for pseudo-classes */
    nav li a:link {
        color: #FFFFFF;
    }
    nav li a:hover {
        color: #CCFFCC;
        font-size: 1.5em;
    }
    /* Style specifies border, shadow and top margin for main element */
    main {
        border: none;
        border-radius: 1em;
        box-shadow: 1em 1em 1em #331400;
        margin-top: 1em;
    }
    body {
        /* Style specifies a gradient for the body element */
        background: -webkit-linear-gradient(#FFFFFF, #3366CC);
        /* Webkit (chrome, Safari) gradient  */
        background: -moz-linear-gradient(#FFFFFF, #3366CC);
        /* FireFox gradient  */
        background: -ms-linear-gradient(#FFFFFF, #3366CC);
        /* Internet Explorer gradient  */
        background: -o-linear-gradient(#FFFFFF, #3366CC);
        /* Opera gradient  */
        background: linear-gradient(#FFFFFF, #3366CC);
        /* main gradient  */
    }
}