@font-face {
  font-family: 'Gill Sans';
  src: url('Gill Sans.otf') format('opentype');
}
 body {
  font-family: Gill Sans;
}
#dave{
  position: absolute;
  top:30px;
left: 15%px;
font-size:40px;
}
#menu{
  position: absolute;
  top:48px;
right: 10%;
font-size:30px;
}

.content {
  background-image: url("../images/background.jpeg");
   background-repeat: no-repeat;
  background-size: 100%;
    background-color: #fff;
    height: 960px;
    margin:10%;
    margin-top:90px;
}
#menu ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
li{
  float:left;
  color: #232323;
}


/* Change the link color on hover */

.footer {
    height: 50px;
  }

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 960px;
      margin-top:60px;
}
      #dave{
        position: absolute;
        top:20px;
      left: 10%;
      font-size:32px;
      }

  #menu{
visibility:hidden;
  }
  .hover {
    position:absolute;
    top:36px;
    right: 10%;
    font-size:18px;
    display: block;
    height:18px;
    overflow:hidden;
  }
  .hover:hover {
  height:190px;
  }
.hover ul {
    list-style-type: none;
    background-color: #fff;
    width: 100px;
    margin: 0;
    padding: 10;
  }
.hover li a{
    float:left;
    color: #232323;
    background-color: #fff;
    text-decoration: none;
    text-align: center;
    width: 100px;
  }

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 900px;

      margin-top:60px;

  }
  #dave{
    position: absolute;
    top:20px;
  left: 10%;
  font-size:30px;
  }
  #menu{
visibility:hidden;
  }
  .hover {
    position:absolute;
    top:36px;
    right: 10%;
    font-size:18px;
    display: block;
    height:18px;
    overflow:hidden;
  }
  .hover:hover {
  height:190px;
  }
.hover ul {
    list-style-type: none;
    background-color: #fff;
    width: 100px;
    margin: 0;
    padding: 10;
  }
.hover ul li a{
    float:left;
    color: #232323;
    background-color: #fff;
    text-align: center;
    text-decoration: none;
    width: 100px;
  }
}
@media only screen and (min-width: 790px) {
  #menu-toggle {
   display: none;
 }
 .hover {
 display: none; /* Hidden by default */
}


  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 900px;
      margin-top:60px;

  }
  #dave{
    position: absolute;
    top:25px;
  left: 10%;
  font-size:30px;
  }
  #menu{
  visibility: visible;
    display:block;
    position: absolute;
    top:29px;

  font-size:20px;
  }
  li a {
visibility:visible;
    display: block;
    color: #232323;
    padding: 6px 8px;
    text-decoration: none;
  }

}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 960px) {
  #menu-toggle {
   display: none;
 }


  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 900px;

      margin-top:60px;

  }
  #dave{
    position: absolute;
    top:23px;
  left: 10%;
  font-size:35px;
  }
  #menu{
  visibility: visible;
    display:block;
    position: absolute;
    top:28px;

  font-size:22px;
  }
  li a {
visibility:visible;
    display: block;
    color: #232323;
    padding: 6px 10px;
    text-decoration: none;
  }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 1280px) {

  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 930px;
      margin-top:76px;

  }
  #dave{
    position: absolute;
    top:31px;
  left: 10%;
  font-size:37px;
  }
  #menu{
    position: absolute;
    top:40px;
  font-size:24px;
  }
  li a {
    padding: 7px 13px;
  }
  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 900px;
      margin-top:80px;

  }
.footer {
    height: 20px;
}

}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {

  .content {
    background-image: url("../images/background.jpeg");
     background-repeat: no-repeat;
    background-size: 100%;
      background-color: #fff;
      height: 960px;
      margin-top:80px;

  }
  #dave{
    position: absolute;
    top:30px;
  left: 10%;
  font-size:40px;
  }
  #menu{
    position: absolute;
    top:38px;
  font-size:30px;
  }
  li a {
    padding: 8px 14px;
  }
}