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

header{
  background-color: #BA1C21;
  color: #FFFFFF;
  font-family: Georgia,serif;
  grid-area:  1 / 2 / 2 / 8;
}
header a{
  color: #FFFFFF;
  text-decoration: none;
}
/*decendent selector*/
header h1{
  margin: 0;
  line-height: 240%;
  background-image: url("dsu.jpg");
  background-repeat: no-repeat;
  background-position: right;
  padding-left: 0.5rem;
  height: 72px;
}

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

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

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

.dsu{
  font-size: 1.2em;
  color: #BA1C21;
}

footer{
  grid-area: 5 / 2 / 6 / 8;
  background-color: #FFFFFF;
  font-size: .70em;
  font-style: italic;
  text-align: center;
  padding: 1em;
}
#wrapper{
  display: grid;
  grid-auto-rows: minmax(0px,auto);
  grid-template-columns: minmax(0px, 1fr) repeat(6, minmax(0, 175px)) minmax(0px, 1fr);
}
h3{
  color: #BA1C21;
  font-weight: bold;

}
main{
  background-color: #FFFFFF;
  grid-area: 4 / 2 / 5 / 8;
  padding-top: 1px;
  padding-bottom: 1px;
  padding-left: 2em;
  padding-right: 2em;
  display: block;
}

#homehero{
  grid-area: 3 / 1 / 4 / 9;
  height: 300px;
  background-image: url("homehero.jpg");
  background-size: cover;
  background-position: center;
}
#studenthero{
  grid-area: 3 / 1 / 4 / 9;
  height: 300px;
  background-image: url("studenthero.jpg");
  background-size: cover;
  background-position: center;
}
#facultyhero{
  grid-area: 3 / 1 / 4 / 9;
  height: 300px;
  background-image: url("facultyhero.jpg");
  background-size: cover;
  background-position: center;
}
nav a{
  color: #FFFFFF;
  padding: 1rem 1rem;
  display: block;
  text-decoration: none;
  text-align: center;
}
nav ul{
  color: #FFFFFF;
  padding: 0px 0px 0px 0px;
  margin: 0px 0px 0px 0px;
  display: flex;
  flex-flow: row nowrap;
  list-style-type: none;
}
nav ul li{
  width: 100%;
}
nav a:hover{
  text-align: center;
  background-color: #BA1C21;
}
*{
  box-sizing: border-box;
}
header, nav, main, footer{
  display: block;
}
section{
  float: left;
  padding-right: 1em;
  width: 33%;
}
.clear{
  clear: both;
}
/*<grid-line> [ / <grid-line> ]{0,3}where <grid-line> = auto | <custom-ident> |
 [ <integer> && <custom-ident>? ] | [ span && [ <integer> || <custom-ident> ] ]*/
#redbar{
  background-color: #BA1C21;
  grid-area:  1 / 1 / 2 / 9;
}
#greybar{
  background-color: #424242;
  grid-area: 2 / 1 / 3 / 9;
}
@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-area: 2 / 1 / 3 / 5;
  }
  nav ul{
    flex-flow: column nowrap;
  }
  #homehero{
    grid-area: 2 / 5 / 3 / 8;
    height: auto;
  }
  #studenthero{
    grid-area: 2 / 5 / 3 / 8;
    height: auto;
  }
  #facultyhero{
    grid-area: 2 / 5 / 3 / 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-area: 2 / 1 / 3 / 9;
  }
  #homehero{
    display: none;
  }
  #studenthero{
    display: none;
  }
  #facultyhero{
    display: none;
  }
}