* { box-sizing: border-box; } 
header, nav, main, footer { display: block; } 

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

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

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

td {
    text-align: center;
}

.text {
    text-align: left;
}

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

body { 
    background-color: #EEEEEE;      
    color: #666666; 	  
    font-family: Verdana, Arial, sans-serif; 	  
    background-image: linear-gradient(to bottom, #eeeeee, #FFFFFF);       
    background-attachment: fixed;       
    margin: 0px; 
} 

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

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

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

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

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

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

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

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

nav { 
    font-weight: bold;       
    position:sticky;       
    top:0;       
    background-color: #424242;       
    grid-row: 2/3;       
    grid-column: 2/8;
 } 
 
nav ul { 
     list-style-type: none;     
     display: flex;     
     flex-flow: row, nowrap;       
     margin: 0px;       
     padding:0px 
    }  
    
nav ul li {     
    width: 100%; 
}  

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

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

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

h3 { 
    color: #BA1C21; 
}  

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; 
  }  
  
  main { 
      padding-left: 2em;       
      padding-right: 2em;       
      padding-top:1px;       
      padding-bottom:1px; 	  
      background-color: #FFFFFF;       
      grid-row: 4/5;       
      grid-column: 2/8; 	  
      display: block; 
    } 
    
    section {     
        float:left;     
        width:33%;     
        padding-right:1rem; 
    }  
    
    .clear {     
        clear:both; 
    }  
    
    #homehero { 
        height: 300px;            
        background-image: url(homehero.jpg); 		   
        background-size: cover; 		   
        background-repeat: no-repeat;            
        background-position: center;            
        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;            
        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;           
        grid-row: 3/4;            
        grid-column: 1/9;  
        }  

    #alumnihero { 
        height: 300px;            
        background-image: url(alumnihero.jpeg); 		   
        background-size: cover; 		   
        background-repeat: no-repeat;            
        background-position: center;            
        grid-row: 3/4;            
        grid-column: 1/9;  
        }     
        
    #wrapper {             
            display: grid;            
            grid-auto-rows: minmax(0px, auto);           
            grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) 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; 
        }  
        
    @media (max-width: 1100px) {     
        #wrapper {         
                grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 150px)) minmax(0px, 1fr);     
            } 
        }  
        
    @media (max-width: 900px) {    
        nav {         
                grid-row: 2/3;        
                grid-column: 1/5;     
            }          
            
            nav ul {         
                flex-flow: column nowrap;     
            }      
            
            #homehero, #studenthero, #facultyhero, #alumnihero {         
                grid-row: 2/3;         
                grid-column: 5/8;         
                height: auto;     
            }      
            
            section {         
                float: none;         
                width: 100%;         
                padding-right: 0px;    
             } 

             video {
                float: none;
                margin: 0;
                width: 100%;
                height: auto;
            }
            }  
            
            @media (max-width: 600px) {     
                header h1 {         
                    background-image: none;         
                    text-align: center;     
                }     
                
                nav {         
                    grid-row: 2/3;         
                    grid-column: 1/9;     
                }    
                 
                #homehero, #studenthero, #facultyhero, #alumnihero {         
                    display: none;     
                } 

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