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

body{
    margin: 0;
    padding: 0;
}

.container{
    background: url(../images/img_fundo.jpg);
    height: 150%;
    width: 100vw;
    background-size: contain, cover;
    display: flex;
    justify-content: center;
    align-items: center;
}
.pontuacao_nivel{
    display: flex;
    justify-content: center;
    font-family: 'Delius', cursive;
}
#nivel{
    height: 40px;
    width: 100px;
    text-align: center;
    font-size: 15px;
    border-radius: 10px;
    border: 0.1px solid rgb(24, 155, 231);
    background-color: rgb(14, 174, 196);
}
#pontuacao{
    height: 40px;
    width: 100px;
    text-align: center;
    font-size: 14px;
    margin-left: 10px;
    border-radius: 10px;
    border: 0.1px solid rgb(24, 155, 231);
    background-color: rgb(14, 174, 196);
}
#localQuestions{
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: 15px;
    height: 350px;
    width: 100%;
    gap: 10px;
}

#imagem{
    height: 200px;
    width: 200px;
    border: 0.1px solid rgb(24, 155, 231);
    border-radius: 15px;
    margin-left: 13.195px;
    background-color: rgb(255, 255, 255);
    margin-bottom: 10px;
}

#imagem img{
    background-position: center;
    margin-top: 10px;
    width: 100%;
}

#enunciado{
    height: auto;
    width: 390px;
    font-family: 'Delius', cursive;
    text-align:justify;
    padding: 10px;
    border-radius: 15px;
    margin-top: 10px;
    color: rgb(0, 0, 0);
    background-color: rgb(83, 198, 233);
}

.answers{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 380px;
    margin-top: 0px;
    gap: 8px;
    
}
.answers_image{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 380px;
    margin-top: 10px;
    gap: 8px;

}

.alternativa{
    text-align: center;
    padding: 5%;
    width: 80%;
    border: 0.1px solid rgb(24, 155, 231);
    border-radius: 15px;
    box-shadow: 3px 3px 10px rgb(240, 240, 240), 3px 3px 10px rgba(167, 166, 166, 0.548);
    background-color: rgb(255, 255, 255);
    font-family: 'Delius', cursive;
    font-weight: 700;
}

.alternativa_image{
    text-align: center;
    padding: 5%;
    height: 170px;
    width: 200px;
    border: transparent;
    border-radius: 15px;
    box-shadow: 3px 3px 10px rgb(240, 240, 240), 3px 3px 10px rgba(167, 166, 166, 0.548);
    background-color: rgb(255, 255, 255);
}

.primeira_linha, .segunda_linha{
    display: flex;
}
.primeira_linha > #a2, .segunda_linha > #a4{
    margin-left: 30px;
}

@media screen and (max-width: 500px) {
    .bloco{
        height: 100%;
        width: 90%;
    }

    .container{
        background-size: contain, cover;
    }

    .imagem{
        height: 140px;
    }
    #enunciado{
        font-size: 14px;
        height: auto;
        width: 300px;
    }
}
@media screen and (max-width: 300px) {

    .imagem{
        height: 140px;
    }
    #enunciado{
        font-size: 14px;
        height: auto;
        width: auto;
    }

    #localQuestions{
        height: auto;
    }
}