* {
    margin: 0;
    padding: 0;
    color: #31CE63;
    font-family: "Roboto", "Arial", sans-serif;
    text-decoration: none;
}

p, li{
    font-size: 1.5em;
}



.navbar {
    position: fixed; /* Фиксируем элемент на экране */
    top: 0; /* Позиционируем элемент в самом верху */
    width: 100%; /* Задаем элементу ширину 100%, чтобы он тянулся на всю ширину экрана */
    background-color: #181818; /* Задаем фоновый цвет меню, например, темно-серый */
    color: white; /* Задаем цвет текста в меню */
    padding: 10px 0; /* Добавляем немного отступа сверху и снизу */
    z-index: 1000; /* Устанавливаем z-index, чтобы меню было поверх других элементов */
  }
  
  /* Добавляем стили для ссылок в меню для улучшения внешнего вида */
  .navbar a {
    color: white; /* Цвет текста */
    padding: 14px 20px; /* Отступы внутри ссылок */
    text-decoration: none; /* Убираем подчеркивание текста */
    font-size: 17px; /* Размер шрифта */
  }
  
  /* Меняем стиль ссылки при наведении */
  .navbar a:hover {
    background-color: #ddd; /* Цвет фона */
    color: black; /* Цвет текста */
  }

 /* Стили для начального экрана */
 .first-screen {
    height: 100vh; /* Полная высота вьюпорта */
    /* background: #f0f0f0; Фон первого экрана, выберите нужный цвет */
    /* Другие стили для первого экрана по вашему выбору */
  }


body{
    background-color: black;
}
.site-footer {
    background-color: #333; /* Темный фон для футера */
    color: #fff; /* Белый текст */
    padding: 20px 0; /* Паддинг сверху и снизу */
    font-family: 'Arial', sans-serif; /* Шрифт */
  }
  
  .footer-content {
    text-align: center; /* Выравнивание по центру */
    margin-bottom: 10px; /* Отступ снизу */
  }
  
  .contact-info {
    list-style: none; /* Убираем стандартные маркеры списка */
    padding: 0; /* Убираем паддинг списка */
  }
  
  .contact-info li {
    display: inline; /* Элементы списка в ряд */
    margin-right: 10px; /* Отступы между элементами списка */
  }
  
  .contact-info a {
    color: #fff; /* Белый цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    transition: color 0.3s; /* Плавный переход цвета */
  }
  
  .contact-info a:hover {
    color: #ffd700; /* Цвет при наведении */
  }
  
  .footer-author {
    text-align: center; /* Выравнивание по центру */
    font-size: 0.8em; /* Меньший размер шрифта для копирайта */
  }


  .full-page-button-container {
    height: 100vh;
    display: flex;
    color: #34db69;
    flex-direction: column; /* Элементы теперь идут в колонку */
    justify-content: center; /* Центрирование по вертикали */
    align-items: center; /* Центрирование по горизонтали */
    text-align: center; /* Центрирование текста внутри контейнера */
  }

  .button-container {
    text-align: center; /* Центрирование кнопки по горизонтали */
    /* padding: 20px; Отступ для контейнера */
  }
  
  .transition-button {
    display: inline-block; /* Позволяет задать отступы и ширину */
    background-color: #34db69; /* Цвет фона кнопки */
    color: rgb(0, 0, 0); /* Цвет текста кнопки */
    text-decoration: none; /* Убираем подчёркивание у ссылки */
    padding: 10px 30px; /* Внутренние отступы вокруг текста */
    border-radius: 5px; /* Скругление углов кнопки */
    font-size: 16px; /* Размер шрифта */
    font-weight: bold; /* Жирность текста */
    border: 3px solid #000000;
    transition: background-color 0.3s, transform 0.2s; /* Плавный переход для фона и трансформации */
  }
  
  .transition-button:hover,
  .transition-button:focus {
    background-color: #000000; /* Цвет фона кнопки при наведении и фокусе */
    border: 3px solid #34db69;
    color: #ffffff;
    text-decoration: none; /* Убедитесь, что подчеркивание текста удалено */
    /* transform: translateY(-3px); Небольшой подъем кнопки при наведении */
  }
  
  .caption p {
    margin: 0 0 20px; /* Отступ снизу для надписи */
    font-size: 24px; /* Размер шрифта надписи */
    color: #9dff00; /* Цвет текста надписи */
    /* Другие стили для надписи по вашему выбору */
  }


  #scrollToTopButton {
    position: fixed; /* Фиксируем кнопку на экране */
    bottom: 20px; /* Отступ снизу */
    right: 20px; /* Отступ справа */
    background-color: #34db69; /* Цвет фона кнопки */
    color: rgb(0, 0, 0); /* Цвет текста */
    padding: 10px; /* Внутренние отступы вокруг текста */
    border-radius: 5px; /* Скругление углов кнопки */
    cursor: pointer; /* Форма курсора указывает на возможность клика */
    font-size: 16px; /* Размер шрифта */
    transition: opacity 0.3s; /* Плавное изменение прозрачности */
    z-index: 1000; /* Убедимся, что кнопка находится над другими элементами */
  }
  
  #scrollToTopButton:hover {
    background-color: #34db69; /* Цвет фона при наведении */
  }
  
  /* Показываем кнопку только при прокрутке вниз */
  .showScrollButton {
    display: block !important; /* или 'inline', в зависимости от нужного вам отображения */
  }



  .image-buttons {
    
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .button {
    width: 300px;
    height: 540px;
    background-size: cover;
    background-position: center;
    position: relative; /* Указываем, что кнопка будет контейнером для псевдоэлементов */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* Обрезаем псевдоэлементы, выходящие за границы кнопки */
  }
  
  .button::before {
    content: ''; /* Необходимо для отображения псевдоэлемента */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Затемнение */
    transition: background 0.5s ease; /* Плавное изменение затемнения */
    z-index: 1; /* Убедитесь, что затемнение находится между фоном и текстом */
  }
  
  .button:hover::before {
    background: rgba(0, 0, 0, 0.3);; /* Убираем затемнение при наведении */
  }
  
  .button span {
    color: #31CE63;
    text-align: center;
    font-size: 1.5em;
    font-style: normal;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    position: relative; /* Указываем, что текст находится поверх псевдоэлементов */
    z-index: 2; /* Текст должен быть поверх затемнения */
  }

  .buttons-section {
   
    margin-top: 200px;
    height: 100vh;
    text-align: center; /* Центрируем содержимое секции, включая заголовок и кнопки */
  }
  
  .buttons-title {
    margin-bottom: 20px; /* Добавляем некоторый отступ между заголовком и кнопками */
    color: #31CE63; /* Цвет текста заголовка */
    font-size: 24px; /* Размер шрифта заголовка */
  }

  .centered-container {
    margin-top: 200px;
    margin-left: 100px;
    margin-right: 100px;
    display: flex; /* Используем Flexbox */
    justify-content: center; /* Центрируем содержимое по горизонтали */
    align-items: center; /* Центрируем содержимое по вертикали */
    height: 80vh; /* Высота контейнера равна высоте вьюпорта */
  }

  .content-container {
    height: 80vh;
    display: flex; /* Используем Flexbox для расположения элементов в ряд */
    align-items: start; /* Центрируем элементы по вертикали */
    gap: 50px; /* Добавляем пространство между картинкой и текстовым блоком */
  }

  .image-container{
    display: flex;
    width: 100%;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    gap: 30px;
    /* justify-content: space-between; */
  }
  


  .image-container img {
    /* width: 750px; Или любой другой размер, который вам нужен */
    height: auto; /* Сохраняем пропорции изображения */
  }
  
  .text-container {
    flex-grow: 1; /* Текстовый контейнер займет все доступное пространство */
    display: flex; /* Используем Flexbox для выравнивания содержимого */
    flex-direction: column; /* Содержимое располагается вертикально */
    align-items: center; /* Центрируем содержимое по горизонтали */
    text-align: left; 
  }
  
  .text-container button {
    margin-top: 20px; /* Добавляем отступ сверху для кнопки */
    padding: 10px 20px; /* Паддинг вокруг текста внутри кнопки */
    background-color: #007bff; /* Цвет фона кнопки */
    color: white; /* Цвет текста кнопки */
    border: none; /* Убираем границу кнопки */
    border-radius: 5px; /* Скругляем углы кнопки */
    cursor: pointer; /* Меняем курсор при наведении на кнопку */
    transition: background-color 0.3s; /* Плавное изменение фона при наведении */
  }
  
  .text-container button:hover {
    background-color: #0056b3; /* Темнее цвет фона при наведении */
  }

  .navigation-container {
    display: flex; /* Используем Flexbox для выравнивания кнопок */
    justify-content: space-around; /* Располагаем кнопки на противоположных концах контейнера */
    margin-top: 20px; /* Добавляем немного места между текстом и кнопками */
    margin-left: 20px;
    margin-left: 20px;
    height: 10vh;
  }
  
  .navigation-button {
    height: 20px;
    padding: 10px 20px; /* Отступы вокруг текста внутри кнопок */
    background-color: #34db69; /* Цвет фона кнопки */
    color: rgb(0, 0, 0); /* Цвет текста */
    border-radius: 5px; /* Скругляем углы */
    cursor: pointer; /* Меняем курсор при наведении на кнопку */
    border: 3px solid #000000;
    transition: background-color 0.3s; /* Плавное изменение фона при наведении */
  }
  
  .navigation-button:hover {
    background-color: #000000; /* Цвет фона кнопки при наведении и фокусе */
    border: 3px solid #34db69;
    color: #31CE63;
  }
  
  .prev-button {
    /* Стилизация для кнопки "Предыдущий", если нужно */
  }
  
  .next-button {
    /* Стилизация для кнопки "Следующий", если нужно */
  }
  


  .container {
    margin-top: 100px;
    
    margin-left: auto;
    margin-right: auto;
    width: 90%; /* Или любой другой размер в зависимости от дизайна */
    max-width: 1200px; /* Максимальная ширина контейнера */
  }
  
  .text-block-container {
    display: flex; /* Используем Flexbox для выравнивания блоков в одну линию */
    justify-content: space-between; /* Распределяем блоки равномерно */
    margin-bottom: 20px; /* Отступ снизу до картинки */
  }
  
  .text-block {
    color: #31CE63;
    background-color: #0c0c0c; /* Цвет фона для текстовых блоков */
    padding: 20px;
    width: 48%; /* Приблизительно половина контейнера, учитывая отступ */
    box-sizing: border-box;
  }

  .text-block p{
    margin-top: 10px;
  }
  
  .text-block h2 {
    margin-top: 0;
  }
  
  .image-container img {
    margin-left: auto;
    margin-right: auto;
    width: 100%; /* Чтобы изображение занимало всю ширину контейнера */
    height: auto; /* Для сохранения пропорций изображения */
  }
  
  






/*  .image-buttons {
    height: 100vh;
    display: flex;
    justify-content: center; 
    align-items: center; 
    flex-wrap: wrap;
    gap: 20px; 
  }
  
  .button {
    width: 300px; 
    height: 540px; 
    background-size: cover; 
    background-position: center; 
    opacity: 0.5; 
    display: flex; 
    justify-content: center;
    align-items: center;
    position: relative;
    transition: opacity 0.5s ease; 
  }

  .button span {
    color: white; 
    text-align: center; 
    font-size: 1.5em;
    font-style: normal;
    
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
  }
  
  .button:hover {
    opacity: 1; 
  }