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

body    {background-color: #ffffff;
                color: #666666;
                font-family: Verdana;
                background-image: linear-gradient(to bottom, #eee, #fff);
                background-attachment: fixed;
                margin: 0px;}

header  {background-color: #ba1c21;
                color:#ffffff;
                font-family: georgia;
                grid-row-start: 1; grid-row-end: 2; grid-column-start: 2; grid-column-end: 8;}

header h1 {line-height: 240%; padding-left: 0.5rem; margin: 0;}

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

h1       {background-image: url(images/dsu.jpg);
                background-position: right; background-repeat: no-repeat;
                height: 72px;
                margin-bottom: 0;}

nav     {background-color: #424242; position: sticky; top:0; padding:0;
                grid-row-start: 2; grid-row-end: 3; grid-column-start: 2; grid-column-end: 8;}

nav a   {text-decoration: none; font-weight: bold; color: #ffffff;
                padding: 1rem 0rem; display:block; text-align: center; transition: background-color 2s;}

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

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

h2      {color: #424242;
                font-family: georgia;}

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

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

footer  {font-size: 0.7em;
            font-style: italic; text-align: center;
                padding: 1em; background-color: #fff; 
                grid-row-start: 5; grid-row-end: 6; grid-column-start: 2; grid-column-end: 8;}

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

h3      {color: #BA1C21;}

main    {display: block; padding-left: 2em; padding-right: 2em; background-color: white;
        grid-row-start: 4; grid-row-end: 5; grid-column-start: 2; grid-column-end: 8; 
        padding-top: 1px; padding-bottom: 1px;}

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

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

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

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


#redbar {background-color: #BA1C21; grid-row-start: 1; grid-row-end: 2; 
            grid-column-start: 1; grid-column-end: 9; height:auto;}

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

*      {box-sizing: border-box;}

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

.clear {clear: both;}





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

td {padding: 5px; border-color: #424242; text-align: center; border: 1px solid;}
th {padding: 5px; border-color: #424242; border: 1px solid;}

tr:nth-of-type(even) {background-color: #f3f3f3;}

.text  {text-align: left;}

form {display: grid; grid-template-rows: auto; grid-template-columns: 200px 1fr; gap:0.75rem; size: 1rem;
        padding: 10px;}

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

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

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

#mySubmit {width: 10rem; grid-column-start: 2; grid-column-end: 3;}


#dsumovie {width: 480px; height: 270px;}



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

@media screen and (max-width: 900px) {
    nav {grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 5;}
    nav ul {flex-flow: column nowrap;}
    
    #homehero {height: auto; 
        grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8;}

    #studenthero {height: auto; 
        grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8;}

    #facultyhero {height: auto; 
        grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8;}

    #alumnihero {height: auto; 
        grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8;}

    #shophero {height: auto; 
        grid-row-start: 2; grid-row-end: 3; grid-column-start: 5; grid-column-end: 8;}
    
    #dsumovie {float:none; margin:0; width: 100%; height: auto;}
    }

@media screen and (max-width: 600px) {
    header h1 {background-image: none;text-align: center;}
    nav {grid-row-start: 2; grid-row-end: 3; grid-column-start: 1; grid-column-end: 9;}
    #homehero {display: none;}
    #facultyhero {display: none;}
    #studenthero {display: none;}
    #alumnihero {display: none;}
    #shophero   {display: none;}
}