/* Structure */
body {
  font-family: system-ui, sans-serif;
  background:#eef6ff;
  display:flex;
  justify-content:center;
  align-items:start;
  padding-top:3rem;
}

.card {
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  width:min(90%,500px);
  padding:2rem;
}

.card_about {
  background:#fff;
  border-radius:12px;
  box-shadow:0 4px 12px rgba(0,0,0,.1);
  width:min(90%,650px);
  padding:2rem;
}

/* Question */
h2 {
  margin-top:0;
  font-size:1.25rem;
}

/* Answers */
.answers {
  list-style:none;
  padding:0;
  margin:1rem 0;
}

.answers li {
  margin:.4rem 0;
  padding:.6rem .8rem;
  border:1px solid #ddd;
  border-radius:8px;
  cursor:pointer;
  transition:background .25s;
}

.answers li { cursor: pointer; } 

.answers li:hover {
  background:#f3f9ff;
}

.answers input {
  margin-right:.5rem;
}

/* Feedback colours */
.correct { background:#d1fadf; border-color:#1f7a3a; }
.incorrect { background:#ffe2e2; border-color:#a51919; }

/* Result text */
.result {
  font-weight:600;
  height:1.4rem;            /* reserve space */
}

/* Buttons */
.buttons {
  display:flex;
  gap:1rem;
  justify-content:center;
}

button {
  padding:.5rem 1.2rem;
  border:none;
  border-radius:6px;
  font-weight:400;
  cursor:pointer;
  background:#2367ff;
  color:#fff;
}

button:hover { opacity:.9; }

.bucket { font-size: 0.9rem; color: #555; margin: 0 0 .5rem 0; }


/* reset link – top-right corner 
#resetLink {
  position: fixed;
  top: 1rem;
  right: 1rem;
  left: auto;
  z-index: 999;
  font-size: .9rem;
  font-weight: 300;
  color: #2367ff;
  text-decoration: none;
}
.reset-link:hover { text-decoration: underline; }
*/

/* stats line */
.stats {
  font-size: 0.9rem;
  margin-top: 1rem;
  color: #444;
}

/* top-left horizontal menu */
.top-menu {
  position: fixed;    /*  pins the whole bar */
  top: 1rem;
  left: 1rem;
  display: flex;       /* one line */
  gap: .8rem;          /* spacing between links */
       /* keeps it above the card */
}

.top-menu a {
  font-size: .9rem;
  font-weight: 300;
  color: #2367ff;
  text-decoration: none;
}

.top-menu a:hover { text-decoration: underline; }


/* top-right link bar */
.top-right {
  position: fixed;
  top: 1rem;
  right: 1rem;
  display: flex;
  gap: .8rem;
  z-index: 999;           /* above everything */
}

.top-right a {
  font-size: .9rem;
  font-weight: 300;
  color: #2367ff;
  text-decoration: none;
}

.top-right a:hover { text-decoration: underline; }

.about .top-menu {
  position: static;      /* falls back into normal flow */
  margin: 1rem 0;        /* a bit of breathing room below */
}

.about .top-right {
  position: static;      /* falls back into normal flow */
  margin: 1rem 0;        /* a bit of breathing room below */
}