@import url('https://fonts.googleapis.com/css2?family=Fascinate&display=swap');

html{
    padding: 0;
    margin: 0;
    background-color: #317773;
}
h3{
    /* font-family: 'Courier New', Courier, monospace; */
    font-size: 90px;
}
.pointsLivesBox p{
    font-family: 'Courier New', 'Courier New', Courier, monospace;
    font-size: 30px;
}
.container{
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100vw;
    background-color: #317773;
}

.titleBox{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.questionBox{
    border: solid black 3px;
    height: 40vh;
    width: 50vw;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    border-radius: 20px;
    background-color: #E2D1F9;
    color: black;
    min-width: 380px;
}
.questionBox p{
    font-family: 'Courier New', Courier, monospace;
    font-size: 20px;
}


.pointsLivesBox {
    border-radius: 20px;
    width: 100vw;
    margin-bottom: 100px;
    height: 10vh;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
}
#answer{
    border-radius: 10px;
    padding: 10px;
}

.answerBox{
    height: 30%;
    width: 99%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.btn{
    height: 30px;
    width: 50%;
    border-radius: 10px;
    font-size: 20px;
    background-color:  rgb(34, 111, 166);
    border: 1px solid rgb(34, 111, 166);
    font-family: 'Courier New', Courier, monospace;
    cursor: pointer;
    text-align: center;
    min-width: 232px;
    color: black;
}

.btn-correct{
    height: 30px;
    width: 50%;
    background-color: green;
    font-size: 20px;
    color: white;
    border-radius: 10px;
    font-size: 20px;
    border: 1px solid green;
    font-family: 'Courier New', Courier, monospace;
    min-width: 232px;
}

.btn-wrong{
    height: 30px;
    width: 50%;
    background-color: red;
    color: white;
    border-radius: 10px;
    font-size: 20px;
    border: 1px solid red;
    font-family: 'Courier New', Courier, monospace;
    min-width: 232px;
}
@keyframes shaker {
    0%, 10%{
        transform: rotate(0);
    }
    15% {
        transform: rotate(-30deg);
    }
    20% {
        transform: rotate(20deg);
    }
    25% {
        transform: rotate(-20deg);
    }
    30%{
        transform: rotate(12deg);
    }
    35%{
        transform: rotate(-8deg);
    }
    40%, 100%{
        transform: rotate(0);
    }
}
@keyframes colors {
    0%{
        color: rgb(0, 0, 139);
    }
    60%{
        color: rgb(0, 71, 171);
    }
    65%,90%{
        color: rgb(65, 105, 225);
    }
    100%{
        color: rgb(111, 143, 175)
    }
}

.win{
    font-size: 100px;
    animation-name: huge, colors;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-direction: linear, alternate;
    display: none;
}
@keyframes huge{
    0%{
        transform: scale(1.5);
    }
    20%{
        transform: scale(1);
    }
    30%{
        transform: scale(1.5);
    }
    50%{
        transform: scale(1);
    }
    70%{
        transform: scale(1.5);
    }
    90%{
        transform: scale(1)
    }
    100%{
        transform: scale(1.5);
    }
}
@keyframes blood{
    0%{color:rgb(136, 8, 8) ;}
    60%{color:rgb(196, 30, 58) ;}
    80%{color: rgb(210, 43, 43);}
    100%{color: rgb(222, 49, 99);}
}
.lose{
    font-size: 100px;
    animation-name: shaker, blood;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    display: none;
}
#answer{
    font-family: 'Courier New', Courier, monospace;
    font-weight: bolder;
    font-size: 20px;
}

.hidden{
    display: none;
}

/* MEDIA QUERIES */

@media screen and (max-width: 600px){
    .title{
        font-size: 70px;
    }
    .answerBox{
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .btn{
        margin: 1px 0 1px 0;
    }
}


@media screen and (max-width: 467px) {
    .title{
        font-size: 60px;
    }
}

@media screen and (max-width: 401) {
    .title{
        font-size: 20px;
        font-weight: 100;
        text-align:center;
        margin: 30px 0;
    }
   
}