* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  overflow-x: hidden;
  font-family: 'Sigmar', sans-serif;
  display: flex;
    flex-direction: column;
}

.nav__hamburger.active {
  display: flex;
  position: absolute;
  top: 1rem;
  right: 1rem;
  cursor: pointer;
  z-index: 1000; /* Убедимся, что кнопка будет поверх других элементов */
}

.nav {
  height: 3.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #fff;
}

.nav__logo__img {
  height: 50px; /* Регулируйте размер */
  width: auto;
}

.nav__menu ul {
  margin: 0;
  padding: 0;
  display: flex;
}

.nav__menu ul li {
  list-style: none;
}

.nav__menu ul li a {
  text-decoration: none;
  color: #fff;
  padding: 1rem;
  display: block;
}

.nav__menu li:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

.nav__hamburger {
  width: 1.875rem;
  height: 1.313rem;
  display: none;
  flex-direction: column;
  justify-content: space-around;
  position: absolute;
  top: 1rem;
  right: 1rem;
}

.nav__hamburger__line {
  height: 0.188rem;
  width: 100%;
  background-color: #fff;
  border-radius: 0.625rem;
  transition: all ease-in-out 0.2s;
}

/* MEDIA QUERIES */

@media screen and (max-width: 550px) {
  .nav__hamburger {
    display: flex;
  }
  .nav__menu {
    position: absolute;
    display: flex;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.2);
    top: -15rem;
    width: 100%;
    transition: all ease-in-out 0.4s;
  }

  .nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav__menu ul {
    flex-direction: column;
    width: 100%;
    padding: 3rem 0 0.6rem;
  }
  .nav__menu ul li {
    text-align: center;
  }
  .nav__menu ul li a {
    padding: 0.5rem;
  }
  .nav__menu {
    z-index: -1;
  }

  .nav__menu.active {
  top: 0;
  z-index: 100; /* Убедитесь, что меню находится выше других элементов */
}  


.nav__hamburger.active :nth-child(1) {
    transform: rotate(45deg) translate(0.45rem, 0.1875rem);
  }

  .nav__hamburger.active :nth-child(2) {
    opacity: 0;
  }

  .nav__hamburger.active :nth-child(3) {
    transform: rotate(-45deg) translate(0.45rem, -0.1875rem);
  }
}
.nav__menu ul {
  position: relative; /* Только для всего списка */
}

.nav__gif {
  display: none; /* GIF скрыт по умолчанию */
  position: absolute;
  left: -60px; /* Расположение слева от текста */
  top: 50%;
  transform: translateY(-50%);
  width: 50px; /* Размер GIF */
  height: 50px;
}

.nav__menu__link:hover .nav__gif {
  display: block; /* Показывать GIF при наведении */
}

.nav__gif img {
  width: 100%; /* Масштабирование GIF */
  height: auto;
  border-radius: 5px; /* Закруглённые углы для красоты */
}

.nav__menu__link:nth-child(1) a {
    color: #ff5733; /* Оранжевый */

  }
  .nav__menu__link:nth-child(2) a {
    color: #33ff57; /* Зелёный */
  }
  .nav__menu__link:nth-child(3) a {
    color: #3357ff; /* Синий */
  }





.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(background.png) no-repeat center center; /* Centers the image */
  background-size: cover; /* Ensures the image covers the area */
  z-index: -2;
}



.parallax {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  aspect-ratio: 16 / 9; /* Соотношение сторон */
  width: 100%; /* Растягивается на всю ширину */
  max-height: 100vh; /* Ограничение по высоте */
  overflow: hidden;
}

#grass {
  position: absolute;
  bottom: 0; /* Прижимаем к низу контейнера */
  left: 0;
  width: 100%; /* Растягиваем на всю ширину контейнера */
  height: auto; /* Пропорциональная высота */
  z-index: 10;
}

/* Медиазапрос для экранов с шириной меньше 1260px */
@media (max-width: 1260px) {
  #grass {
    width: 110%; /* Увеличиваем ширину на 10% */
    left: -5%;   /* Сдвигаем влево, чтобы сбалансировать увеличенную ширину */
  }
}



@media screen and (max-width: 768px) {
  .parallax {
    height: auto; /* Автоматическая высота */
  }

  #grass {
    bottom: 0; /* Сохраняем позицию даже на маленьких экранах */
    transform: none; /* Убираем любые трансформации */
  }
}


#text {
  display: flex; /* Включаем Flexbox */
  position: absolute;
  justify-content: center; /* Центрируем по горизонтали */
  align-items: center; /* Центрируем по вертикали */
  height: 100vh; /* Высота контейнера на всю высоту экрана */
}

.svg-logo {
  width: 50px !important;/* Уменьшаем размер изображения, можно настроить */
  height: auto; /* Сохраняем пропорции изображения */
  justify-content: center; /* Центрируем по горизонтали */
  align-items: center; /* Центрируем по вертикали */
}


.parallax img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.parallax img#gate-left {
  position: fixed;
  top: 0; /* Ensure it is vertically aligned to the top */
  left: 0; /* Align it to the left side */
  transform: translateX(-282px); /* Keep original transformation */
}

.parallax img#gate-right {
  position: fixed;
  top: 0; /* Ensure it is vertically aligned to the top */
  right: 0; /* Align it to the right side */
  transform: translateX(282px); /* Keep original transformation */
}

/* Media query for smaller screens (max-width 768px) */
@media (max-width: 768px) {
  .parallax img#gate-left {
    transform: translateX(-175px); /* Adjust translation for smaller screens */
  }

  .parallax img#gate-right {
    transform: translateX(175px); /* Adjust translation for smaller screens */
  }
}

/* Media query for even smaller screens (max-width 480px) */
@media (max-width: 480px) {
  .parallax img#gate-left {
    transform: translateX(-100px); /* Adjust translation for smaller screens */
  }

  .parallax img#gate-right {
    transform: translateX(100px); /* Adjust translation for smaller screens */
  }
}


.sec {
  margin-top: auto; /* Перемещаем секцию вниз */
  background: url('mit-missmars-01-press_0.jpg') repeat;
  background-size: cover;
  padding: 30px 10vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Центрирование содержимого по вертикали */
  align-items: center;
  z-index: 11;
  overflow: hidden;
}

.sponge-btn {
  padding: 288px 30vw;
  font-size: 96px;
  font-family: 'Sigmar', sans-serif;
  font-weight: bold;
  color: white;
  text-shadow: 0px 8px green;
  background: radial-gradient(circle, #FD3DB5 30%, #0000FF 100%);
  border: none;
  text-decoration: none;  /* Убирает подчеркивание */
  border-radius: 0px;
  cursor: pointer;
  transition: transform 0.2s ease-out;
  display: inline-block;  /* Обеспечивает блочное поведение для кнопки */
}

.sponge-btn a {
  display: block;           /* Растягивает ссылку на всю кнопку */
  width: 100%;              /* Заставляет ссылку занимать всю ширину кнопки */
  height: 100%;             /* Растягивает ссылку по высоте кнопки */
  color: inherit;           /* Наследует цвет текста от родителя (кнопки) */
}


/* Default squish animation */
@keyframes squish {
  0% { transform: scale(1); }
  30% { transform: scale(1.2, 0.8); } /* Stretch horizontally */
  50% { transform: scale(0.8, 1.2); } /* Squish vertically */
  70% { transform: scale(1.1, 0.9); } /* Bounce effect */
  100% { transform: scale(1); }       /* Return to normal */
}

/* Class for sponge animation */
.sponge-animation {
  animation: squish 0.5s ease-in-out;
}

/* Media queries for responsiveness */