/*root med farve og font + bestemmelser vedrørende overskrifter*/
:root{
    /*Farver*/
    --hvid: #FFF2E1;
    --rose: #FBC6C5;
    --stovet: #D16A68;
    --blod: #610505;
    --maroon: #840A08;
    --postkasserod:#A71916;
    --lilla: #200728;

      /* Fonte */
    --brodtekst: 'lato', sans-serif;
    --brodtekst-tynd: 300;
    --brodtekst-regular: 300;
    --overskrift: 'poppins', sans-serif;
    --overskrift-tyk: 900;
}

/*  */
html, body {
  margin: 0; /* Fjerner standard margin */
  padding: 0; /* Fjerner standard padding */
  width: 100%; /* Gør elementet 100% af viewportens bredde */
  height: 100%; /* Gør elementet 100% af viewportens højde */
  overflow: hidden; /* Forhindrer scroll */
  touch-action: none; /* Forhindrer uønsket touch-interaktion */
}

/* Sætter baggrundsfarven på hele siden */
body {
  background-color: var(--rose);
}

/*TILBAGE KNAP CSS STARTER HER*/
.knap {
  position: absolute; /* Gør det muligt at placere tilbageknappen i hjørnet */
  width: 4%; /* Tilbageknappens størrelse */
  height: auto; /* Tilbageknappens størrelse */
  display: block; /* Sørger for hele billedområdet er klikbart */
  cursor: pointer; /* Gør musen til en pegende hånd ved hover */
} 

/* Placering af tilbage-knappen øverst til venstre */
 .tilbage { 
  top: 1%; 
  left: 1%; 
}

/*STYRER ALLE H1*/
h1 {
  font-family: var(--overskrift);/* Tekstens font */
  font-weight: var(--overskrift-tyk);/* Tykkelse på fonten */
  font-size: 400%; /* Tekst størrelse */
  color: var(--blod); /* Teksten farve */
  text-transform: uppercase; /* Gør alle bogstver store */
  justify-self: center; /* Centrere teksten */
  margin-top: -1%;
}

/*BAGGRUNDSFIGURER MED ROTATION - CSS STARTER HER*/
.figur {
  position: absolute; /* Giver fri placering af blomsterne i baggrunden*/
  width: 4%; /* Størrelse på blomst */
  z-index: -1; /* Sørger for at blomsterne ligger bag alt andet indhold */
  pointer-events: none; /* Sørger for at man ikke kan klikke på den, så den ikke forstyrrer andre klik */
  transition: top 2s ease, left 2s ease; /* Glidende animation ved bevægelse */
}

.figur1 {
  top: 20%; /* afstand til top*/
  left: 47%; /*afstand til venstre*/
  width: 3%; /*ændre på størrelse af figuren*/
  transform: rotate(20deg); /* Roterer med uret */
}

.figur2 {
  top: 35%;
  left: 3%;
  width: 3%; 
  transform: rotate(100deg); 
}

.figur3 {
  top: 85%;
  left: 7%;
  transform: rotate(60deg);
}

.figur4 {
  top: 73%;
  left: 60%;
  transform: rotate(30deg);
  width: 3%;
}

.figur5 {
  top: 90%;
  left: 35%;
  width: 3%; 
  transform: rotate(90deg);
}

.figur6 {
  top: 13%;
  left: 75%;
  transform: rotate(20deg);
}

.figur7 {
  top: 5%;
  left: 15%;
  transform: rotate(20deg);
}

.figur8 {
  top: 5%;
  left: 95%;
  width: 3%; 
}

.figur9 {
  top: 45%;
  left: 37%;
}

.figur10 {
  top: 80%;
  left: 95%;  
}

.figur11 {
  top: 40%;
  left: 91%;
  width: 3%; 
}

/*INDHOLD PÅ SIDEN (TEKST/BILLEDER OG QUIZ) CSS STARTER HER*/
.indhold {
  display: flex; /* Flexer indhold så det er delt op i 2 kolonner */
  position: relative;
  min-height: 700px; /* Sørger for højde nok */
}

/* INDHOLD TIL VENSTRE */
.tekst-billeder {
  position: relative;
  width: 60%; /* Gør at inholdet til venstre maks kan fylde halvdelen af skærmen */
  cursor: pointer; /* Gør musen til en pegende hånd ved hover og gør hele området klikbart */
  z-index: 1; /* så hånd kan være over */
}

/* FIGUR MED TEKST OG BILLEDER */
.tekst-billeder img {
  position: absolute;
  top: 0;
  left: 10%;
  width: 70%; /* Billederne tilpasses containerens bredde */
  height: auto;
  object-fit: contain; /* Sørger for billedet ikke bliver strukket */
  opacity: 0; /* Billeder skjules som udgangspunkt */
  transition: opacity 0.5s ease; /* Glidende overgang ved tryg/skift af billede */
  z-index: 0;
}

/* Når billedet er aktivt, vises det med højere opacitet og z-index der ligger foran de andre */
.tekst-billeder img.active {
  opacity: 1;
  z-index: 1;
}

/* HÅNDEN DER VISER AT MAN KAN TRYGGE PÅ BILLDERNE */
.hand-pointer {
  position: absolute;
  top: 75%; /* Placering af hånden */
  left: 40%; /* Placering af hånden */
  width: 2%; /* Størrelse på hånden */
  pointer-events: none;  /* Så den ikke blokerer klik */
  opacity: 0.9; /* Gør hånden lidt gennemsigtig */
  animation: pressAnimation 2s infinite ease-in-out; /* Gentaget animation så den bliver ved med at bevæge sig */
  z-index: 10;  /* Højere end billederne */
}

/* Animation – hånd der peger og trykker */
/* @keyframes bruges til at definere en CSS-animation – i dette tilfælde en animation kaldet 'pressAnimation', som får et håndikon til at bevæge sig op og ned og ændre opacitet.*/
@keyframes pressAnimation {
 /* Startposition: hånden står stille og er halvt gennemsigtig */
  0% {
    transform: translateY(0);
    opacity: 0.5;
  }
  /* Efter 30% af animationstiden: hånden hopper lidt op og bliver helt synlig */
  30% {
    transform: translateY(-10px); /* Flyt op med 10px */
    opacity: 1; /* Gør hånden helt synlig */
  }
  /* Efter 50%: hånden bevæger sig tilbage til sin udgangsposition */
  50% {
    transform: translateY(0); /* Opacity ændres ikke her – forbliver som i forrige trin */
  }
  /* Slut: hånden bliver halvt gennemsigtig igen */
  100% {
    opacity: 0.5;
  }
}

#lydBillede {
  position: absolute; /*låser håndens placering*/
  left: 7%; /*placerer % fra venstre*/
  top: 56%;/*placering % fra toppen*/
  width: 3%; /*bredde på ikon*/
  height: auto; /*højde tilpasset bredde*/
  z-index: 999;/*Placerer hånden ovenpå tekstfælterne*/
  transition: transform 0.2s; /*blødere overgang ved hover*/
  cursor: pointer; /* Gør musen til en pegende hånd ved hover */
}

#lydBillede:hover {
  transform: scale(1.20); /*scaller ikonet en smule op ved hover*/
}

/* INDHOLD TIL HØJRE */
/*Styling og postionering af både billed og tekst i quiz - flytter på det hele samlet */
.quiz-wrapper {
  position: relative;
  width: 50%;
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  left: -4%;
}

/*Styling og postionering af selve billedets størrelse til quizboksen*/
.quiz-wrapper img {
  width: 95%;
  object-fit: contain;
  position: absolute;
  top: 0;
  z-index: 0;
}

/*styling og postionering af spørgsmål og svar + knap i quiz-contaioner*/
.quiz-container {
  position: absolute;
  top: 14%;
  left: 14%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  overflow-y: auto;
}

/*styling og postionering af spørgsmål + svar i container - bruges til at kontrollere opstillingen */
.question {
padding: 3px;
width: 100%;
max-width: 100%;
text-align: center;
color: var(--hvid);
flex-wrap: wrap;
justify-content: center;
gap: 1rem;

}

/*styling og postionering af selve spørgsmålene i quizzen */
.question h2 {
  margin-bottom: 0.1rem;
  font-size: 15px;
  font-family: var(--overskrift);
  text-align: center;

}

/*styling og postionering af valgmulighederne i quizzen*/
  .question button {
  position: relative;
  margin: 0.2rem;/* styrer afstanden mellem spørgsmålene og svar*/
  padding: 0.6rem 1.2rem 0.6rem 2.2rem; /* plads til cirkel */
  font-size: 12px;
  border: none;
  border-radius: 5rem;
  cursor: pointer;
  transition: background-color 0.3s;
  background-color: var(--lilla);
  color: var(--hvid);
  text-align: center;
  left: 0;
  }

  /*styling af knap, ved korrekt svar*/
.question button.correct {
  background-color: #157938; /*En lysere verision af den grønne farve*/
  color: var(--hvid);
}

 /*styling af knap, ved forkert svar*/
.question button.incorrect {
  background-color: var(--blod);
  color: var(--hvid);
}

/* Cirklen ved spørgsmålet*/
.question button::before {
  content: "";
  position: absolute;
  left: 0.2rem; /*afstand mellem cirkel og spørgsmål*/
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--hvid);
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s, border-color 0.3s;
}

/* Cirkelen udfyldt ved klik */
.question button.selected::before {
  background-color: var(--hvid);
  border-color: var(--hvid);
}

/* Farveændring af cirkelen ved korrekt*/
.question button.correct::before {
  background-color: #0f5528; /*Den grønne farve der er brugt farven på stilken på blomsten på forårsfiguren*/;
  border-color: #0f5528; /*Den grønne farve der er brugt farven på stilken på blomsten på forårsfiguren*/
}

/* Farveændring af cirkelen ved forkert */
.question button.incorrect::before {
  background-color: var(--postkasserod);
  border-color: var(--postkasserod);
}

/* Styling og positionering af "Prøv igen / "Flot klaret" -knap */
#reset-btn {
  padding: 0.8rem 1.5rem;
  font-size: 12px;
  background-color: var(--hvid);
  border: none;
  border-radius: 5rem;
  cursor: pointer;
  font-weight: bold;
  color: var(--lilla);
  transition: background-color 0.3s;
  pointer-events: auto;
  font-family: var(--overskrift);
}

/* FOOTER CSS STARTER HER */
footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

/* Styling og placering af dråbefigur */
#foraarsfigur{
  width: 10%;
  height: auto;
  display: flex;
  justify-self: center;
  margin-top: -11%;
}

/* Styling og placering af talebobbel */
#talebobbel{
  width: 42%;
  height: auto;
  display: flex;
  padding-left: 55%;
  margin-top: -11%;
}

/* Styling og placering af tekst i talebobbel */
.footer_tekst{
  font-family: var(--overskrift);
  font-weight: var(--overskrift-tyk);
  font-size: 85%;
  color: var(--stovet);
  text-align: center;
  display: flex;
  padding-left: 67%;
  margin-top: -7.5%;
}