@font-face {
  font-family: "Fraunces";
  src: url(fonts/Fraunces.woff2);
}
* {
  margin: 0;
  padding: 0;
  /* user-select: none; */
}
.first-page {
  display: flex;
  justify-content: flex-start;
  max-height: 100vh;
  flex-wrap: nowrap;
  overflow: hidden;
  /* perspective: 1000px; */
}
.home-background {
  z-index: -1;
  position: absolute;
  height: 100%;
  width: 100%;

  filter: blur(2px);
  overflow: hidden;
  user-select: none;
}
.home-background div {
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
}
.home-background_default {
  background-image: url("img/img1.jpg");
}
.home-background_villes {
  background-image: url("img/paris.jpeg");
  position: absolute;
  top: 100%;
  transition: transform 0.35s ease-in-out;
}
.home-background_nature {
  background-image: url("img/nature.jpeg");
  position: absolute;
  top: 100%;
  transition: transform 0.35s ease-in-out;
}
.home-background_parcs {
  background-image: url("img/parcs.jpeg");
  position: absolute;
  top: 100%;
  transition: transform 0.35s ease-in-out;
}
.main-title h1 {
  font-family: "Fraunces";
  text-transform: uppercase;
  color: white;
  font-weight: 350;
  /* font-size: 175px; */
  font-size: 11rem;
  /* border: 1px solid red; */
  /* display: inline-block; */
  width: fit-content;
}
.main-title {
  /* border: 1px solid green; */
  display: flex;
  flex-direction: column;
  width: fit-content;
  justify-content: center;
  height: 100vh;
  margin-left: 208px;
}
.main-menu {
  opacity: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 467px;
  transition: opacity 0.5s;
}
.city-menu {
  display: flex;
  align-items: center;
}
.main-menu__element,
.city-menu__element {
  list-style-type: none;
}
.main-menu__link,
.city-menu__link {
  font-family: "Fraunces";
  font-size: 64px;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: rgb(255, 255, 255);
  line-height: normal;
  text-decoration: none;
  font-optical-sizing: 144px;
  font-variation-settings: "opsz" 144;
  transition: all 0.25s ease-in;
  animation: bgPos 3s ease-in-out infinite alternate;
}
.city-menu {
  transform: translateX(250px);
}
.city-menu__link {
  font-size: 104px;
}
.city-menu__link.play {
  animation: city-menu__text-apparition 1.5s ease-out;
}
.city-menu__link {
  color: rgb(255, 255, 255);
}
.city-menu.play {
  animation: city-menu-apparition linear 1.5s forwards;
}

@keyframes city-menu-apparition {
  0% {
    transform: translateX(0px);
  }

  100% {
    transform: translateX(-300px);
  }
}

@keyframes city-menu__text-apparition {
  0% {
    opacity: 0%;
    /* transform: translateY(50px); */
  }
  10% {
    opacity: 100%;
  }
  20% {
    font-weight: 500;
    /* transform: translateY(-250px); */
  }
  70% {
    font-weight: 900;
  }
  100% {
    font-weight: 500;
    /* transform: translateY(-400px); */
  }
}
@keyframes fontVar {
  0% {
    font-weight: 100;
  }
  100% {
    font-weight: 900;
  }
}
@keyframes bgPos {
  0% {
    background-position: 0%;
  }
  100% {
    background-position: 100%;
  }
}
.main-menu__link:hover,
.city-menu__link:hover {
  font-weight: 700;
  line-height: normal;
  text-decoration: none;

  font-variation-settings: "opsz" 144;
  transition: all 0.25s ease-out;
}
.city-menu__link:hover {
  transition: all 0.35s ease-out;
}
.main-menu__link::before,
.city-menu__link::before {
  content: "";
  border-bottom: 1px solid white;
  height: 80px;
  transform: scaleX(0);
  width: 250px;
  z-index: -1;
  position: absolute;
  transition: transform 0.3s 0.1s ease-in-out;
  transform-origin: left;
}
.city-menu__link::before {
  height: 120px;
  width: 280px;
}

.main-menu__link:hover::before,
.city-menu__link:hover::before {
  transform: scaleX(1);
  transform-origin: left;
  transition: all 0.3s 0.2s ease-in-out;
}