* { box-sizing: border-box; }

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

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

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

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

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

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

dt {color: #ba1c21;
font-weight: bold;}

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

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

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

h3 {color:#BA1C21;}

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

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

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

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

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

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

nav a {text-decoration: none;
text-align: center;
padding: 1rem 0rem;
color: #ffffff;
display: block;
transition: background-color 0.5s;
transition-timing-function: ease-out;}

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

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

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

.clear {clear: both;}

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

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

nav ul li {width: 100%;}

video {float: right;
    margin-left: 2em;
    object-fit: contain;}

@media only screen and (max-width: 1100px) {
    #wrapper{
        grid-auto-rows: auto;
        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, #alumnihero,#shophero {grid-row: 2 / 3;
    grid-column: 5 / -2;
    height: auto;}

    section {float: none;
    width: 100%;
    padding-right: 0px;}

    video {
        float: none;
        margin: 0 0 0 0;
        width: 100%;
        height: auto;}
}

@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, #alumnihero, #shophero {display: none;}
}

table {margin: 0 auto;
border: 1px solid #424242;
width: 100%;
border-collapse: collapse;}

th {background-color: #ffffff;}

td, th {padding: 5px;
border: 1px solid #424242;}

td {text-align: center;}

.Text {text-align: left;}

tr:nth-child(odd) {background-color: #f3f3f3;}

form {display: grid;
grid-auto-rows: minmax(0px,auto);
grid-template-columns: auto minmax(200px, 1fr);
gap: 0.75rem;
width: 100%;}

textarea, input {font-size: 1rem;
padding: 10px;
color: #666666;
background-color: #fafafa;
border-style: none;}

input:focus, textarea:focus {outline: none;
background-color: #f0f0f0;}

label {padding: 10px;
text-align: right;}

#mySubmit {width: 10rem;
grid-column: 2 / 3;
padding: 10px;}