* {
    box-sizing: border-box;
}

body {
        background-color:#FFFFFF;
        background-image: linear-gradient(#EEEEEE, #FFFFFF);
        color:#666666;
        font-family:Verdana, Arial, sans-serif;         
        background-attachment: fixed;
        margin: 0px;
}

#wrapper {
            display: grid;
            grid-auto-rows: minmax(0px, auto);
            grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr); 
}

#redbar {
            background-color: #BA1C21;
            grid-column: 1 / -1;
            grid-row: 1 / 2;
}

#greybar {
            background-color: #424242;
            grid-column: 1 / -1;
            grid-row: 2 / 3;
}

header {
            background-color: #BA1C21;
            color:#FFFFFF;
            font-family: Georgia, sans-serif;
            grid-column: 2 / -2;
            grid-row: 1 / 2;
}

header h1 {
                background-image: url("images/dsu.jpg");
                background-position: right;
                background-repeat: no-repeat;
                padding-left: 0.5em;
                height: 72px;
                line-height: 240%;
                margin: 0;
}

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

nav {
        font-weight: bold;
        position: sticky;
        top: 0;
        background-color: #424242;
        grid-column: 2 / -2;
        grid-row: 2 / 3;
}

nav a {
        color: #FFFFFF;
        padding: 1rem 0rem;
        display: block;
        text-decoration: none;
        text-align: center;
}

nav a:hover {
                background-color: #BA1C21;
}

nav ul {
            list-style-type: none;
            margin:0px;
            padding: 0px;
            display: flex;
            flex-flow: row nowrap;
}

nav ul li {
            width: 100%;
}

main {
        padding-left: 2em;
        padding-right: 2em;
        display: block;
        background-color: #FFFFFF;
        padding-top: 1px;
        padding-bottom: 1px;
        grid-column: 2 / -2;
        grid-row: 4 / 5;
}

#homehero {
                background-image: url("images/homehero.jpg");
                height: 300px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                grid-column: 1 / -1;
                grid-row: 3 / 4;
}

#studenthero {
                background-image: url("images/studenthero.jpg");
                height: 300px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                grid-column: 1 / -1;
                grid-row: 3 / 4;
}

#facultyhero {
                background-image: url("images/facultyhero.jpg");
                height: 300px;
                background-size: cover;
                background-repeat: no-repeat;
                background-position: center;
                grid-column: 1 / -1;
                grid-row: 3 / 4;
}

h2 {
        color: #424242;
        font-family: Georgia, sans-serif;
}

h3 {    
        color: #BA1C21;
}

.section {
            float:left;
            width: 33%;
            padding-right: 1rem;
}

.clear {
        clear: both;
}

.dsu {
        color:#BA1C21;
        font-size: 1.2em;
}

footer {
            background-color: #FFFFFF;
            padding: 1em;
            font-size: 0.70em;
            font-style: italic;
            text-align: center;
            grid-column: 2 / -2;
            grid-row: 5 / 6;
}

@media only screen and (max-width: 1100px) {
    
    #wrapper {
        grid-template-columns:  minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);
    }
}

@media only screen and (max-width: 900px) {
    
    nav {
        grid-row: 2 / 3;
        grid-column: 1 /5;
    }
    
    nav ul {
        flex-flow: column nowrap;
    }
    
    #homehero, #studenthero, #facultyhero {
        grid-row: 2 / 3;
        grid-column: 5 / 8;
        height: auto;
    }
    
    .section {
        float: none;
        width: 100%;
        padding-right: 0px;
    }
}
    
@media only screen and (max-width: 600px) {
    
    header h1 {
        background-image: none;
        text-align: center;
    }
    
    nav {
        grid-row: 2 / 3;
        grid-column: 1 / -1;
    }
    
    #homehero, #studenthero, #facultyhero {
        display: none;
    }
}