style.css

/*

    O arquivo do css responsavel pela estilização
    e animação do quiz de programação.

*/

*{
    margin: 0px;
    padding: 0px;
}

body{
    background-color: #ccc;
    display: absolute;
}

main{
    margin: 30px auto;
    width: 900px;
    display: flex;
    justify-content: space-between;
}

div{
    background-color: white;
    border: 1px solid #000;
    padding: 10px;
    box-shadow: 10px 10px 10px #333;
}

/* Container do placar */
#placar{
    width: 200px;
    height: 300px;
}

#placar h3{
    font-size: 30px;
    padding: 10px;
    background-color: #ccc;
    text-align: center;
    margin-bottom: 20px;
}

#placar p{
    font-size: 15px;
    padding: 5px;
    font-family: sans-serif;
}
#placar span{
    margin-left: 10px;
}

/* Container de doações */
#doacoes{
    margin-top: 30px;
    width: 200px;
    height: 250px;
}

/* Questionario é o container */
#questinario{
    width: 600px;
    height: 500px;
}

/* Pergunta é outro container */
#pergunta{
    padding: 10px;
    width: 600px;
    height: 500px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/*Lista no centro*/
#pergunta ol{
    text-align: center;
}

/* Lista das opções da pergunta */
#pergunta li{
    cursor: pointer;
    width: 500px;
    margin-left: 20px;
    transition: 0.5s;
}
#pergunta li:hover{
    background-color: #ccc;
    transition: 0.5s;
}

/* A pergunta em si */
#questao{
    font-size: 25px;
    font-family: 'Courier New', Courier, monospace;
    margin-bottom: 20px;
}

#questao_a, #questao_b, #questao_c{
    font-size: 20px;
    font-family: 'Courier New', Courier, monospace;
    margin-top: 10px;
    padding: 10px;
}

#container-botoes{
    display: flex;
    justify-content: start;
}

#confirmar, #proximo{
    background-color: lightgreen;
    color: #030;
    border: 1px solid darkgreen;
    width: 45%;
    padding: 5px 10px;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    position: relative;
    bottom: 10px;
    left: 5%;
    transition: 0.5s;
}

/*
    Configurando as pseudos classes dos botẽos
*/
#confirmar:hover{
    cursor: pointer;
}

#proximo:hover{
    cursor: pointer;
}
#proximo:disabled{
    opacity: 0.5;
    transition: 0.5s;
}


/* 
    Estilizando o Sistema de Escolha 
*/
li.escolha{
    background-color: rgb(184, 248, 248);
    border: 1px solid darkblue;
}
li.acertou{
    background-color: lightgreen;
    border: 1px solid darkgreen;
}
li.errou{
    background-color: lightcoral;
    border: 1px solid darkred;
}

/*
    Criando a classe sumir e aparecer.
*/
.sumir{
    animation: sumir 1s linear 1;
}
.aparecer{
    animation: aparecer 1s linear 1;
}

/* Cria as animações */
@keyframes sumir {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
}

@keyframes aparecer {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
}