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

      /* Fonte */
      --brodtekst: 'lato', sans-serif;
      --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 både vandret og lodret scroll */
  touch-action: none; /* Forhindrer swipe, pinch-zoom og anden touch-adfærd på touch-skærme */
}

body {
  background-color: var(--lilla);
}

.knap {
  position: absolute; /* Gør det muligt at placere knapperne i hjørnerne */
  width: 15%; /* 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 */
  z-index: 10; /* Sørger for at knapperne ligger over andre elementer */
} 

/* Placering af knapper i hvert hjørne af skærmen */
.menstruation { 
  top: 0; 
  left: 0; 
}

.follikulaer { 
  top: 0; 
  right: 0; 
}

.luteal { 
  bottom: 0; 
  left: 0; 
}

.aegloesning { 
  bottom: 0; 
  right: 0; 
}

/* Styling af animation når man trykker på knapperne i hjørnerne på forsiden */
.transition-overlay {
  position: fixed; /* Placeres relativt til viewporten */
  width: 100px; /* Startstørrelse på overlay */
  height: 100px; /* Startstørrelse på overlay */
  border-radius: 50%; /* Gør overlayet til en cirkel */
  transform: translate(-50%, -50%) scale(0); /* Positioneres fra midten og starter med 0 størrelse */
  transition: transform 0.7s ease-in-out, /* Animation: udvidelse af cirklen */
              background-color 0.2s; /* Farveskift går hurtigere */
  z-index: 1000; /* Ligger over alt andet på siden */
  pointer-events: none; /* Gør det ikke interaktivt – klik går igennem */
}

.transition-overlay.expand {
  transform: translate(-50%, -50%) scale(50); /* Når .expand tilføjes, udvides overlayet dramatisk */
}

#overskrift {
    fill: var(--hvid); /*Teksten farve*/
    font-family: var(--overskrift); /*Font til overskrift*/
    font-weight: var(--overskrift-tyk); /*Tykkelse på font*/
    text-transform: uppercase; /*Sørger for det er blokbogstaver*/
    font-size: 265%; /*tekst størrelse*/
    justify-self: center; /*centere teksten*/
}


/*3D FIGUR*/
  .parallax-section {
    height: 65vh; /*Sektionen fylder 50% af højden*/
    display: flex; /*Centrere indholdet med flexbox*/
    justify-content: center; 
    align-items: center; 
    position: relative;
    z-index: 1; /*Placerer figuren bagved knapperne*/
  }

  /*Størrelse på 3D figur*/
  model-viewer {
    width: 190%; /*Sætter figurens bredde på 270% af containeren - gør den derfor meget stor og skaber blikfang*/ 
    height: 190%; /*Sætter figurens højde på 270% af containeren*/
    transform: translateY(-0.5%); /*Flytter figuren lidt op*/
    transition: all 2s ease; /*Gør overgangen for at få "bolden" til at flyve tilbage mere smooth*/
    margin-top: -15%;
  }

  /*footer med figur og talebobbel*/
  footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  
  #figur{
    width: 7%;
    height: auto;
    display: flex;
    margin-left: 35%;
    margin-top: -11%;
  }
  
  #talebobbel{
    width: 36%;
    height: auto;
    display: flex;
    padding-left: 43%;
    margin-top: -8%;
  }
  
  .footer_tekst{
    font-family: var(--overskrift);
    font-weight: var(--overskrift-tyk);
    font-size: 69%;
    color: var(--stovet);
    text-align: center;
    display: flex;
    padding-left: 51%;
    margin-top: -6.3%;
  }