@media screen and (max-width: 1300px) {
    .navbar {
        padding: 2rem 8rem;
    }

    .main-content {
        margin: 0 8rem;
    }

    .result h3 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 1000px) {

    html {
        font-size: 14px;
    }

    .navbar {
        padding: 2rem 5rem;
    }
    .main-content {
        flex-direction: column;
        /* gap: 1rem; */
        padding: 0;
        margin: 2rem 5rem;
    }

    .heading-section, .topic-selection, .answers {
        width: 100%;
    }

    .topic-selection .option, .answers .option {
        width: 100%;
    }

    .topic-selection, .answers {
        justify-content: flex-start;
    }

    .result h3 {
        font-size: 3rem;
    }

    .result h2 {
        font-size: 3.5rem;
    }

    .result button {
        transform: scale(1.2);
    }
}

@media screen and (max-width: 500px) {
    .navbar {
        padding: 1rem 2rem;
    }

    .main-content {
        margin: 2rem 2rem;
        gap: 2rem;
    }

    .answers {
        height: 100%;
        /* justify-content: space-evenly; */
    }

    .welcome .heading-section h1 {
        font-size: 2rem;
        text-align: center;
    }

    .welcome .heading-section h3 {
        font-size: 1.3rem;
        text-align: center;
    }

    .navbar {
        position: relative;
    }

    .quiz-title span {
        display: none;
    }
}