project1.css

@charset "utf-8";
/*
    Ethan Crites

    DOM Style Sheet

    Filename: dom.css

*/

/* HTML and Body styles */

html {
    background: rgb(51, 51, 51);
    font-family: Verdana, Geneva, sans-serif;
    height: 100%;
}

body {
    background-color: white;
    box-shadow: black 20px 0px 40px, black -20px 0px 40px;
    border-left: 3px solid black;
    border-right: 3px solid black;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    margin: 0px auto;
    min-width: 320px;
    max-width: 1020px;
    width: 100%;
}

div#container {
    outline-style: solid;
    outline-width: medium;
    width: 80%;
    margin: auto;
}



/* Header styles */

header {
    width: 100%;
}


/* Navigation Styles */

nav {
    width: 100%;
}

    nav ul {
        background: linear-gradient(to bottom, black, rgb(44, 70, 44));
        -moz-column-width: 200px;
        -webkit-column-width: 200px;
        column-width: 200px;
        -moz-column-gap: 25px;
        -webkit-column-gap: 25px;
        column-gap: 25px;
        padding: 25px;
    }

        nav ul li.newgroup {
            margin-top: 15px;
        }

        nav ul li a {
            color: white;
            text-decoration: none;
            font-size: 0.9em;
        }

    nav a:hover {
        color: rgb(191, 231, 191);
        text-decoration: underline;
    }



/* Footer styles */

footer {
    color: white;
    background: rgb(44, 70, 44);
    height: 70px;
    padding-top: 20px;
    text-align: center;
    font-size: 0.9em;
    width: 100%;
}


/* ===============================
   Mobile Styles: 0px to 640px
   ===============================
*/
@media only screen and (max-width: 640px) {

    section h1 {
        font-size: 1.5em;
    }

    section p {
        font-size: 0.9em;
    }

    nav {
        -webkit-order: 99;
        order: 99;
    }

    footer {
        -webkit-order: 100;
        order: 100;
    }
}

/* =============================================
   Tablet and Desktop Styles: greater than 640px
   =============================================
*/
@media only screen and (min-width: 641px) {
}