@font-face {
    font-family:claster;
    src: url(../fonts/Claster\ Oleander.ttf);
  }

@font-face {
    font-family:second;
    src: url(../fonts/EBGaramond-Regular.ttf);
}  

*{
    font-family: second;
    color: rgb(255,248,206);
    /* outline: 1px solid rgb(179, 216, 202); */
    
}



hr{
  width: 75%;
  margin-top: 1%;
}

#header{
    font-family: 'Ibarra Real Nova', serif;
    font-size: clamp(3rem, 4vw, 7rem);
    color: rgb(255,248,206);
    text-align: center;
    padding-top: 1%;
    border-radius: 0px 0px 15px 15px;
    height: 10vh;
    transition: opacity 800ms ease;
    
  }

#nav{
  margin-top: -0.5%;
  
}  

#nav a{
    text-decoration: none;
    font-size: 2.5vh;
    padding: 1%;
  }

body {
    /* font-family: header ; */
    background-color: rgb(20, 20, 20);
    margin: 0px;
}

#firstparadiv{
    padding: 2%;
    font-family:second;
    
}

#firstpara{
    padding: 1%;
    font-size: 2vw;
}

img{
  width: 300px;
  float: left;
  padding: 10px;
  margin-top: 2.9%;
  border-radius: 5px;
}

.menu-background-image {
  background-image: url("../imgs/000c2.jpg");
  background-position: center 40%, center 60%;
  background-size: 100%;
  height: 100%;
  left: 0px;
  opacity: 0.15;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: -1;
}

@media only screen and (max-device-width: 480px) {

  #firstparadiv{
    padding-top: 0%;
  }

  #firstpara{
    font-size: 18.0px;
    /* padding: 7.7%;
      padding-top: 7.1%; */
    text-align: center;
    margin-left: -2%;
    margin-right: -2%;
    padding-top: 2.0%;
  
  }
  

  img{
    float: none;
    width: 263px;
    padding: 60.1px;
    margin-top: -7%;
  }

  .menu-background-image {
    background-position: 97%;
    background-size: 302%;
  }

}

@media only screen and (min-device-width: 700px) and (max-device-width: 1200px) {
  #nav {
    margin-top: 1.5%;
    
    
  }

  #nav a{
    font-size: 1.3rem;
  }

  #hr1{
    margin-top: 1.5%;
  }


}