/* Сброс всех отступов, паддингов и установка box-sizing: border-box */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Общие стили для body */
body {
    font-family: Arial, sans-serif; /* Шрифт */
    background-color: #130f16; /* Темный фон для body */
    color: #fafafa; /* Цвет текста */
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
main{
    flex: 1;
}
/* Стили для хедера */
header {
    background-color: #414245;
    padding: 20px 0;
    text-align: center;
}
footer a {
    color: #fafafa;
    text-decoration: none;
    
}
footer {
    background-color: #414245;
    padding: 10px 0;
    text-align: center;
    
    
}

footer a:hover{
    color: #a0a0a0; /* Цвет текста при наведении */
        transform: scale(1.2); /* Увеличение размера при наведении */
    }

/* Стили для ссылок в блоке .textbox */
.textbox a {
    color: #fafafa; /* Цвет ссылок */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 18px; /* Размер шрифта */
    display: flex; /* Дисплей flex */
    transition: color 0.3s ease, transform 0.3s ease; /* Плавный переход */
}

/* Эффект при наведении на ссылку в .textbox */
.textbox a:hover {
    color: #fafafa; /* Цвет при наведении */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 18px; /* Размер шрифта */
    display: flex; /* Дисплей flex */
    background-color: #a0a0a0; /* Фон при наведении */
}

/* Стили для навигации (меню) */
header a {
    color: #fafafa;
    text-decoration: none;
    
}


header a:hover{
color: #a0a0a0; /* Цвет текста при наведении */
    transform: scale(1.2); /* Увеличение размера при наведении */

}  /* Стили для навигационного меню */
nav ul {
    list-style-type: none; /* Убираем маркеры списка */
    margin: 0;
    padding: 0;
}

/* Стиль для каждого пункта меню */
nav ul li {
    display: inline-block; /* Горизонтальное расположение элементов */
    position: relative; /* Для правильного отображения выпадающего меню */
    padding: 20px; /* Отступы внутри элементов меню */
}
nav ul li a {
    color: #fafafa;
    text-decoration: none;
    font-size: 23px;
    display: flex;
    transition: color 0.3s ease, transform 0.3s ease;
}
nav ul li a:hover {
    color: #a0a0a0;
    transform: scale(1.2);
}

/* Стили для выпадающего меню */
nav ul li ul.dropdown {
    visibility: hidden; /* Скрыто по умолчанию */
    opacity: 0; /* Начальная прозрачность */
    position: absolute;
    top: 100%; /* Размещение выпадающего меню сразу под родительским элементом */
    left: 0;
    background-color: #242025; /* Цвет фона выпадающего меню */
    padding: 10px 0; /* Отступы внутри выпадающего меню */
    border-radius: 8px; /* Округленные углы */
    min-width: 150px; /* Минимальная ширина меню */
    transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавный переход */
}

/* Показать выпадающее меню при наведении на родительский элемент */
nav ul li:hover ul.dropdown {
    visibility: visible; /* Делаем меню видимым */
    opacity: 1; /* Меню становится полностью видимым */
}

/* Стили для пунктов в выпадающем меню */
nav ul li ul.dropdown li {
    display: block; /* Пункты отображаются вертикально */
    padding: 10px 15px; /* Отступы внутри пунктов */
    background-color: #414245; /* Цвет фона для пунктов */
    border-radius: 4px; /* Округленные углы для пунктов */
    margin: 5px 10px; /* Отступы между пунктами */
}

/* Стили для ссылок в выпадающем меню */
nav ul li ul.dropdown li a {
    color: #fafafa; /* Цвет ссылок в меню */
    text-decoration: none; /* Убираем подчеркивание */
    font-size: 18px; /* Размер шрифта */
    display: block; /* Ссылки занимают всю ширину */
    transition: color 0.3s ease, transform 0.3s ease; /* Плавный переход */
}

/* Эффект при наведении на ссылки в выпадающем меню */
nav ul li ul.dropdown li a:hover {
    color: #a0a0a0; /* Цвет текста при наведении */
    transform: scale(1.2); /* Увеличение размера при наведении */
}
.textbox {
    background-color: #414245; /* Цвет фона блока */
    color: #fafafa; /* Цвет текста */
    padding: 20px; /* Отступы внутри блока */
    margin: 20px auto; /* Отступы сверху и снизу */
    border-radius: 15px; /* Округленные углы */
    max-width: 600px; /* Максимальная ширина блока */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Тень вокруг блока */
    text-align: center; /* Центрирование текста */
    font-size: 18px; /* Размер шрифта */
    
}



/* Стили для второго блока .textbox2 (аналогичные .textbox) */
.textbox2 {
    background-color: #414245;
    color: #fafafa;
    padding: 20px;
    margin: 20px auto;
    border-radius: 15px;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-size: 18px;
    display: flex; /* Align children horizontally (image + text-content) */
    align-items: flex-start; /* Align items to the top */
}

img {
    width: 300px; /* Set image width */
    height: 200px; /* Set image height */
    border: 5px solid #fafafa;
    border-radius: 15px; /* Rounded corners */
    margin-right: 20px; /* Add space between image and text content */
}

.text {
    display: flex;
    flex-direction: column; 
    justify-content: flex-start; /* Align the content to the top */
    text-align: left; /* Align text to the left */
}
  .textbox3 {
    text-align: center;
    display: flex; 
    width: auto;
    padding-left: 55px;
  }



  body.light-mode img{
    width: 300px; /* set the width */
    height: 200px; /* maintain aspect ratio */
    border: 5px solid #130f16; /* solid black border */
    border-radius: 15px; /* rounded corners */
   
  }
/* Стили для светлой темы */
body.light-mode {
    background-color: #fafafa; /* Светлый фон */
    color: #130f16; /* Темный текст */
}

/* Стили для светлого хедера */
body.light-mode header {
    background-color: #a0a0a0; /* Светлый фон для хедера */
}
body.light-mode footer {
    background-color: #a0a0a0; /* Светлый фон для хедера */
}

/* Стили для ссылок в светлой теме */
body.light-mode nav ul li a {
    color: #130f16; /* Темный цвет текста в ссылках */
}

/* Стили для выпадающего меню в светлой теме */
body.light-mode nav ul li ul.dropdown {
    background-color: #e0e0e0; /* Светлый фон для выпадающего меню */
}

/* Стили для пунктов выпадающего меню в светлой теме */
body.light-mode nav ul li ul.dropdown li {
    background-color: #ffffff; /* Белый фон для пунктов */
}

/* Стили для ссылок в выпадающем меню в светлой теме */
body.light-mode nav ul li ul.dropdown li a {
    color: #130f16; /* Темный цвет текста для ссылок */
}

/* Эффект при наведении на ссылки в выпадающем меню в светлой теме */
body.light-mode nav ul li ul.dropdown li a:hover {
    color: #a0a0a0; /* Цвет текста при наведении */
    transform: scale(1.2); /* Увеличение размера при наведении */
}

/* Стили для блока .textbox в светлой теме */
body.light-mode .textbox {
    background-color: #a0a0a0; /* Светлый фон блока */
    color: #130f16; /* Темный текст */
}

/* Стили для ссылок в блоке .textbox в светлой теме */
body.light-mode .textbox a {
    color: #130f16; /* Темный цвет текста для ссылок */
}
body.light-mode .textbox2 {
    background-color: #a0a0a0; /* Светлый фон */
    color: #130f16; /* Темный текст */
}



/* Стили для свитчера (переключателя темы) */
.switcher {
    position: relative; /* Размещение свитчера */
    display: inline-block;
    width: 60px; /* Ширина свитчера */
    height: 30px; /* Высота свитчера */
    margin: 20px auto; /* Отступы */
}

.switch {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    background-color: #130f16; /* Цвет фона свитчера в темной теме */
    border-radius: 30px; /* Округленные углы */
    cursor: pointer; /* Указатель курсора */
    transition: background-color 0.3s ease; /* Плавный переход фона */
}

/* Слайдер внутри свитчера */
.switch .slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: #fafafa; /* Цвет слайдера */
    border-radius: 50%; /* Круглая форма */
    transition: transform 0.3s ease; /* Плавный переход при изменении положения */
    z-index: 2;
}

/* Прячем чекбокс, используем его только для управления свитчером */
#themeToggle {
    display: none;
}

/* Сдвиг слайдера при включенном светлом режиме */
#themeToggle:checked + .switch .slider {
    transform: translateX(30px); /* Сдвиг слайдера в правую сторону */
}

/* Иконка на свитчере (если будет добавлена) */
.switch .icon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    z-index: 1;
    pointer-events: none; /* Отключение взаимодействия с иконкой */
}

/* Цвет фона свитчера в светлом режиме */
#themeToggle:checked + .switch {
    background-color: #130f16; /* Цвет фона свитчера в светлой теме */
}