@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

* {
  font-family: 'Nunito', sans-serif;
}

.bg-glass {
  background: rgba(2, 16, 43, 0.733);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.026);
  backdrop-filter: blur(19.1px);
  -webkit-backdrop-filter: blur(19.1px);
}

@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.bounce-animation {
  animation: bounce 1s infinite;
}

.loading-fade {
  animation: loading-fade;
  animation-timeline: view(auto);
}

@keyframes loading-fade {
  0% {
    opacity: 0;
    scale: 70%;
  }

  30% {
    opacity: 50%;
    scale: 70%;
  }

  40% {
    opacity: 100%;
    scale: 100%;
  }

  50% {
    opacity: 100;
    scale: 100%;
  }

  60% {
    opacity: 100%;
    scale: 100%;
  }

  70% {
    opacity: 50%;
    scale: 70%;
  }

  100% {
    opacity: 0;
    scale: 70%;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }

  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 2s ease-out forwards;
}

/* -------------------------------------- */

.sliderr {
  width: min(1200px, 90vw);
  margin: auto;
}
.slider {
  width: 100%;
  height: var(--height);
  overflow: hidden;
  mask-image: linear-gradient(to right, transparent, #000 10% 90%, transparent);
}
.slider .list {
  display: flex;
  width: 100%;
  min-width: calc(var(--width) * var(--quantity));
  position: relative;
}
.slider .list .item {
  width: var(--width);
  height: var(--height);
  position: absolute;
  left: 100%;
  animation: autoRun 10s linear infinite;
  transition: filter 0.5s;
  animation-delay: calc(
    (10s / var(--quantity)) * (var(--position) - 1) - 10s
  ) !important;
}
.slider .list .item img {
  width: 100%;
}
@keyframes autoRun {
  from {
    left: 100%;
  }
  to {
    left: calc(var(--width) * -1);
  }
}
.slider:hover .item {
  animation-play-state: paused !important;
  filter: grayscale(1);
}
.slider .item:hover {
  filter: grayscale(0);
}
.slider[reverse='true'] .item {
  animation: reversePlay 10s linear infinite;
}
@keyframes reversePlay {
  from {
    left: calc(var(--width) * -1);
  }
  to {
    left: 100%;
  }
}

/* -------------------------------------------food menu */

.fm-bg-img{
  background-image: url("../food-menu/resources/food-menu-img/food menu background.svg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}





/* bg ------------------------------------------------------------*/

@keyframes move {
  100% {
      transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #090e2f;
  overflow: hidden;
}

.background span {
  width: 50vmin;
  height: 50vmin;
  border-radius: 50vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 50;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.background span:nth-child(0) {
  color: #7475d8;
  top: 4%;
  left: 27%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: -13vw 7vh;
  box-shadow: -100vmin 0 12.79405615755159vmin currentColor;
}
.background span:nth-child(1) {
  color: #5364f1;
  top: 31%;
  left: 43%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: -24vw -21vh;
  box-shadow: -100vmin 0 13.410090562520427vmin currentColor;
}
.background span:nth-child(2) {
  color: #5364f1;
  top: 6%;
  left: 74%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: 22vw 15vh;
  box-shadow: 100vmin 0 13.249141645206866vmin currentColor;
}
.background span:nth-child(3) {
  color: #5364f1;
  top: 31%;
  left: 85%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: 25vw 13vh;
  box-shadow: -100vmin 0 13.028231828840504vmin currentColor;
}
.background span:nth-child(4) {
  color: #7475d8;
  top: 4%;
  left: 64%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: 25vw -9vh;
  box-shadow: 100vmin 0 12.786996959133418vmin currentColor;
}
.background span:nth-child(5) {
  color: #7475d8;
  top: 67%;
  left: 92%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: 1vw 7vh;
  box-shadow: 100vmin 0 13.250557286539104vmin currentColor;
}
.background span:nth-child(6) {
  color: #7475d8;
  top: 91%;
  left: 78%;
  animation-duration: 6s;
  animation-delay: -1s;
  transform-origin: 9vw 17vh;
  box-shadow: 100vmin 0 13.05276190539198vmin currentColor;
}