body,
html {
  /* Algemene opmaak-*/
  height: 100%;
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-image: url('/images/images/background.jpg');
  font-family: Arial, Helvetica, sans-serif;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Titel tekst */
.title { 
  text-align: center;
  font-weight: bold;
}

/* Container met vragen */

.container {
  width: 100%;
  max-width: 600px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background: none;
}

.card {
  margin: 1rem;
  padding: 1.5rem;
  background-color: white;
  text-align: center;
  color: inherit;
  text-decoration: none;
  border: 1px solid #eaeaea;
  border-radius: 10px;
  transition: color 0.15s ease, border-color 0.15s ease;
  min-height: 350px;
  /* Hoogte van kaart aan te passen met deze waarden */
  position: relative;

}

.card h2 {
  margin: 0 0 1rem 0;
  font-size: 1.5rem;
}

.card p {
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

/* Opmaak van de carrd opties in de vraag*/
.option-card {
  border: 1px solid #eaeaea;
  border-radius: 10px;
  padding: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.option-value {
  margin-right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}

.option-text {
  flex-grow: 1; 
  /* om beschikbare ruimte te vullen  */
}

.option-card.selected {
  background-color: #f0f0f0;
}

.option-card:hover {
  background-color: #f9f9f9;
}

/* Home button*/
.home-btn {
  position: fixed;
  top: 10px;
  left: 10px;
  font-weight: bold;
  padding: 20px;
  font-size: 15px;
  background-color: #f0f0f0;
  color: black;
  border: 1px solid #ccc;
  border-radius: 16px;
  cursor: pointer;
  z-index: 1000;
}

.home-btn:hover {
  background-color: #4CAF50;
  color: white;
}

/* Terug button */
.terug-btn {
  border-radius: 50px;
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  width: 50%;
  transition: background-color 0.3s, color 0.3s;
  /* Smooth transition voor hover effects */
}

.terug-btn:hover {
  background-color: #4CAF50;
  color: white;
}

/* Prev button Terug button patient */
.prev-btn {
  border-radius: 50px;
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  width: 50%;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px;
  /* Zorgt voor ruimte tussen de vraagcontainer en de knop */
}

.prev-btn:hover {
  background-color: #4CAF50;
  color: white;
}

/* Opnieuw berekenen knop */
.restart-btn {
  border-radius: 50px;
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px;
  font-weight: bold;
  width: 50%;
}

.restart-btn:hover {
  background-color: #01746B;
  color: white;
}

.superscript {
  font-size: 12px;
}

/* volgende knop  */
.input-next-btn {
  border-radius: 50px;
  padding: 10px 20px;
  border: 2px solid #4CAF50;
  transition: background-color 0.3s, color 0.3s;
  margin-top: 20px;
  width: 50%;
}

.input-next-btn:hover {
  background-color: #006400;
  color: white;
  cursor: pointer;
}

/*Footer */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: transparent;
  color: #133201;
  padding: 0px;
  box-sizing: border-box;
}

.logo {
  position: absolute;
  top: 10px; 
  right: 10px; 
  width: 15rem;
}

/* progress bar plaatsen */
.progress{
    height: 7px;
    background: #f8f8f8;
    border-radius: 0;
    box-shadow: none;
    margin-bottom: 30px;
    overflow: visible;
}
/* styling van de progress bar */
.progress .progress-bar{
    box-shadow: none;
    border-radius: 0;
    position: relative;
    -webkit-animation: animate-positive 2s;
    animation: animate-positive 2s;
}
/* decoratieve elementen toevoegen aan de before en after progress bar */
.progress .progress-bar:before,
.progress .progress-bar:after{
    content: "";
    width: 20px;  
    height: 20px;
    background: #133201;
    position: absolute;
    top: -1px;
    right: 16px;
    transform: rotate(45deg);
}
/* een border voor de decoratieve element */
.progress .progress-bar:after{
    border: 4px solid #fff;
    position: absolute;
    right: 2px;
}
/* kleur van de progress bar */
.progress.green .progress-bar:before,
.progress.green .progress-bar:after{
    outline: 4px solid #7cb518;
}
.progress.green .progress-bar:after{
  background: #7cb518;
} 
/* animatie voor dynamisch updaten van de progress bar */
@-webkit-keyframes animate-positive{
  0%{ width: 0; }
}
@keyframes animate-positive{
  0%{ width: 0; } 
}

/* Media queries for responsive design */
/*  kleine schermen*/
@media screen and (min-width: 375px) and (max-width: 767px) {
  .footer {
    font-size: 0.5rem;
  }
}
/* medium groote  */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .footer {
    font-size: 0.75rem;
  }
}
/* deskop versie */
@media screen and (min-width: 1024px) {
  .footer {
    font-size: 1.5rem;
  }
}