body {
  font-family: Arial, sans-serif;
  margin: 10px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #202234;
  color: white;
}
.home-button-container {
  display: flex;
  height: 100%;
  align-items: center;
  margin-left: 15px;
  flex-wrap: wrap;
}
.home-button {
  font-size: 25px;
  color: whitesmoke;
  background-color: #20163391;
  padding: 0.7vw 1.5vw;
  border-radius: 2.5vw;
  text-transform: lowercase;
  text-decoration: none;
  transition:
    background-color 0.4s ease,
    color 0.4s ease;
  position: relative;
  overflow: hidden;
}
.home-button::before {
  /*этот негодник отвечает за подстветку ссылки при наведении курсора*/
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  filter: blur(150px);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.home-button::before {
  opacity: 2;
}

.home-button:hover {
  background-color: #cfd718b0;
  color: #FF0000;
}
/* ---------------------------------- */
/* Стили для галереи */
/* ---------------------------------- */
.gallery {
  /* Создает сетку для изображений */
  display: flex;
  flex-wrap: wrap; /* Разрешает перенос на следующую строку */
  gap: 15px; /* Промежуток между изображениями */
  justify-content: center; /* Центрирует изображения в контейнере */
  padding: 20px;
}

/* Стили для маленьких изображений (превью) */
.thumbnail {
  cursor: pointer; /* Показывает, что на него можно нажать */
  opacity: 0.8;
  transition:
    opacity 0.3s,
    transform 0.3s;
  border: 1px solid #CCC; /* Опционально: рамка для превью */
  object-fit: cover; /* Обеспечивает, что изображение заполняет заданные размеры */
}

.thumbnail:hover {
  opacity: 1; /* Полная прозрачность при наведении */
  transform: scale(1.05); /* Легкое увеличение при наведении */
}

/* ---------------------------------- */
/* Стили для модального окна */
/* ---------------------------------- */

/* Контейнер модального окна (темный оверлей) */
.modal {
  display: none; /* Скрыто по умолчанию */
  position: fixed; /* Остается на месте даже при прокрутке */
  z-index: 1000; /* Стоит поверх всего */
  left: 0;
  top: 0;
  width: 100%; /* Занимает всю ширину */
  height: 100%; /* Занимает всю высоту */
  overflow: auto; /* Позволяет прокручивать, если изображение большое */
  background-color: rgba(0, 0, 0, 0.9); /* Черный фон с прозрачностью */
  backdrop-filter: blur(5px); /* Опционально: эффект размытия для фона */
}

/* Изображение внутри модального окна */
.modal-content {
  margin: auto;
  display: block;
  width: 80%; /* Максимальная ширина */
  max-width: 900px; /* Ограничение по ширине */
  max-height: 90vh; /* Ограничение по высоте (90% от высоты видимой области) */
  object-fit: contain; /* Сохраняет пропорции, вмещаясь в контейнер */
  animation-name: zoom;
  animation-duration: 0.6s;
  /* Центрируем изображение вертикально и горизонтально */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Анимация увеличения */
@keyframes zoom {
  from {
    transform: scale(0.1) translate(-50%, -50%);
  }
  to {
    transform: scale(1) translate(-50%, -50%);
  }
}

/* Кнопка закрытия */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #F1F1F1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
  cursor: pointer;
  z-index: 1001; /* Выше, чем модальное окно */
}

.close:hover,
.close:focus {
  color: #BBB;
  text-decoration: none;
  cursor: pointer;
}

/* ---------------------------------- */
/* (Остальные ваши стили, например, для кнопки "Домой" и "Скролл вверх") */
/* ---------------------------------- */
#scrollToTopBtn {
  position: fixed;
  bottom: 65px;
  right: 20px;
  width: 50px;
  height: 50px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.3s;
}
#scrollToTopBtn:hover {
  opacity: 1;
}

#scrollToTopBtn .arrow {
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 5px;
  transform: rotate(-135deg);
}