/* Ширина экрана 1200px и выше (для крупных экранов) */
@media (min-width: 1200px) {
    header h1 {
        font-size: 2.5em;
        font-size: clamp(16px, 4vw, 32px);
    }
    nav ul li a {
        font-size: 1.2em;
        padding: 10px 20px;
    }
    .main-content h2 {
        font-size: 2.5em;
    }
    .main-content p {
        font-size: 1.4em;
    }
}

/* Ширина экрана от 992px до 1199px (для стандартных десктопов) */
@media (max-width: 1199px) and (min-width: 992px) {
    header {
        font-size: clamp(16px, 4vw, 32px);
    }
    header h1 {
        font-size: 2em;
    }
    nav ul {
        gap: 15px;
    }
    .main-content h2 {
        font-size: 2.2em;
    }
    .main-content p {
        font-size: 1.3em;
    }
}

/* Ширина экрана от 768px до 991px (для планшетов) */
@media (max-width: 991px) and (min-width: 768px) {
    header {
        height: 70px;
    }
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
    nav ul li a {
        font-size: 1.1em;
        padding: 8px 15px;
    }
    .main-content h2 {
        font-size: 2em;
    }
    .main-content p {
        font-size: 1.2em;
    }
    .login-container,
    .edit-participant-container,
    .add-participant-container {
        max-width: 90%;
    }
}

/* Ширина экрана от 576px до 767px (для небольших планшетов и крупных телефонов) */
@media (max-width: 767px) and (min-width: 576px) {
    header {
        flex-direction: column;
        height: auto;
        text-align: center;
        padding: 10px 0;
    }
    nav ul {
        flex-direction: column;
        align-items: center;
    }
    nav ul li a {
        font-size: 1em;
        padding: 6px 12px;
    }
    .main-content h2 {
        font-size: 1.8em;
    }
    .main-content p {
        font-size: 1.1em;
    }
    .login-container,
    .edit-participant-container,
    .add-participant-container {
        max-width: 95%;
    }
}

/* Ширина экрана менее 576px (для мобильных телефонов) */
@media (max-width: 575px) {
    header {
        height: auto;
        padding: 10px 0;
    }
    header h1 {
        font-size: clamp(16px, 4vw, 32px);
    }
    nav ul {
        flex-direction: column;
        align-items: center;
        gap: 5px;
    }
    nav ul li a {
        font-size: 0.9em;
        padding: 5px 10px;
    }
    .main-content h2 {
        font-size: 1.5em;
    }
    .main-content p {
        font-size: 1em;
    }
    .profile-container {
        padding: 10px;
    }
    .login-container,
    .edit-participant-container,
    .add-participant-container {
        padding: 10px;
        max-width: 100%;
    }
    .category-list span {
        font-size: 12px;
        padding: 3px 8px;
    }
    table th,
    table td {
        font-size: 14px;
        padding: 5px;
    }
    .profile-btn {
        font-size: 14px;
        padding: 8px 15px;
    }
}

/* Ширина экрана менее 991px (для планшетов и меньше) */
@media (max-width: 991px) {
    .add-participant-container form {
        display: flex;
        flex-direction: column; /* Элементы формы располагаются в столбец */
        width: 100%; /* Форма занимает всю ширину */
    }

    .add-participant-container .form-group {
        flex: 1 1 100%; /* Каждый элемент формы занимает всю ширину */
        margin-bottom: 15px; /* Добавляем отступ снизу между элементами */
    }

    .add-participant-container .line-1,
    .add-participant-container .line-2,
    .add-participant-container .line-3 {
        display: flex;
        flex-direction: column;
}

    .add-participant-container .form-group input,
    .add-participant-container .form-group select {
        width: 100%; /* Поля ввода и выпадающие списки занимают всю ширину */
    }

    .add-participant-container .button-form {
        display: flex;
        flex-direction: column; /* Кнопки в столбик */
        gap: 10px; /* Расстояние между кнопками */
        width: 100%; /* Блок кнопок на всю ширину */
    }

    .add-participant-container .button-form button,
    .add-participant-container .button-form a {
        width: 100%; /* Кнопки и ссылки занимают всю ширину */
        text-align: center; /* Текст в кнопках по центру */
    }
}