body {
    font-family: Arial, sans-serif;    
    background-image: url('background_light.png');    
    background-color: white;
    color: #333;
    margin: 20px;
    padding: 15px;  
    background-size: cover;
    

}

/* Темный режим */
body.dark-mode {
    background-image: url('background_dark.png'); /* Путь к темной версии изображения */
    background-color: black; /* Чёрный фон для темного режима */
    color: white; /* Цвет текста для читаемости в темном режиме */
}

/* Стили для кнопки переключения */
#dark-mode-toggle {
    position: fixed;
    top: 5px;
    right: 3px;
    background: none;
    border: none;
    font-size: 27px;
    cursor: pointer;
    color: #333; /* Цвет иконки в светлом режиме */
}

body.dark-mode #dark-mode-toggle {
    color: white; /* Цвет иконки в темном режиме */
}


h1 {
    font-family: 'DynaPuff', sans-serif;
    

}

header {
    background-color: #58e067;
    color: #431b4d;
    padding: 20px;
    verflow: hidden; /* Скрывает текст за пределами рамки */

}

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap; /* Предотвращает перенос текста */
}

.marquee h1 {
    display: inline-block;
    padding-left: 100%; /* Начинаем анимацию за пределами контейнера */
    animation: marquee 10s linear infinite; /* Анимация длится 15 секунд, линейная, бесконечная */
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}



button:hover {
    background-color: #58e067;
}

container {
    max-width: 1920px; /*максимальную ширину */
    margin: 0 auto; /* Центрирует контейнер на странице */
    padding: 0 20px; /* Добавляет отступы слева и справа */
}

.dark-mode a, .dark-mode p {
    color: white;
}