:root{
  --accent:#0b5ed7;--muted:#666 /*BOTAO AZUL*/

}
*{
  box-sizing:border-box
  
}

html,body{
  height:100%

}

body{                                                                                                 /*cor da letras*/
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; margin:0; color:#fff0f0; background:#324375; -webkit-font-smoothing:antialiased

}

header{
  /*cor do cabeçario*/                               /*efeito branco cabeçario*/
  background:rgb(31, 27, 27);box-shadow:0 2px 6px #ffffff;padding:15px 25px;display:flex;align-items:center;justify-content:space-between

}
header .brand{
  display:flex;gap:12px;align-items:center
}
header h1{
  font-size:18px;margin:0
}
nav a{
  margin-left:12px;text-decoration:none;color:var(--muted)
}
nav a.active{
  color:var(--accent);font-weight:600
}
main{
  max-width:980px;margin:28px auto;padding:18px;background:#202b49;border-radius:12px;box-shadow:0 6px 30px rgba(16,24,40,.04)
}

.card{
  padding:18px;border-radius:10px;background:#364b85;border:1px solid #fff0f0
}

.btn{
  display:inline-block;padding:10px 14px;border-radius:8px;text-decoration:none;border:none;background:var(--accent);color:white;cursor:pointer
}

footer{
  max-width:980px;margin:18px auto;color:var(--muted);text-align:center
}

/* Elementos do quiz */
.question{
  margin-bottom:14px
}

.answers{
  display:flex;flex-direction:column;gap:10px
}

.answer{
  padding:12px;border-radius:8px;border:1px solid #e6e9ef;cursor:pointer
}

.answer.selected{
  border-color:var(--accent);box-shadow:0 6px 18px #fff0f0 
}

.answer.correct{
  background:linear-gradient(90deg,#e6fbff,#f0fff6);border-color:#2aa65b
}

.answer.wrong{
  background:#fff0f0;border-color:#e04a4a
}

/* Responsividade */
@media (max-width:720px){
  main{margin:14px;padding:12px;border-radius:8px}
  header{padding:10px}
  nav a{margin-left:8px;font-size:14px}
}