Body { background-image: linear-gradient(top to bottom,#ffffff, #EEEEEE); background-attachment: fixed;color:#666666; font-family: verdana; 
    margin:0px}
    
    header {background-color: #003058 ; color:#ffffff; grid-column: 2/ 8; grid-row: 1 / 2 ;}
    header a {text-decoration: none; Color: #ffffff}
    
    h1 {line-height:140% ; padding: .5rem; background-image: url("utahtechlogo.svg"); background-position: right; background-repeat: no-repeat; 
    padding-left: 1em; background-origin: content-box; margin: 0; font-family: georgia;} 
    
    nav {font-weight: bold; background-color: #424242; 
        grid-column:2 /8; grid-row: 2/ 3; Position: sticky; top: 0;}
        
        nav ul {
            margin: 0px; 
            padding: 0px;
            display: flex; 
            flex-flow: row nowrap; 
            list-style-type: none;} 
        
         nav ul li { width: 100%;}
        
        nav a{ color:#FFFFFF; 
          padding: 1rem 2rem; 
          display:block; text-align: center; text-decoration: none; }
        
        nav a:hover {color: #BA1C21;}
        
    h2 {color:#424242; font-weight: bold;  }
    
    dt {color: #003058; font-weight: bold;}
    
    .ut{color: #BA1C21; font-weight: bold; padding-left: 1rem; } 
    
    footer {font-size:.70rem; font-style: italic; text-align: center ; padding: 1rem; grid-column:2 /8; grid-row: 5 /6 ;}
    
    #wrapper { display: grid; grid-auto-rows: minmax(0px, auto);
      grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);}
      
    #bluebar { background-color: #003058; 
                grid-row: 1 /2; grid-column: 1 /-1;}

            #greybar {background-color: #424242; grid-row: 2/3; 
                grid-column: 1 /-1 ; }
    
    h3 {color: #003058;}
    
            #homehero { Background-image: url("homehero.jpg"); height: 300px; background-size: cover ; background-position: center; background-repeat: no-repeat;
                grid-column:1 /-1; grid-row: 3 /4 ;}
    
            #studenthero {Background-image: url("studenthero.jpg"); height: 300px; background-size: cover ; background-position: center; background-repeat: no-repeat;
                grid-column:1 /-1; grid-row: 3 /4 ;}
    
            #facultyhero{Background-image: url("facultyhero.jpg"); height: 300px; background-size:cover ;background-repeat: no-repeat; background-position: center;  
                grid-column:1 /-1; grid-row: 3 /4 ;}

            #alumnihero {Background-image: url("alumnihero.jpg"); height: 300px; background-size:cover ;background-repeat: no-repeat; background-position: center;  
              grid-column:1 /-1; grid-row: 3 /4 ;}
    
    
    main{ padding-left: 1rem; padding-bottom: 2rem; padding-top: 2rem; grid-column:2 /8; grid-row: 4 /5 ; background-color: #ffffff;}
    * {box-sizing: border-box;}
     
    main img { float:right; padding-left: 2rem;}
            nav ul {
                margin: 0px; 
                padding: 0px;
                display: flex;
                flex-flow: row nowrap; 
                list-style-type: none;} 
    
     nav ul li { width: 100%;}
    
        Nav a{ color:#FFFFFF; padding: 1rem 0rem; display:block; text-align: center; }
            
          nav a:hover {background-color: #BA1C21;} 

      table {margin: 0 auto; 
             border: 1px solid #424242 ;
             width: 100%}
      td , th {padding: 5px; border: 1px solid #424242;}
      .text { text-align: left;}
      
      tr:nth-of-type(2n) { background-color: #f3f3f3;}
    
    @media only screen and (max-width: 1100px)
        {#wrapper {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;
      position: static;
    }
  
    nav ul {
      flex-flow: column nowrap;
    }
  
    #homehero {
        grid-column: 5/8; 
        grid-row: 2/3; 
        height: auto;
      }
    #studenthero {
        grid-column: 5/8; 
        grid-row: 2/3; 
        height: auto;
      }
    #facultyhero {
        grid-column: 5/8; 
        grid-row: 2 /3; 
        height: auto;
      }
      #alumnihero {
        grid-column: 5 /8; 
        grid-row: 2 /3; 
        height: auto;}

        main img {
          float: none;
          width: 100%;
          height: auto;
          padding-left: 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 {display: none;}
        #studenthero { display:none;}
         #facultyhero{ display: none;}
         #alumnihero {display: none;}
         }


      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:focus, 
      textarea:focus {outline: none;
         background-color: #f0f0f0;}

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

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