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

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

* {
  font-family: claster;
  color: rgb(255, 248, 206);
}

body {

  background-color: rgb(20, 20, 20);
  margin: 0px;
}

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

#header-sub {
  font-family: 'Ibarra Real Nova', serif;
  font-size: clamp(3rem, .9vw, 7rem);
  margin: 1%;
}



#menu {
  align-items: center;
  display: flex;
  height: 70vh;
  width: 70vw;
  padding-top: 4%;
}


#menu-items {
  margin-left: clamp(4rem, 15vw, 48rem);
  position: relative;
  z-index: 2;

}



#menu[data-active-index="0"]>#menu-background-image {
  background-position: center 45%;
}

#menu[data-active-index="1"]>#menu-background-image {
  background-position: center 50%;
}

#menu[data-active-index="2"]>#menu-background-image {
  background-position: center 55%;
}

#menu[data-active-index="3"]>#menu-background-image {
  background-position: center 60%;
}

#menu[data-active-index="4"]>#menu-background-image {
  background-position: center 65%;
}


#menu-background-image {
  background-image: url("../imgs/286169498.jpg");
  background-position: center 40%;
  background-size: 110vmax;
  height: 100%;
  left: 0px;
  opacity: 0.15;
  position: absolute;
  top: 0px;
  transition: opacity 800ms ease,
    background-size 800ms ease,
    background-position 800ms ease;
  width: 100%;
  z-index: 0;
}



#menu-items:hover~#menu-background-pattern {
  background-size: 11vmin 11vmin;
  opacity: 0.5;
}

#menu-items:hover~#menu-background-image {
  background-size: 100vmax;
  opacity: 0.1;
}


#menu-items:hover>.menu-item {
  opacity: 0.3;
}

#menu-items:hover>.menu-item:hover {
  opacity: 1;
}

.menu-item {
  color: rgb(255, 248, 206);
  cursor: pointer;
  display: block;
  font-family: claster;
  font-size: clamp(3rem, 4vw, 8rem);
  padding: clamp(0.25rem, 0.5vw, 1rem) 0rem;
  text-decoration: none;
  transition: opacity 400ms ease;
}



@media only screen and (max-device-width: 480px) {
  #header {
    margin-top: 5%
  }

  #header-sub {
    font-size: 1.3rem;
  }

  #menu {
    height: 60vh;
    margin-left: 10%;
  }

  #menu-items a {
    padding-top: 10%;
  }
}


@media only screen and (min-device-width: 700px) and (max-device-width: 1200px) {
  #header-sub{
    font-size: x-large;
  }


  #menu{
    padding-top: 1%;
    
  }

  #menu-items > a{
    font-size: 1.9rem;
  }

}