/* Общие стили */
body {
    margin: 0;
    padding: 0;
    padding-bottom: 60px; /* Отступ снизу для фиксации контента над панелью */
    font-family: Arial, sans-serif;
    background-color: #000; /* Черный фон */
    color: #fff; /* Белый текст */
    text-align: center;
}

h1 {
    margin: 20px 0;
    font-size: 2.5rem;
    color: #fff; /* Белый цвет для заголовка */
}

.menu {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 50px;
}

/* Общие стили кнопок */
button {
    display: inline-flex; /* Выравнивание содержимого */
    align-items: center;
    justify-content: center;
    gap: 10px; /* Расстояние между текстом и иконкой */
    width: 300px; /* Фиксированная ширина кнопок */
    height: 50px; /* Фиксированная высота кнопок */
    margin: 5px; /* Отступы между кнопками */
    border: none;
    padding: 10px;
    font-size: 1rem;
    font-weight: bold;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.1s ease, opacity 0.1s ease;
    background-color: #333; /* Темно-серый фон по умолчанию */
    color: #fff; /* Белый текст */
}

    /* Hover эффект */
    button:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

/* Стили для основного контейнера кнопок */
.buttons-container {
    margin-bottom: 100px; /* Отступ для разделения от кнопок навигации */
}

.navigation-panel {
    position: fixed; /* Фиксация к низу экрана */
    bottom: 0;
    left: 0;
    width: 100%; /* Панель на всю ширину экрана */
    height: auto; /* Высота адаптируется к содержимому */
    display: flex; /* Горизонтальное размещение элементов */
    justify-content: center; /* Равномерное распределение */
    flex-direction: row;
    background-color: #222; /* Темный фон панели */
    border-top: 1px solid #444; /* Линия разделения */
    padding: 3px 0; /* Вертикальные отступы */
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5); /* Лёгкая тень сверху */
    z-index: 1000; /* Убедиться, что панель выше всех элементов */
    gap: 50px;
}

.nav-icon {
    text-decoration: none; /* Убираем подчеркивание */
    color: #fff; /* Белый цвет иконок */
    font-size: 28px; /* Увеличенный размер иконок */
    padding: 3px; /* Удобные отступы для нажатия */
    border-radius: 50%; /* Закругление вокруг иконки */
    transition: background-color 0.3s ease, transform 0.2s ease; /* Плавный переход */
}

    .nav-icon:hover {
        transform: scale(1.2); /* Лёгкое увеличение */
    }

    .nav-icon i {
        vertical-align: middle; /* Центрирование иконок */
    }

/* Дополнительные отступы для контейнеров кнопок */
div {
    display: flex;
    flex-direction: column; /* Кнопки располагаются вертикально */
    align-items: center; /* Центровка кнопок по горизонтали */
    gap: 0px; /* Расстояние между кнопками */
    margin-top: 10px; /* Отступ сверху */
}

/* Twitch кнопка */
.twitch-button {
    background-color: #9146FF; /* Цвет Twitch */
    color: #fff;
}

    /* Размеры иконок для Twitch */
    .twitch-button img {
        width: 24px; /* Увеличенный размер для Twitch */
        height: 24px;
    }

    .twitch-button:hover {
        transform: scale(1.1);
        opacity: 0.9;
    }

/* YouTube кнопка */
.youtube-button {
    background-color: #FF0000; /* Цвет YouTube */
    color: #fff;
}

    /* Размеры иконок для YouTube */
    .youtube-button img {
        width: 34px; /* Обычный размер для YouTube */
        height: 24px;
    }

    .youtube-button:hover {
        transform: scale(1.1);
        opacity: 0.9;
    }

/* Для мобильных устройств */
@media (max-width: 600px) {
    .menu {
        flex-direction: column;
    }
}

/* Общие стили для списков */
ul {
    list-style-type: none;
    padding: 0;
}

    ul li {
        padding: 8px;
        margin: 8px 0;
        background-color: #444;
        border-radius: 5px;
    }

        ul li a {
            color: #fff;
            text-decoration: none;
            font-weight: bold;
        }

            ul li a:hover {
                text-decoration: underline;
            }

/* Стили для таблиц */
table {
    width: 100%;
    border: none;
    margin-bottom: 20px;
    border-collapse: separate;
    border-spacing: 0; /* Для создания эффекта закругления */
}

    table thead th {
        font-weight: bold;
        text-align: left;
        border: none;
        padding: 10px 15px;
        background: #444; /* Темный фон для заголовка */
        color: #fff; /* Белый текст */
        font-size: 14px;
        border-top: 1px solid #555; /* Верхняя граница */
    }

    table tr th:first-child,
    table tr td:first-child {
        border-left: 1px solid #555;
    }

    table tr th:last-child,
    table tr td:last-child {
        border-right: 1px solid #555;
    }

    table thead tr th:first-child {
        border-radius: 10px 0 0 0; /* Закругленные углы вверху слева */
    }

    table thead tr th:last-child {
        border-radius: 0 10px 0 0; /* Закругленные углы вверху справа */
    }

    table tbody td {
        text-align: left;
        border: none;
        padding: 10px 15px;
        font-size: 14px;
        vertical-align: top;
        background: #333; /* Темный фон для ячеек */
        color: #fff; /* Белый текст */
    }

    table tbody tr:nth-child(even) {
        background: #444; /* Для четных строк */
    }

    table tbody tr:hover {
        background: #555; /* Эффект наведения */
    }

    table tbody tr:last-child td {
        border-bottom: 1px solid #555;
    }

        table tbody tr:last-child td:first-child {
            border-radius: 0 0 0 10px; /* Закругленные углы внизу слева */
        }

        table tbody tr:last-child td:last-child {
            border-radius: 0 0 10px 0; /* Закругленные углы внизу справа */
        }


/* Стили для полей ввода */
input[type="text"] {
    width: 100%; /* Растягиваем поле на всю доступную ширину */
    padding: 10px; /* Отступы внутри поля */
    background-color: #333; /* Темный фон */
    color: #fff; /* Белый текст */
    border: 1px solid #555; /* Светлый бордер */
    border-radius: 5px; /* Закругленные углы */
    font-size: 1rem; /* Размер шрифта */
    font-weight: bold; /* Полужирный шрифт */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Плавное изменение фона и бордера */
    margin-bottom: 20px; /* Отступ снизу */
}

    /* Эффект при фокусе */
    input[type="text"]:focus {
        background-color: #444; /* Светлее фон при фокусе */
        border-color: #00bfff; /* Голубая обводка при фокусе */
        outline: none; /* Убираем стандартную обводку */
    }

    /* Плейсхолдер */
    input[type="text"]::placeholder {
        color: #aaa; /* Цвет текста плейсхолдера */
        font-style: italic; /* Курсив */
    }