.quiz-button {
    /* min-width: fit-content; */
    /* min-height: fit-content; */

    width: 20vw;
    height: 10vh;
    min-width: 40vw;
    min-height: 10vh;
    max-height: fit-content;

    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;

    border-radius: 25vw;

    /* border-left-style: none;
    border-right-style: none; */

    border-color: orangered;
}

/* .quiz-button::after{
        width:20vw;
        height:10vh;
        content: "C";
        position:absolute;
        transform: rotate(90deg);

        border-right-style: double;
    } */

.unanswered {
    width: 20vw;
    height: 10vh;
    min-width: 25vw;
    min-height: 10vh;

    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;

    border-radius: 25vw;

    border-color: orangered;

    color: grey;
    background-color: white;
    font-weight: bold;
}

.right-answer {
    width: 20vw;
    height: 10vh;
    min-width: 25vw;
    min-height: 10vh;

    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;

    border-radius: 25vw;

    border-color: orangered;

    background-color: green;
    color: white;
    text-decoration: none;
}

.wrong-answer {
    width: 20vw;
    height: 10vh;
    min-width: 25vw;
    min-height: 10vh;

    justify-content: center;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;

    border-radius: 25vw;

    border-color: orangered;

    background-color: red;
    color: white;
    text-decoration: none;
}

.change-q-button {
    border-radius: 10;
    display: flex;
    max-width: fit-content;
    justify-content: center;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
    border-style: dashed;
    border-color: slategray;
    margin-top: 2em;
    color: orangered;
    border-color: orangered;
    /* font-size: xx-large; */
}

.fbf {
    display: grid;
    grid-template-rows: 2fr;
    grid-template-columns: 2fr 2fr;
    /* grid-gap: 2px; */
}

.question {
    justify-content: center;
    text-align: center;
    min-height: 10em;

    display: flex;
    align-items: center;

    border: 4px;
    border-radius: 25%;
    border-bottom: 10px;
    border-top: 10px;
    border-color: rgb(223, 126, 0);
    border-style: double;
}


@media screen and (max-width: 820px) {
    .fbf{
        grid-template-columns: 2fr;
    }

    .unanswered{
        width: 20vw;
        height: 10vh;
        min-width: 80vw;
        min-height: 5vh;
    }

    .right-answer{
        width: 20vw;
        height: 10vh;
        min-width: 80vw;
        min-height: 5vh;
    }

    .wrong-answer{
        width: 20vw;
        height: 10vh;
        min-width: 80vw;
        min-height: 5vh;
    }

}