/* style.css */

body{
  background: linear-gradient(135deg, #dcedc8, #a5d6a7);
  min-height: 100vh;

  display: flex;
  justify-content: center;
  align-items: center;

  padding: 20px;
}

.container{
  background: white;
  width: 100%;
  max-width: 700px;

  padding: 40px;

  border-radius: 15px;

  box-shadow: 0 5px 20px rgba(0,0,0,0.2);

  text-align: center;
}

h1{
  color: #1b5e20;
  margin-bottom: 10px;
}

.subtitulo{
  margin-bottom: 30px;
  color: #555;
}

.quiz-box h2{
  margin-bottom: 25px;
  color: #2e7d32;
}

.opcoes{
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.opcao{
  background-color: #2e7d32;
  color: white;

  padding: 15px;

  border-radius: 8px;

  font-size: 16px;

  transition: 0.3s;
}

.opcao:hover{
  background-color: #1b5e20;
  transform: scale(1.02);
}

#resultado{
  margin-top: 20px;
  font-size: 20px;
  font-weight: bold;
}

#proxima{
  margin-top: 25px;

  background-color: #1565c0;
  color: white;

  padding: 12px 25px;

  border-radius: 8px;

  font-size: 16px;
}

#proxima:hover{
  background-color: #0d47a1;
}

.pontuacao{
  margin-top: 30px;

  font-size: 22px;
  font-weight: bold;

  color: #1b5e20;
}

/* Responsividade */

@media(max-width: 600px){

  .container{
    padding: 25px;
  }

  h1{
    font-size: 28px;
  }

}