* {
    box-sizing:border-box;
}
#wrapper {
    display:grid;
    grid-auto-rows: minmax(0px, auto);
    grid-template-columns: repeat(1, minmax(0px, 1fr)) repeat(6, minmax(0px, 175px)) repeat(1, minmax(0px, 1fr))
}
#redbar {
    background-color: #ba1c21;
    grid-row: 1 / 2;
    grid-column: 1 / 9;
}
#greybar {
    background-color: #424242;
    grid-row: 2 / 3;
    grid-column: 1 / 9;
}
header {
    background-color:#ba1c21; color:#ffffff; font-family: georgia;
    grid-area: 1 / 2 / 2 / 8;
}
    h1 {
        line-height:240%;
        background-image:url("images/dsu.jpg"); background-position:right; background-repeat:no-repeat; padding-left:1em; height:72px;
        margin:0;
        padding-left:0.5rem;
}
        header a {
        text-decoration:none;
        color:#ffffff;
        }
    h2 {
        color:#424242; font-family:georgia;
}
    h3 {
        color:#ba1c21;
}
nav {
    padding-top:0px; padding-right:5px; padding-bottom:0px; padding-left:20px;
    background-color: #424242;
    grid-area: 2 / 2 / 3 / 8;
}
    nav a {
        font-weight:bold; 
        text-decoration:none;
        color:#ffffff;
        padding: 1rem 0rem;
        display:block;
        text-align: center;
        transition:ease-out 0.5s;
}
    nav a:hover {
        background-color:#ba1c21;
        color:#ffffff;
        padding: 1rem 0rem;
        display:block;
}
    nav ul {
        list-style-type:none;
        margin:0;
        padding:0px;
        color:#ffffff;
        display:block;
        position:sticky; 
        top:0;
        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-row: 4 / 5;
    grid-column: 2 / 8;
}
    section {
        float:left; 
        width:33%; 
        padding-right:1rem;
}
    .clear {
        clear:both;
}
    body {
        background-image: linear-gradient(#eeeeee, #ffffff); background-attachment: fixed;
        color:#666666; 
        font-family:verdana;
        margin:0px;
}
    dt {
        color:#ba1c21; font-weight:bold;
}
    .dsu {
        color:#ba1c21; font-size:1.2em;
}
footer {
    font-size:.70em; font-style:italic; text-align:center; 
    padding:1em;
    background-color:#ffffff;
    grid-row: 5 / 6;
    grid-column: 2 / 8;
}
#homehero {
    background-image:url("images/homehero.jpg");
    height:360px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}
#studenthero {
    background-image:url("images/studenthero.jpg");
    height:360px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}
#facultyhero {
    background-image:url("images/facultyhero.jpg");
    height:360px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}
#alumnihero {
    background-image:url("images/alumnihero.jpg");
    height:360px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}
#shophero {
    background-image:url("images/shophero.jpg");
    height:360px;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 3 / 4;
    grid-column: 1 / 9;
}
video {
    float:right;
    margin-left:2em;
    width:480px; height:270px;
}
table {
    margin: 0 auto;
    border: solid #424242 1px;
    width:100%;
    border-collapse:collapse;
}
    table, td, th {
        padding:5px;
        border:solid #424242 1px;
    }
    table, td {
        text-align:center;
    }
    table, th {
        background-color:#ffffff;
    }
    .text {
        text-align:left;
    }
    tr:nth-of-type(2n+2) {
        background-color: #f3f3f3;
    }
#form {
    display: grid;
    grid-template-rows:auto;
    grid-template-columns: 200px 1fr;
    gap:0.75rem;
    width:100%;
}
    input, textarea {
        font-size:1rem;
        padding:10px;
        color:#666666;
        background-color:#fafafa;
        border:none;
    }
    input, textarea :focus {
        outline: none;
        background-color: #f0f0f0;
    }
    label {
        padding: 10px;
        text-align: right;
    }
    #mySubmit {
        width:10rem;
        grid-column: 2 / 3;
    }






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


@media only screen and (max-width:900px) {
    nav {
        padding-top:20px; padding-right:5px; padding-bottom:0px; padding-left:20px;
        background-color: #424242;
        grid-row: 2 / 3;
        grid-column: 1 / 5;
    }
        nav ul {
            list-style-type:none;
            margin:0;
            padding:0;
            color:#ffffff;
            display:block;
            position:sticky; 
            top:0;
            display:flex;
            flex-flow:column nowrap;
        }
    #homehero {
        background-image:url("images/homehero.jpg");
        height:auto;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 2 / 3;
        grid-column: 5 / 8;
    }
    #studenthero {
    background-image:url("images/studenthero.jpg");
    height:auto;
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    grid-row: 2 / 3;
    grid-column: 5 / 8;
    }
    #facultyhero {
        background-image:url("images/facultyhero.jpg");
        height:auto;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 2 / 3;
        grid-column: 5 / 8;
    }
    #alumnihero {
        background-image:url("images/alumnihero.jpg");
        height:auto;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 2 / 3;
        grid-column: 5 / 8;
    }
    #shophero {
        background-image:url("images/shophero.jpg");
        height:auto;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 2 / 3;
        grid-column: 5 / 8;
    }
    video {
        float:none;
        margin:0;
        width:100%; height:auto;
    }
    section {
        float:none; 
        width:100%; 
        padding-right:0px;
    }
}


@media only screen and (max-width:600px) {
    h1 {
        line-height:240%;
        background-image:none; background-position:right; background-repeat:no-repeat; padding-left:1em; height:72px;
        margin:0;
        padding-left:0.5rem;
        text-align:center;
    }
    nav {
        padding-top:20px; padding-right:5px; padding-bottom:0px; padding-left:20px;
        background-color: #424242;
        grid-row: 2 / 3;
        grid-column: 1 / 9;
    }
    #homehero {
        background-image:url("images/homehero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 3 / 4;
        grid-column: 1 / 9;
        display:none;
    }
    #studenthero {
        background-image:url("images/studenthero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 3 / 4;
        grid-column: 1 / 9;
        display:none;
    }
    #facultyhero {
        background-image:url("images/facultyhero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 3 / 4;
        grid-column: 1 / 9;
        display:none;
    }
    #alumnihero {
        background-image:url("images/alumnihero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 3 / 4;
        grid-column: 1 / 9;
        display:none;
    }
    #shophero {
        background-image:url("images/shophero.jpg");
        height:300px;
        background-size:cover;
        background-repeat:no-repeat;
        background-position:center;
        grid-row: 3 / 4;
        grid-column: 1 / 9;
        display:none;
    }
}