@font-face {
    font-family: Roboto;
    src: url(../assets/fonts/Roboto-Regular.ttf);
}
* {
    z-index: 1;
}
body {
    font-family: Roboto;
}
.start-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: Roboto;
    font-size: 2rem;
    font-weight: bold;
    border: hidden;
    background-color: #F6F7F7;
    transition: 0.3s;
    width: 60%;
    height: 15%;
    border-radius: 10px;
    z-index: 2;
}
.start-button:hover {
    background-color: #F0F0F0;
    width: 62%;
    height: 17%;
    cursor: pointer;
}
#questionNumber {
    font-size: 2rem;
    text-align: center;
    width: 100%!important;
}
#questionContent {
    text-align: center;
    width: 100%!important;
    font-size: larger;
}
#score-count {
    position: absolute;
    right: 3%;
    top: 3%;
    visibility: hidden;
    font-size: larger;
}
#answer-box {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
}
#answer-box p button {
    border-radius: 10px;
    background-color: #F6F7F7;
    border: hidden;
    width: 60%;
    height: fit-content;
    font-size: larger;
    padding: 2%;
    transition: 0.3s;
}
#answer-box p button:hover {
    cursor: pointer;
    width: 65%;
    background-color: #F0F0F0;
}
#result-info {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: larger;
}
#next-question button {
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 10px;
    background-color: #F6F7F7;
    border: hidden;
    width: 30%;
    height: 10%;
    font-size: larger;
    padding: 1.6%;
    transition: 0.3s;
}
#next-question button:hover {
    cursor: pointer;
    width: 35%;
    background-color: #F0F0F0;
}