body {
    background-color: #e0f7fa;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    height: 100vh;
    margin: 0;
    background-image: url("../img/bg-quiz.png");
    background-size: 100% 100%;
    position: relative;
}

.lista {
    display: block;
    margin: 10px 0;
    border-bottom: 1px solid #7e7c7c89;
    text-decoration: none;
    color: blue;
}

.listar {
    text-decoration: none;
    border: none;
    color: blue;
    height: 20px;
    position: absolute;
    top: 10px; /* Posiciona 10px do topo */
    left: 10px; /* Posiciona 10px da esquerda */
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    text-align: center;
    border: 1px solid blue;
    border-radius: 20px;
    margin-left: -35px;
    width: 50px;
}

.container {
    background-color: rgba(245, 245, 220, 0.724);
    padding: 20px 10px; /* Adiciona padding de 20px no topo e 10px nos lados */
    width: 400px;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Alinha à esquerda */
    justify-content: flex-start;
    margin-top: 50px; /* Ajusta a margem superior para 50px */
}

.checkbox-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    width: 100%;
}

.checkbox-container input {
    margin-right: 10px;
    align-self: flex-start; /* Garante que o checkbox fique à esquerda */
}
.listar{
    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; /* Adiciona padding de 20px no topo e 10px nos lados */
        width: 90%;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: flex-start; /* Alinha à esquerda */
        justify-content: flex-start;
        margin-top: 50px; /* Ajusta a margem superior para 50px */
    }

    .listar {
        border: none;
        color: blue;
        position: absolute;
        top: 10px; /* Posiciona 10px do topo */
        left: 10px; /* Posiciona 10px da esquerda */
    }

    .checkbox-container {
        display: flex;
        align-items: center;
        margin-bottom: 10px;
        width: 100%;
    }

    .checkbox-container input {
        margin-right: 10px;
        align-self: flex-start; /* Garante que o checkbox fique à esquerda */
    }
}