* { 
    box-sizing: border-box; 
}
    body {
        background:linear-gradient(#eeeeee, #ffffff);
        color:#666666;
        font-family: 'Verdana', sans-serif;
        background-attachment: fixed;
        margin: 0px; 
    }
    header {
        background-color: #BA1C21;
        color:#FFFFFF;
        font-family: 'Georgia', sans-serif;
        grid-column: 2/ 8;
        grid-row: 1/2;
    }
    header a {
        color:#FFFFFF;
        text-decoration: none;
    }
    h1 {
     line-height: 240%;
     background-image:
     url("images/dsu.jpg");
     background-position: right;
     background-repeat: no-repeat;
     height: 72px;
     margin: 0;
     padding-left: 0.5em;
     
    } 
    nav a {
        color: #FFFFFF;
        padding: 1rem 0rem;
        display: block;
        text-align: center;
    }
    nav a:hover {
        background-color: #BA1C21;
    }
    nav ul {
        list-style-type: none;
        margin-bottom: 0px;
        margin-top: 0px;
        margin-right: 0px;
        margin-left: 0px;
        padding-bottom: 0px;
        padding-top: 0px;
        padding-right: 0px;
        padding-left: 0px;
        display:flex;
        flex-flow: row nowrap;
    }
    nav ul li {
        width: 100%;
    }
    nav {
        position: sticky;
        top:0px;
        font-weight: 700;
        background-color: #424242;
        grid-column: 2/ 8;
        grid-row: 2/3;
    }
    main {
        background-color: #FFFFFF;
        padding-top: 1px;
        padding-bottom: 1px;
        padding-left: 2em;
        padding-right: 2em;
        display: block;
        grid-column: 2/ 8;
        grid-row: 4/5;
    }
    h2 { 
        color: #424242;
        font-family: 'Georgia', sans-serif;
    }
    h3 {
        color: #BA1C21
    }
    dt {
        color: #ba1c21;
        font-weight:700;
    }
    .dsu {
        color: #BA1C21;
        font-size: 1.2em;
    }
    section{
        float: left;
        width: 33%;
        padding-right: 1rem;
    }
    footer {
        font-size: .70em;
        font-style: italic;
        text-align: center;
        padding: 1em;
        background-color: #FFFFFF;
        grid-column: 2/ 8;
        grid-row: 5/6;
    }
    #wrapper {
        display: grid;
        grid-auto-rows: minmax(0px, auto) ;
        grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
    }
    #heroimage {
        background-image:
        url("images/homehero.jpg");
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        grid-column: 1/ 9;
        grid-row: 3/4;
    }
    #studenthero {
        background-image:url("images/studenthero.jpg");
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        grid-column: 1/ 9;
        grid-row: 3/4;
    }
    #facultyhero {
        background-image: url("images/facultyhero.jpg");
        height: 300px;
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        grid-column: 1/ 9;
        grid-row: 3/4;
    }
    nav a { text-decoration: none; } 
    #clear {clear: both;}
    #redbar{
        background-color: #BA1C21;
        grid-column: 1/ 9;
        grid-row: 1/2;
    }
    #greybar{
        background-color: #424242;
        grid-column: 1/ 9;
        grid-row: 2/3;
    }
    @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-column: 1/ 5;
            grid-row: 2/3;
        }
        nav ul{
            flex-flow: column nowrap;
        }
        #heroimage{
            grid-column: 5/ 8;
            grid-row: 2/3;
            height: auto;
        }
        #studenthero{
            grid-column: 5/ 8;
            grid-row: 2/3;
            height: auto;
        }
        #facultyhero{
            grid-column: 5/ 8;
            grid-row: 2/3;
            height: auto;
        }
        section{
            float: none;
            width: 100%;
            padding-right: 0px;
        }
    }
    @media only screen and (max-width: 600px){
        h1 {
            background-image: none;
            text-align: center;
        }
        nav{
            grid-column: 1/ 9;
            grid-row: 2/3;
        }
        #heroimage{
            display: none
        }
        #studenthero{
            display: none
        }
        #facultyhero{
            display: none
        }
    }