: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;
}
/*Bruges til browser*/
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

/*  */
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 */
}
  
  /*STYRER ALT GRUNDLÆGGENDE I BODY + BAGGRUNDSFARVE */
body {
  background-color: var(--blod);
  width: 100%;
  height: 100%;
  overflow: hidden;
}


/*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(--støvet); /*Teksten farve*/
    text-transform: uppercase; /*Gør alle bogstver store*/
    justify-self: center; /*Centrere teksten*/
    color: var(--rose);
    margin-top: -1%;
}
/*TILBAGE KNAP CSS STARTER HER*/
.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%; 
  }
/*BAGGRUNDSFIGURER MED ROTATION - CSS STARTER HER*/
  .figur {
    position: absolute;
    width: 4%; 
    z-index: -1; /* bag indhold */
    pointer-events: none; /* så den ikke forstyrrer klik */
    position: absolute;
    transition: top 2s ease, left 2s ease; /* Glidende 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%; 
  }
  /* flexer video og quiz */
  .layout {
    display: flex;
    width: 100%;
    height: 100%;
  }
/*VIDEO-SEKTION STARTER HER*/
  /* Venstre side - hele containeren med video og billede */
.videoside {
    width: 50%;
    height: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
/*styling og postionering af selve billedet til videoen*/
  .videobaggrund {
    width: 100%;
    height: 65%;
    margin-left: 11%;
    top: 20%;
    object-fit: contain;
    position: absolute;
    z-index: 0;
  }
/*styling og postionering af selve videoen*/
  .videooverlay {
    position: absolute;
    top: 39%;
    left: 10%;
    width: 30%;
    height: 30%;
    object-fit: cover; /* Sørger for at videoen udfylder hele området uden at forvrænges */
    z-index: 1;
    border-radius: 10px;
    pointer-events: none; /* forhindrer klik før video starter */
}
/*styling og postionering af play knap til video*/
.play-button {
    position: absolute;
    z-index: 2;
    top: 55%;
    left: 25%;
    transform: translate(-50%, -50%);
    width: 80px;  /* eller det du ønsker */
    height: 80px;
    cursor: pointer;
    transition: opacity 0.3s;
  }
  
  .play-button:hover {
   cursor: pointer;
  }
/*QUIZ-SEKTION STARTER HER*/
/*styling og postionering af både billed og tekst i quiz - flytter på det hele samlet */
  .quiz-wrapper {
    position: relative;
    width: 80%;
    height: 45%;
    display: flex;
    justify-content: center;
    align-items: center;
    left: 5%;
    margin-top: 2%;
    bottom: 10px;
  }
  /*styling og postionering af selve billedets størrelse til quizboksen*/
  .quizbillede {
    width: 78%;
    height: 78%;
  }
 /*styling og postionering af spørgsmål og svar + knap i quiz-contaioner*/
  .quiz-container {
    position: absolute;
    top: 5%;
    left: 20px;
    width: 100%;
    height: 100%;
    padding: 6vh 5vw;  /* styrer afstanden mellem spørgsmålene*/
    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: 1px;
  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: 16px;
    font-family: var(--overskrift);
    text-align: center;
  }
  
   /*styling og postionering af valgmulighederne i quizzen*/
    .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: #ffffff00;
        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;
  }
  
  /* Farveændring af cirklen 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 STARTER HER */
  
   /* GENERELT TIL FOOTER */
  .footer {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    position: relative;
    margin-left: 2rem;
  }
  
   /* Styling og postionering af "vinterfigur" */
  #vinterfigur {
    width: 10%; /*størrelsen på firguren */
    height: auto;
    display: flex;
    justify-self: center; /*centrer figuren*/
    padding-top: 2%;
  }
  
   /* Styling og postionering af talebobbel */
  #talebobbel {
    width: 42%;
    height: auto;
    position: absolute;
    left: 55%;
    bottom: 20px;
    z-index: -1;
  }
  
   /* Styling og postionering af tekst i talebobbel */
  .footer_tekst {
    position: absolute;
    padding-left: 65%;
    margin-top: -8%;
    font-family: var(--overskrift);
    font-weight: var(--overskrift-tyk);
    font-size: 85%;
    color: var(--stovet);
    text-align: center;
   
  }