:root{
    /*Farver*/
    --hvid: #FFF2E1;
    --rose: #FBC6C5;
    --støvet: #D16A68;
    --blod: #610505;
    --maroon: #840A08;
    --postkasserod:#A71916;
    --lilla: #200728;

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

body {
  background-color: var(--hvid); /*Baggrundsfarven*/
}

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

.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 hvert hjørne af skærmen */
  .tilbage { 
    top: 1%; 
    left: 1%; 
  }

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

#infographic{
    display: flex; 
    flex-direction: column; 
    width: 50%; /*Bredde på billedet*/
    height: auto; /*Højde på billedet*/
    margin-top: -3%; /*tilpasser til siden */
    margin-left: -10%; /*tilpasser til siden */
}

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

.figur {
    position: absolute; /* Gør det muligt at placere figurerne i vilkårlige positioner */
    width: 4%; /* Størrelse på figurerne */
    z-index: -1; /* bag indhold */
    pointer-events: none; /* så den ikke forstyrrer klik */
    transition: top 2s ease, left 2s ease; /* Glidende bevægelse */
  }

  .figur1 {
    top: 10%; /* afstand til top*/
    left: 37%; /*afstand til venstre*/
    width: 3%; /*ændre på størrelse af figuren*/
    transform: rotate(20deg); /* Roterer med uret */
  }
  
  .figur2 {
    top: 30%;
    left: 2%;
    transform: rotate(100deg); 
  }
  
  .figur3 {
    top: 90%; 
    left: 3%;
    width: 3%; 
    transform: rotate(60deg);
  }
  
  .figur4 {
    top: 70%;
    left: 50%;
    transform: rotate(30deg); 
  }
  
  .figur5 {
    top: 87%;
    left: 30%;
    transform: rotate(90deg); 
    width: 1%; 
  }
  
  .figur6 {
    top: 10%;
    left: 70%;
    transform: rotate(20deg); 
  }
  
  .figur7 {
    top: 5%;
    left: 15%;
    transform: rotate(20deg); 
  }
  
  .figur8 {
    top: 5%;
    left: 95%;
  }
  
  .figur9 {
    top: 30%;
    left: 45%;
  }

   /* flexer infographic og quiz */
   .layout {
    display: flex;
    width: 100%; 
    height: 100%;
  }

  /*styling og postionering af både baggundfigur og tekst i quiz*/
  .quiz-wrapper {
    position: relative;
    width: 90%; /*størrelsen på bobblen*/
    height: 45%;  
    display: flex; 
    justify-content: center; /*centrer indhold og bobbel*/
    bottom: 50px; 
  }

  /*styling og postionering af selve figuren til quizboksen*/
  .quizbillede {
    width: 80%; 
    height: auto;
    
  }

 /*styling og postionering af spørgsmål og svar + knap i quiz-contaioner*/
  .quiz-container {
    position: absolute;
    top: 5%; /* adstand til toppen*/
    height: 80%; /* styrer afstanden mellem spørgsmålene*/
    padding: 6vh 5vw;  /* styrer afstanden mellem spørgsmålene*/
    display: flex; 
    flex-direction: column; /*Gør at teksten ligger oven på hinanden*/
    justify-content: space-evenly; /*Teksten har samme afstand*/
    align-items: center; /*centrer teksten*/
    overflow-y: auto; 
  }
  
  /*styling og postionering af spørgsmål + svar i contaioner */
  .question {
  padding: 1px;
  width: 100%;
  max-width: 100%;
  text-align: center;/*centrer spørgsmålene*/
  color: var(--hvid); /*tekstens farve */
  gap: 1rem;

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

  }
  
   /*styling og postionering af valgmulighederne*/
    .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; /*ændre farve ved hover*/
    background-color: var(--lilla); /*farven på knappen*/
    color: var(--hvid); /*farven på teksten*/
    text-align: center; /*centrer teksten*/
    font-family: var(--brodtekst); /*vælger den korrekte font tils svarene */
    }
  
    /*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%); /* centrerer cirklen vertikalt */
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--hvid); /*farven på cirklen*/
    border-radius: 50%; /* gør det til en cirkel */
    background-color: transparent; /* cirklen er gennemsigtig */
    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; 
  }
  
 /* Farveændring af cirkelen ved forkert*/
  .question button.incorrect::before {
    background-color: var(--postkasserod);
    border-color: var(--postkasserod);
  }
  
  #reset-btn {
    padding: 0.8rem 1.5rem;
    font-size: 12px;
    background-color: var(--hvid); /*farven på knappen*/
    border: none; 
    border-radius: 5rem; /*Gør knappen rund*/
    cursor: pointer; 
    font-weight: bold; /*Gør teksten fed*/
    color: var(--lilla); /*farven på teksten*/
    transition: background-color 0.3s; /*ændre farve ved hover*/
    pointer-events: auto; /* gør knappen klikbar */
    font-family: var(--overskrift); /*vælger den korrekte font tils knappen */
  }

  /*Styler på den bloddråbe figuren */
  #sommerfigur{
    width: 10%; /*størrelsen på firguren */
    height: auto;
    display: flex;
    justify-self: center; /*centrer figuren*/
    margin-top: -8%; /*tilpasser til siden */
}

   /*Styler på den bloddråbe figurens taleboble */
  #talebobbel{
    width: 42%; /*størrelsen på taleboblen */
    height: auto; /*højde på taleboblen*/
    display: flex; 
    padding-left: 55%; /*tilpasser til siden */
    margin-top: -11%; /*tilpasser til siden */
  }
  
   /*Styler på den bloddråbe figurens talebobble tekst */
  .footer_tekst{
    font-family: var(--overskrift); /*Tekstens font */
    font-weight: var(--overskrift-tyk); /*Tykkelse på fonten */
    font-size: 85%; /*tekst størrelse*/
    color: var(--støvet); /*farven på teksten*/
    text-align: center; /*centrer teksten*/
    display: flex; 
    padding-left: 63%; /*tilpasser til siden */
    margin-top: -7.5%; /*tilpasser til siden */
  }