body {
        background-color: #e0f7fa;
        font-family: Arial, sans-serif;
        display: flex;
        flex-direction: column; /* Organiza os elementos em coluna */
        align-items: center;
        width: 100vw;
        height: 100vh;
        margin: 0;
        background-image: url("../img/bg-quiz.png");
        background-size: 100% 100%;
        position: relative; /* Permite posicionamento absoluto */
    }
    .container {
        background-color: rgba(245, 245, 220, 0.724);
        padding: 20px 10px 10px; /* Adiciona 20px de padding no topo, 10px nas laterais e no fundo */
        width: 15%;
        height: 30%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start; /* Inicia os elementos a partir do topo do container */
        margin-top: 50px;
    }
    #question-form{
        width: 100%;
        display: flex;
        flex-direction: column; /* Organiza os itens em coluna */
        align-items: center; /* Centraliza os itens horizontalmente */
    }
    .form{
        width: 90%;
        border-radius: 10px;
        padding: 5px;
        margin: 3px;
    }
    button{
        font-size: 25px;
        margin-top: 15px;
        width: 92%;
        border-radius: 10px;
        background-color: green;
        color: #fff;
    }
    h1{
        text-align: center;
    }
    .listar{
        float: inline-start;
        text-decoration: none;
        border: 1px solid blue;
        color: blue;
        padding: 3px  10px;
        border-radius: 10px;
        box-shadow: 3px 3px 3px #979696;
    }
    @media (max-width: 768px) {
        body {
                background-image: url("../img/bg-quiz-mob.png");
            }
            .container {
                background-color: rgba(245, 245, 220, 0.724);
                padding: 20px 10px 10px; /* Adiciona 20px de padding no topo, 10px nas laterais e no fundo */
                width: 90%;
                height: 55%;
                border-radius: 10px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: flex-start; /* Inicia os elementos a partir do topo do container */
        
            }
            .listar {
                border: none;
                color: blue;
                position: absolute;
                top: 20px; /* Posiciona 10px do topo */
                left: 10px; /* Posiciona 10px da esquerda */
            }
    }