/*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; /*brødtekst font*/
    --overskrift: 'poppins', sans-serif; /*overskrift font*/
    --overskrift-tyk: 900; /*font-weight på overskrift*/
}

/*Bestemmer over body/browser + baggrundsfarve*/
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 både vandret og lodret scroll */
  touch-action: none; /* Forhindrer swipe, pinch-zoom og anden touch-adfærd på touch-skærme */
  background-color: var(--stovet); /*baggrundsfarve*/
}

/*HEADER STYLING*/
/*Tilbageknap til forside*/
.knap {
  position: absolute; /* Gør det muligt at placere knapperne i hjørnerne */
  width: 4%; /* Knappernes størrelse */
  height: auto; /* Knappernes 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 knapper i hjørne af skærmen */
.tilbage { 
  top: 1%;
  left: 1%; 
  /*placere knappen lidt fra toppen og lidt fra venstre - samme placering på alle sider*/
}

/*Overskrift*/
h1 {
  font-family: var(--overskrift);/*Tekstens font */
  font-weight: var(--overskrift-tyk);/*Tykkelse på fonten */
  font-size: 400%; /*tekst størrelse*/
  color: var(--hvid); /*Teksten farve*/
  text-transform: uppercase; /*Gør alle bogstver store*/
  justify-self: center; /*Centrere teksten*/
  margin-top: -1%; /*løfter teksten lidt op*/
}

/*MAIN STYLING*/
/* flexer video og quiz */
.layout {
  display: flex; /* Rækker layout (horisontal)*/
  width: 100%; 
  height: 100%;
  /*Fuld bredde og højde*/
}

/*TEKST-BILLEDER STYLING*/
/*interaktive billeder med tekst*/
.tekst-billeder{
  position: relative; /*placerer billederne relativt*/
  width: 60%; /*bredde på container*/
  max-width: 60%; /*max bredde*/
  cursor: pointer; /* Indikerer klikbarhed */
}

.tekst-billeder img{
  position: absolute; /*placerer billederne overpå hinanden*/
  left: 10%; /*forskydning fra venstre*/
  width: 100%; /*størrelsen på 100%*/
  height: auto; /*højde tilpasset bredde*/
  opacity: 0; /*usynlig som standart*/
  transition: opacity .4s ease; /*blød overgang ved skift*/
}

/* kun det aktive billede vises */
.tekst-billeder img.active{
  opacity: 1; /*synligt*/
  z-index: 1; /*placeres øverst*/
}

/* Klik‑hånd*/
.hand-pointer{
  position: absolute; /*låser håndens placering*/
  bottom: 22%; /*placering % fra bunden*/
  left: 40%; /*placerer % fra venstre*/
  width: 2%; /*størrelsen på hånden*/
  z-index: 999;/*Placerer hånden ovenpå tekstfælterne*/
  pointer-events: none; /* Kan ikke interageres med */
  animation: bounce 1.7s infinite;
}

/*hoppe animation til klik-hånd*/
@keyframes bounce{
  0%,100%{ transform: translateY(0); }
  50%   { transform: translateY(-8px); }
}

#lydBillede {
  position: absolute; /*låser håndens placering*/
  left: 8%; /*placerer % fra venstre*/
  top: 20%;/*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*/
}

/*QUIZ STYLING*/
/*styling og postionering af både billed og tekst i quiz*/
.quiz-wrapper {
  position: relative;
  width: 90%; /* Gør quizzen næsten fuld bredde */
  height: 45%; /* Begrænser højden til under halvdelen af skærmen */
  display: flex; /* Bruger flex til centrering */
  justify-content: center; /* Centrerer horisontalt */
  align-items: center; /* Centrerer vertikalt */
  bottom: 50%; /* Skubber quizzen lidt op (kan virke som margin-bottom) */
  left: 2%;
}

/*styling og postionering af selve billedet til quizboksen*/
.quizbillede {
  width: 80%; /*tilpasser bredder*/
  height: auto; /*tilpasser højde til bredde*/
}

/*styling og postionering af spørgsmål og svar + knap i quiz-contaioner*/
.quiz-container {
  position: absolute; /* Gør det muligt at placere containeren ovenpå baggrundsbilledet */
  top: 5%; /*placerer % fra toppen*/
  width: 90%; /*gør bredden % bred*/
  height: 80%; /*gør højde % høj*/
  padding: 6vh 5vw;  /* styrer afstanden mellem spørgsmålene*/
  display: flex;
  flex-direction: column; /* Elementer (spørgsmål og svar) vises under hinanden */
  justify-content: space-evenly; /* Jævnt fordelt vertikalt */
  align-items: center; /* Centrerer horisontalt */
}

/*styling og postionering af spørgsmål + svar i contaioner */
.question {
padding: 1%; /*giver lidt padding på alle sider*/
width: 100%; /*fuld bredde*/
max-width: 100%; /*tilladeer fuld bredde*/
text-align: center;/*Centere teksten*/
color: var(--hvid); /*tekst farve*/
flex-wrap: wrap; /* Hvis der er mange svar-knapper, ryger de ned på ny linje */
justify-content: center;    /*centrer knapperne*/
gap: 1rem; /* Luft mellem svarene */
}

 /*styling og postionering af spørgsmål i quizzen */
.question h2 {
  margin-bottom: 0.1rem; /*afstand fra bund*/
  font-size: 90%;
  font-family: var(--overskrift);
  text-align: center;
}

 /*styling og postionering af svarmulighederne*/
  .question button {
  position: relative;
  margin: 0.1rem;/* 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;   /*HVIS DET SKAL ÆNDRES TIL VENSTRE STILLET - KIG HER*/
  left: 0;    /*HVIS DET SKAL ÆNDRES TIL VENSTRE STILLET - KIG HER*/
  }

/*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);
}

/*reset knap efter besvarelse af spørgsmål*/
#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);
}

/*BLADE STYLING*/
/*generel styling af alle blade */
.figur {
  position: absolute;
  width: 4%; 
  z-index: 0; /* bag indhold */
  pointer-events: none; /* så den ikke forstyrrer klik */
}

/*Størrelse, placering og rotation på figur 1-9*/
.figur1 {
  top: 5%;
  left: 20%;
  transform: rotate(90deg); /* Roterer med uret */
}

.figur2 {
  top: 30%;
  left: 1%;
  transform: rotate(210deg); /* Roterer med uret */
}

.figur3 {
  top: 85%;
  left: 4%;
  width: 6%; /*Ændre på nogle af størrelserne så der er forskel*/
}

.figur4 {
  top: 30%;
  left: 45%;
  transform: rotate(90deg); /* Roterer med uret */
}

.figur5 {
  top: 87%;
  left: 30%;
  transform: rotate(90deg); /* Roterer med uret */
  width: 2.5%; /*Ændre på nogle af størrelserne så der er forskel*/
}

.figur6 {
  top: 10%;
  left: 70%;
  transform: rotate(90deg); /* Roterer med uret */
}

.figur7 {
  top: 18%;
  left: 95%;
  transform: rotate(85deg); /* Roterer med uret */
  width: 2.7%; /*Ændre på nogle af størrelserne så der er forskel*/
}

.figur8 {
  top: 50%;
  left: 95%;
  transform: rotate(320deg); /* Roterer med uret */
  width: 2.7%; /*Ændre på nogle af størrelserne så der er forskel*/
}

.figur9 {
  top: 75%;
  left: 83%;
  transform: rotate(85deg); /* Roterer med uret */
  width: 2.7%; /*Ændre på nogle af størrelserne så der er forskel*/
}

/*FOOTER STYLING*/
/*sørger for footerne er låst*/
footer{
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}

/*Figur med efterårsudklædning i footer*/
#efteraarsfigur{
  width: 10%;
  height: auto;
  display: flex;
  justify-self: center;
  margin-top: -10%;
}

/*talebobbel-billede*/
#talebobbel{
  width: 42%;
  height: auto;
  display: flex;
  padding-left: 55%;
  margin-top: -10%;
}

/*tekst ovenpå talebobbel i footer*/
.footer_tekst{
  font-family: var(--overskrift);
  font-weight: var(--overskrift-tyk);
  font-size: 85%;
  color: var(--stovet);
  text-align: center;
  display: flex;
  padding-left: 65%;
  margin-top: -7.5%;
}