@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url(./header.css);

.montserrat {
    font-family: "Montserrat", sans-serif;
    font-optical-sizing: auto;
}

/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Definição de rotas padrão */

.root {
    --bg-color: #FFFF;
    --secondary-color: #E30613;
    --third-color: #a12720;

    --font-text: "Montserrat", sans-serif;
    --h1-font: 6rem;
    --h2-font: 3rem;
    --p-font: 1rem;
}

.container_banner {
    background-color: var(--bg-color);
    height: 50rem;
    width: 100%;
    display: flex;
    gap: 0.5rem;
    padding: 0.3rem;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(to Left, rgba(0, 0, 0, 0.848), rgba(0, 0, 0, 0.634)), url('../media/Background-sobre.jpeg');
    background-size: cover;
    background-position: bottom center;
}

/* Simulado */

/* Estilização da div principal da página */
.container {
    max-width: 80%;
    margin: 0 auto;
    margin-top: 3%;
    margin-bottom: 3%;
    background-color: #fefefe;
    padding: 2rem;
    border-radius: 0.5rem; 
    box-shadow: 0 0 0.625rem rgba(154, 25, 21, 0.8);
}

.container h1{
    font-family: "Montserrat", sans-serif;
    text-align: center;
    color: #1d1c1c;
    margin: 6% 2% 2% 2% ;
}

/* Estilização do título */
.question h1 {
    font-family:"Montserrat", (sans-serif);
    text-align: center;
    color: #1d1c1c;
    margin: 6% 2% 2% 2% ;
}

/* .question-text{
    width: 60ch; Ajuste conforme necessário 
   margin: 0 auto; 
}  */

.question p{
    font-family:"Montserrat", (sans-serif);
    font-size: 1rem;
    text-align: justify;
    color: #1c1c1c;
    margin: 0% 5% 1% 2%;
    /* hyphens: auto; */
    /* word-spacing: 0.1em; /* Ajuste conforme necessário  */
    /* text-align-last: /*left; ou right, center  */ 
}



/* Estilização das questões */
.question {
    font-family: "Montserrat", sans-serif;
    margin-bottom: 2rem;
}

/* Estilização do enunciado */

.question-content h2 {
    font-family:"Montserrat", (sans-serif);
    font-style: italic;
    font-size: 1.4rem;
    text-align: flex-start;
    color: #141414;
    margin: 0% 0% 2% 2%;
}

.question-content p {
    font-family:"Montserrat", (sans-serif);
    font-size: 1rem;
    font-weight: 400;
    text-align: justify;
    color: #000000;
    margin: 0% 5% 1% 2%;
}

.question-content h5 {
    font-family:"Montserrat", (sans-serif);
    font-size: 0.8rem;
    text-align: justify;
    color: #000000;
    margin: 0% 5% 1% 2%;
}

.question-instruction p{
    font-family:"Montserrat", (sans-serif);
    font-size: 1rem;
    text-align: justify;
    color: #792121;
    margin: 0% 5% 1% 2%;
}

.question-img{
    width: 50%;
    height: auto;
    margin: auto;
    justify-content: center;
}

/* Estilização de cada opção de resposta */
.option {
    margin: 2% 5% 1% 2%;
   
}

/* Estilização do botão de envio */
button {
    font-family: "Montserrat", sans-serif;
    display: block;
    width: 100%;
    padding: 1rem;
    background-color: #E30613;
    color: white;
    border: none;
    border-radius: 0.3125rem;
    font-size: 1rem;
    cursor: pointer;
}

button:hover {
    background-color: #a12720;
}

/* Estilização para o contorno de resposta correta */
label.correct {
    font-family: "Montserrat", sans-serif;
    border: 0.125rem solid green; 
    padding: 0.3125rem; 
    border-radius: 0.3125rem; 
    background-color: #e6ffed;
}

/* Estilização para o contorno de resposta incorreta */
label.incorrect {
     font-family: "Montserrat", sans-serif;
    border: 0.125rem solid red; 
    padding: 0.3125rem; 
    border-radius: 0.3125rem;
    background-color: #ffe6e6;
}

/* Estilização para a justificativa e gabarito */
.justificativa, .gabarito {
    font-family: "Montserrat", sans-serif;
    margin-top: 1rem; 
    font-size: 0.875rem; 
    color: #333;
    display: none; 
}

/* Estilização da área de gabarito */
.gabarito {
    background-color: #f9f9f9;
    padding: 1rem;
    border-radius: 0.3125rem;
}