body {
    font-family: Arial, sans-serif;
    
}
.question-image,
.correction-image {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 10px auto;
}

.correction-link {
    display: inline-block;
    margin-top: 10px;
    padding: 10px 15px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    text-align: center;
}

.correction-link:hover {
    background-color: #0056b3;
}


.main-title, .question-title {
    font-weight: bold;
}

.question {
    margin-bottom: 40px;
    display: none;
}

.active {
    display: block;
}

.answer-label {
    display: block;
    margin: 10px auto;
    width: 60%;
    font-size: 18px;
    padding: 15px;
    border: 2px solid blue;
    border-radius: 50px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.3s;
}

.answer-input[type="radio"] {
    display: none;
}

.answer-label:hover {
    background-color: lightgray;
}

.answer-input[type="radio"]:checked + .answer-label {
    background-color: lightblue;
    border-color: darkblue;
}

.correct {
    background-color: lightgreen;
    border-color: green;
}

.wrong {
    background-color: lightcoral;
    border-color: red;
}

.correct-answer {
    font-weight: bold;
    color: green;
}

.hidden {
    display: none;
}

.submit-button, .next-button {
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    background-color: blue;
    color: white;
    cursor: pointer;
    transition: ease-in-out 0.2s;
}

.submit-button:hover, .next-button:hover {
    background-color: darkblue;
}

.submit-button:disabled, .next-button:disabled {
    background-color: gray;
    cursor: not-allowed;
}

#quiz-container {
    margin-top: 50px;
    
}

.next-button {
    display: none;
    margin: 0 auto; /* Centraliza horizontalmente */
    text-align: center;
}

.corpo{
    text-align: center;
}

.show-button{
    margin-top: 10px;
    padding: 10px 20px;
    font-size: 14px;
    border: none;
    border-radius: 5px;
    background-color: rgb(18, 151, 25);
    color: white;
    cursor: pointer;
    transition: ease-in-out 0.2s;
    
}

.show-button:hover{
    background-color: rgb(19, 110, 22);
}

.updiv {
    position: fixed;
    top: 10%; /* Define a posição fixa do updiv, 10% da altura da tela */
    left: 50%;
    transform: translateX(-50%);
    width: 75vw;  /* Largura fixa */
    height: 80vh; /* Altura fixa */
    background-color: rgb(240, 240, 240);
    border-radius: 3vh;
    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.3);
    z-index: 1000; /* Garante que o updiv fique acima de outros elementos */
    display: none; /* Inicia oculto */
    animation: aparecer 1s forwards; /* Aplica a animação quando for mostrado */
}


.centered-image {
    max-width: 90%; /* Aumenta o tamanho da imagem, mas mantém proporcional */
    max-height: 80%; /* Ajusta para garantir que a imagem não ocupe toda a altura */
    display: block;
    margin: 0 auto;
    position: absolute;
    top: 10%; /* Aumenta a distância entre o topo e a imagem */
    left: 50%;
    transform: translate(-50%, 0); /* Centraliza a imagem e não a sobrepõe ao botão de fechar */
}


.close-button {
    position: absolute;
    top: 1vw; /* Ajuste o espaço do botão no topo */
    left: 1vw; /* Coloca o botão no canto superior direito */
    cursor: pointer;
    border: 0;
    color: rgb(150, 150, 150);
    transition: ease-in-out 0.2s;
}


.close-button:hover {
    color: rgb(0, 0, 0);
}


.button:active{
    background-color:rgb(9, 9, 75);
}

@keyframes aparecer {
    0% {
        top: -100%; /* Começa fora da tela */
    }
    100% {
        top: 10%; /* Chega até 10% da altura da tela, abaixo da navbar */
    }
}
@media (min-width: 1920px) {
    .updiv {
        height: 70vh; /* Ajusta a altura para telas maiores */
    }

    @keyframes aparecer {
        0% {
            transform: translate(-50%, -100%); /* Ajusta para telas grandes */
        }
        100% {
            transform: translate(-50%, -0%);
        }
    }
}



/* Responsividade para tablets e telas médias (max-width: 1024px) */
@media (max-width: 1024px) {
    .updiv {
        width: 80vw; /* Ajusta a largura para tablets */
        height: 70vh;
    }

    @keyframes aparecer {
        0% {
            transform: translate(-50%, -250%);
        }
        100% {
            transform: translate(-50%, -170%);
        }
    }
}

@media (max-width: 1280px) {
    .updiv {
        width: 80vw; /* Ajusta a largura para tablets */
        height: 70vh;
    }

    @keyframes aparecer {
        0% {
            transform: translate(-50%, -250%);
        }
        100% {
            transform: translate(-50%, 0%);
        }
    }
}

/* Responsividade para celulares (max-width: 768px) */
@media (max-width: 768px) {
    .updiv {
        width: 90vw; /* Ajusta a largura para celulares */
        height: 60vh;
    }

    @keyframes aparecer {
        0% {
            transform: translate(-50%, -200%);
        }
        100% {
            transform: translate(-50%, 0%);
        }
    }
}

/* Responsividade para telas muito pequenas (max-width: 480px) */
@media (max-width: 480px) {
    .updiv {
        width: 95vw; /* Ajusta a largura para telas pequenas */
        height: 50vh;
    }

    @keyframes aparecer {
        0% {
            transform: translate(-50%, -200%);
        }
        100% {
            transform: translate(-50%, 0%);
        }
    }
}   