.btn-fb {
    background-color: #1877F2; /* Facebook Blauw */
    color: white;
    font-weight: bold;
}
.btn-fb:hover {
    background-color: #166fe5;
}

.quiz-body { text-align: center;
             padding-top: 50px;
           }
.quizgame-body {
    text-align: center;
}
.box { background: white; max-width: 500px; margin: 100px auto; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.btn { display: inline-block; margin: 10px 5px; padding: 12px 20px; color: white; text-decoration: none; border-radius: 5px; font-weight: bold; }
.btn2 { display: inline-block; margin: 10px 5px; padding: 12px 20px; color: #808080; text-decoration: none; border-radius: 5px; font-weight: bold; }

.btn-reset { background: #28a745; }

.foto-hint {
    margin:5px;
    }

.luiz-body { text-align: center;
           }

.quiz-box { background: white; max-width: 500px; margin: 30px auto; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }

.quiz-foto { max-width: 100%; height: auto; border-radius: 8px; margin: 20px 0; border: 3px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

.optie-btn { display: block; width: 100%; margin: 10px 0; padding: 12px; cursor: pointer; background: #f8f9fa; border: 1px solid #dee2e6; border-radius: 6px; font-size: 16px; transition: 0.2s; }

.optie-btn:hover { background: #ccc; color: white; }

.status { color: #6c757d; font-size: 0.9em; margin-bottom: 15px; }

.next-btn { display: inline-block; margin-top: 15px; padding: 12px 25px; background: #007bff; color: white; text-decoration: none; border-radius: 6px; font-weight: bold; }
.feedback-container { padding: 12px;}
/* Zorgt dat de box op mobiel niet tegen de randen aanplakt */
.btn3 {
  display: inline-block;
  background-color: #000;      /* Zwarte achtergrond */
  color: #fff;                 /* Witte letters */
  text-decoration: none;       /* Verwijdert de onderstreping van de link */
  border: 2px solid #333;      /* Je bestaande border */
  margin-top: 20px;
  padding: 8px 15px;
  border-radius: 15px;
  font-weight: bold;           /* Optioneel: maakt de tekst lekker leesbaar */
  transition: background 0.2s; /* Optioneel: zorgt voor een vloeiende hover-animatie */
}

/* Tip: Voeg ook een hover-effect toe zodat de knop reageert als je eroverheen typt/hovert */
.btn3:hover {
  background-color: #333;      /* Iets lichter zwart/donkergrijs bij hover */
  color: #fff;
}
@media (max-width: 600px) {
    .box, .quiz-box {
        width: 90%;
        padding: 15px;
    }
    .optie-btn {
        font-size: 18px; /* Iets groter voor makkelijker klikken met duimen */
        padding: 15px;
    }
}
/* De definitie van de animatie */
@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.75); /* Begint iets kleiner */
    }
    to {
        opacity: 1;
        transform: scale(1); /* Eindigt op ware grootte */
    }
}

/* De class die we op de box zetten */
.zoom-effect {
    animation: zoomIn 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); /* Duurt 0.4 seconden */
}
.zoom-effect2 {
    animation: zoomIn 1s ease-out; /* Duurt 0.4 seconden */
}
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease-out forwards;
}

@keyframes fadeInUp
    {
    to
        {
        opacity: 1;
        transform: translateY(0);
        }
    }