* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #ddf6d2;
    font-family: sans-serif;
}

/* For startDiv */
.startDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
}

/* for button */
button {
    border: none;
    cursor: pointer;
}

/* For startBtn */
.startBtn {
    font-size: 20px;
    padding: 15px 40px;
    border-radius: 3px;
    background-color: #BEE4D0;
    font-weight: bold;
}

/* For active */
.startBtn:active {
    background-color: #76aa8e;
}

/* For display none */
.hidden {
    display: none;
}

/* For visible hidden */
.conceal {
    visibility: hidden;
}

/*  For display container */
.displayContainer {
    background-color: aliceblue;
    text-align: center;
    padding: 40px 30px 30px 30px;
    width: 80%;
    max-width: 1000px;
    margin: 25vh auto;
    height: 340px;

}

/* For quextion div */
.questionDiv {
    margin-bottom: 30px;

    font-weight: bolder;
}


/* For button */
.btn {
    background-color: aquamarine;
    margin-top: 80px;

}

/* For previous button */
.previousBtn {
    float: left;
}

/* For next button */
.nextBtn {
    float: right;
}

/* For previous and next button design */
.previousBtn,
.nextBtn {
    border-radius: 3px;
    background-color: #8ca899;
    padding: 10px 20px;
    font-size: 20px;
    font-weight: bold;
    color: #ffffff;

}

/* For result */

#correctResult {
    background-color: #8F87F1;

}

#wrongResult {
    background-color: #FF6363;

}

#correctResult,
#wrongResult {
    padding: 10px;
    border-radius: 5px;
    cursor: text;
    font-size: 18px;
    font-weight: bold;
    color: #ffffff;

}


/* OptionBtn design */
.optionBtn {
    background-color: #BEE4D0;
    margin: 3px;
    padding: 10px;
    border-radius: 5px;
    font-weight: bold;

}

.optionBtn:active {
    background-color: #9ebfad;
}