body {
     background-color: #ffffff; 
     color: #666666;
     font-family: arial;
     background: #EEEEEE;
     background: linear-gradient(to bottom, #EEEEEE, #FFFFFF);
     background-attachment: fixed;
     margin: 0px;}


header {
     background-color: #003058;
     color:#ffffff;
     font-family: Georgia;
     grid-column: 2 / 8;
     grid-row: 1 / 2;}

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

header h1 { 
     background-image: url("utahtechlogo.svg");
     background-repeat: no-repeat; 
     background-position:right;
     padding-left: 1em; 
     background-origin: content-box;
     margin: 0;
     line-height: 140%; 
     padding: .5rem;
     color: #FFFFFF;}


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

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

nav ul li {
     width: 100%;}

main img {float: right; 
     padding-left: 2rem;
     }

video {
     float: right;
     margin-left: 2em;
     width: 480px;
     height: 270px;

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

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

h3 {
     color: #003058;}    

main {
     background-color: #FFFFFF;
     padding-left: 2rem; 
     padding-right: 2rem;
     grid-row: 4 / 5;
     grid-column: 2 / 8;
     }

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

.ut {
     color: #ba1c21; 
     font-weight: bold;}

footer {
     font-size: .70rem; 
     font-style: italic; 
     text-align: center;
     padding: 1rem;
     grid-column: 2 / 8;
     grid-row: 5 / 6;}

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

#bluebar {
     background-color: #003058;
     grid-row: 1 / 2;
     grid-column: 1 / 9;
}

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

}

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

}

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

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

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

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



form {
     display: grid;
     grid-template-rows: auto;
     columns: 2;
     grid-template-columns: 200px 1fr;
     gap: 0.7rem;
     width: 100%;
     
}

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

}

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

td {
     text-align: center;
}

.text{
     text-align: left;
}

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

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

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

label {
     padding: 10px;
}

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

*{box-sizing: border-box;}

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


} 


@media only screen and (max-width: 900px)
{
nav{
     position: static;
     grid-row: 2 / 3;
     grid-column: 1 / 5;
}

nav ul{
    flex-flow: column nowrap;
}
#homehero{
     grid-row: 2 / 3;
     grid-column: 5 / 8;
     height: auto;
}

#shophero{
     grid-row: 2 / 3;
     grid-column: 5/8;
     height:auto
}

#studenhero{
     grid-row: 2 / 3;
     grid-column: 5 / 8;
     height: auto;
}

#facultyhero{
     grid-row: 2 / 3;
     grid-column: 5 / 8;
     height: auto;

}

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

main img{
     float: none;
     width: 100%;
     height: auto;
     padding-left: 0px;
}

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

}

@media only screen and (max-width: 600px)
{
header h1 {
     background-image: none;
     text-align: center;
}

nav{
     grid-row: 2 / 3;
     grid-column: 1 / 9;
}

#homehero {
     display: none;
}

#shophero{
     display: none;
}

#studenthero {
     display: none;     
}

#facultyhero {
     display: none;
}

#alumnihero{
     display:none;
}

}