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;} 
  
  @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; }