* {
            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;
         }
        
         #homehero {
             background-image: url("homehero.jpg");
             height: 300px;
             background-size: cover;
             background-repeat:no-repeat;
             background-position: center;
         }
         #studenthero {
             background-image: url("studenthero.jpg");
             height: 300px;
             background-size: cover;
             background-repeat:no-repeat;
             background-position: center;
             
         }   
         
         #facultyhero {
             background-image: url("facultyhero.jpg");
             height: 300px;
             background-size: cover;
             background-repeat:no-repeat;
             background-position: center;
         }
         
         #wrapper {
             display:grid;
             grid-auto-rows: minmax(0px, auto);
             grid-template-columns: minmax(0px, 1fr) repeat(6,minmax(0,175px)) minmax(0,1fr);  
         }

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

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

         .clear {
             clear: both;
         }

       

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

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

        h1 {
            line-height:240%; 
            background-image: url("dsu.jpg"); 
            background-position: right;
            background-repeat: no-repeat;
            padding-left: 1em;
            height: 72px;
            margin-bottom: 0;
            
         }

        

         nav {
             font-weight:bold;
             position: sticky;
             top: 0;
             background-color: #424242;
             grid-row: 2 /3;
             grid-column: 2 / -2;

            
         }
        

         #homehero, #studenthero, #facultyhero {
             grid-row: 3 / 4;
             grid-column: 1 / -1;

         }
         
         nav a {
             text-decoration: none;
             color: #ffffff;
             padding: 1rem 0rem;
             display: block;
             text-align: center;

         }

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

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

        }

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

         h3 {
            color:#ba1c21  ;
         }

         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 /-2;

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

         .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;
             margin-right:auto;
             padding: 1em;
             background-color: #ffffff ;
             grid-row: 5 / 6;
             grid-column: 2 /-2;
             
         }







         @media only screen and (max-width: 1100px) {
             #wrapper {
                 grid-template-columns: minmax(0px, 1fr) repeat(6,minmax(0,150px)) minmax(0,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 {
                grid-row: 2 / 3;
                grid-column: 5 / 8;
                height: auto;
            }

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

        @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 {
                display: none;
            }
        }