html {
  overflow-y:
  hidden;

  background: url("../img/welcome_page/current_cover_photos/20210523222843.jpg") no-repeat center;
  height:100%;
  background-size: cover;
}

body{
  font: 15px/1.5 Arial, Helvetica, sans-serif;
  padding:0;
  margin:0;
  background-color:#f0ead8;
}

/*Header*/
header{
  color:#ffffff;
  padding-top:0px;
  min-height:70px;
  border-bottom:#000000 2px solid;
}

header #branding{
  text-shadow: 1px 1px #000000,-1px 1px #000000,1px -1px #000000,-1px -1px #000000;
  float:left;
}

header #branding h1{
  margin:15px;
}

header nav{
  float:right;
  margin-top:10px;
}

.header-img{
  width: 100%;
  height: 70px;
  background: url('../img/grass.jpg') no-repeat;
  background-size: cover;
  background-position: center center;
}

header a{
  color:#ffffff;
  text-decoration:none;
  text-transform: uppercase; /*automatically transforms everything in header to uppercase */
  font-weight: bold;
  text-shadow: 1px 1px #000000,-1px 1px #000000,1px -1px #000000,-1px -1px #000000;
  font-size:16px;
}

header a:hover{
  color:#cccccc;
  font-weight:bold;
}

header .highlight, header .current a{
  color:#cccccc;
  font-weight:bold;
}

header li{
  float:left;
  display:inline;
  padding: 0 20px 0 20px;
}

@media(max-width: 1400px){
  header{
    min-height:140px;
  }
  .header-img{
    height:140px;
  }
  html {
    background-position: 50% 21%;
  }
}

@media(max-width: 922px){
  header{
    min-height:160px;
  }
  .header-img{
    height:160px;
  }
  html {
    background-position: 50% 15%;
  }
}

@media(max-width: 501px){
  header{
    min-height:180px;
  }
  .header-img{
    height:180px;
  }
  html {
    background-position: 50% 5%;
  }
}

@media(max-width: 478px){
  header{
    min-height:220px;
  }
  .header-img{
    height:220px;
  }
  html {
    background-position: 50% 0%;
  }
}