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




@media screen and (max-width: 1100px){

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


@media screen and (max-width: 900px){
    nav { 
        font-weight: bold; background-color: #424242;
        display: grid; grid-row: 2/3; grid-column: 5/8;
        grid-auto-rows: auto; grid-auto-columns: auto;
        position: sticky; top: 0; text-decoration: none;
    }
    section{
        width: 100%; float: none; padding-right: 0px;
    }
}



@media screen and (max-width: 600px){
    header h1{
        line-height: 240%; background-image: none; background-position: right; 
        background-repeat: no-repeat; padding-left: 0.5rem; height: 72px;
        margin: 0;  text-align: center;
    }
    nav { 
        font-weight: bold; background-color: #424242;
        display: grid; grid-row: 2/3; grid-column: 1/9;
        position: sticky; top: 0; text-decoration: none;
    }
    #homehero{
        height: 300px; background-image: none; background-size: cover;
        background-repeat: no-repeat;background-position: center; 
        display: grid; grid-row: 3/4; grid-column: 1/9;
    }
    #studenthero{
        height: 300px; background-image: none; background-size: cover;
        background-repeat: no-repeat; background-position: center;
        display: grid; grid-row: 3/4; grid-column: 1/9;
    }
    #facultyhero{
        height: 300px; background-image: none; background-size: cover;
        background-repeat: no-repeat; background-position: center;
        display: grid; grid-row: 3/4; grid-column: 1/9;
    }
}
table{
    margin: 0 auto; border: 1px solid #424242; width: 100%; 
    border-collapse: collapse;
}
td{
    padding: 5px; border: #424242 1px solid; 
}
table th{
    text-align: center; 
}
table td{
    text-align: left;
}
table tr:nth-of-type(2n+1){
    background-color: #F3F3F3;
}