body, html {
    font-family: helvetica, arial;
    background-color: #f9f9f9;
    color: #000000;
    border-radius: 5px;
    /* Адаптивный размер шрифта */
    font-size: calc(16px + (24 - 16) * ((100vw - 320px) / (1200 - 320))); /* От 16px на маленьких до 24px на больших экранах */
    overflow-x: hidden; /* Предотвращает горизонтальную прокрутку */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    box-sizing: border-box; /* Важно для правильного расчета размеров */
}

.container {
    width: 95%; /* Занимает 90% ширины экрана */
    margin: 0 auto;
    max-width: 700px; /* Максимальная ширина контейнера */
    padding: 20px;
    background: rgba(255, 255, 255, 0.932);
    border-radius: 0px;
    box-sizing: border-box; /* Включает padding и border в ширину элемента */
    float: left;
}

#next {
    display: block; /* Убедитесь, что кнопка отображается как блок */
    margin: 0 auto; /* Центрирование кнопки */
}


h1 {
    text-align: center;
    margin-bottom: 20px; /* Увеличиваем отступ снизу */
}

.question {
    margin-bottom: 20px; /* Увеличиваем отступ между вопросами */
}

.answer {
    display: block;
    padding: 3%; /* Увеличиваем padding для удобства нажатия */
    background-color: #c9c7d6;
    border-radius: 5px;
    cursor: pointer;
    margin: 3% ; /* Увеличиваем отступы сверху и снизу */
    text-align: center;
    color: #000000;
    transition: background-color 0.2s ease-in-out; /* Плавная анимация наведения */
    box-sizing: border-box; /* Важно для правильного расчета размеров */
}

.answer:hover {
    background-color: #b7b5c7; /* Темнее при наведении */
}

.correct {
    background-color: #69e46d; /* Зеленый цвет для правильного ответа */
}

.incorrect {
    background-color: #da5452; /* Красный цвет для неправильного ответа */
}

/* Стили для кнопки "проверить" */
#next {
    display: block; /* Занимает всю ширину контейнера */
    width: 100%;
    padding: 10px; /* Увеличиваем padding для удобства нажатия */
    background-color: #d3d3d3;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
    text-align: center;
    font-size: 18px; /* Увеличиваем размер шрифта */
    box-sizing: border-box;
    transition: background-color 0.2s ease-in-out;
}

#next:hover {
    background-color: #b7b5c7; /* Темнее при наведении */
}

#finalResults {
    font-size: calc(20px + (32 - 20) * ((100vw - 320px) / (1200 - 320))); /* Адаптивный размер шрифта для результата */
    color: #9487d1; /* Цвет текста для финального результата */
    text-align: center;
    margin-top: 30px; /* Увеличиваем отступ сверху */
}

/* Медиа-запросы для адаптации под разные экраны */
@media (max-width: 768px) {
    body {
        font-size: calc(14px + (18 - 14) * ((100vw - 320px) / (768 - 320)));
    }

    .container {
        padding: 15px;
        width: 70%;
    }

    #next {
        font-size: 16px;
    }
}

@media (max-width: 481px) {
    body {
        font-size: 16px; /* Фиксированный размер шрифта на самых маленьких экранах */
    }

    .container {
    padding: 10px;
    width: 68%;
    }
}