@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); */
    
  }

br{
    border: solid 1px rgb(255,248,206);
}

#header{
    font-family: 'Ibarra Real Nova', serif;
    font-size: clamp(3rem, 4vw, 7rem);
    color: rgb(255,248,206);
    text-align: center;
    /* background-color:#04152c ;
    border: #182250 1px solid; */
    border-radius: 0px 0px 15px 15px;
    height: 18vh;
    transition: opacity 800ms ease;
    margin-top: 1%;
    
  }
#nav{
  text-decoration: none;
  font-size: 2.5vh;
  margin-top: -3%;  
}

#nav a{
  padding: 1%;
  text-decoration: none;
  
}
hr{
  width: 75%;
}

#hr1{
  margin-top: 0%;
}


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

.menu-background-image {
  background-image: url("../imgs/000s3.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;
}

main{
  padding-top: 4%;
  text-align: center;
  font-size: 4vh;
}

@media only screen and (max-device-width: 480px) {
  .menu-background-image {
    background-position: 97%;
    background-size: 302%;
  }

  #hr1{
    margin-top: -3%;
  }

 
  #nav {
    margin-top: -12%;
    font-size: 2.5vh;
  }

  main{
    text-align: center;
    font-size: 3.5vh;
    padding: 3%;
  }
}

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

  #nav a{
    font-size: 2.5vh;
  }

  #hr1{
    margin-top:-0.8%;
  }

  main{
  
  font-size: 3.5vh;
  margin-left: 3%;
  }
}