body {
  background: linear-gradient(to right, slateblue, lightblue);
  background-image: url('bakgrunn.jpg'); /* Legger til bakgrunnsbilde */
  background-size: cover; /* Gjør at bildet dekker hele bakgrunnen */
  background-repeat: no-repeat; /* Sørger for at bildet kun vises en gang */
  background-position: center; /* Plasserer bildet i midten */
  display: flex; /* Bruk Flebox (Flexible Box Layout) som er en CSS-Layoutmetode for å arrangere elementer i en dimensjon effektivt. Enten på rad eller kolonne. Dette gjør det enklere å sortere innhold og distribuere plass mellom elementene i en container, selv når størrelsen på elementene er ukjent eller dynamisk*/
  flex-direction: column; /* Plasserer elementene i en kolonne */*
  justify-content: center; /* Sentrer innholdet horisontalt */
  align-items: center; /*Sentrer innholdet vertikalt*/
  height: 100vh /* Sett høyden til 100% av vinduet */
  margin: 0; /*Fjern standard margin */
}

a:{
  display: inline-block; /* Sørger for at padding og margin brukes på lenkene */
  padding: 10px 20px; /* Paddingen gir rom inni lenkene */
  border: 2px solid black; /* Fargen på rammen rundt lenkene */
  background-color: lightyellow; /* Rammens bakgrunnsfarge */
  border-radius: 25px; /* Gjør boksene ovale */
  text-decoration: none; /*Fjern understreking av lenkene */
  color: inherit; /* Velg tekstfargen - Ihherit arver tekstfarge fra foreldre*/
  transition: background-color 0.3s; /* Smooth transition når bakgrunnsfargen endres på hover */
}

a:hover {
  color: aqua; /* Farge på tekst når musen er over den */
  background-color: blanchedalmond; /* Bakgrunnfarge når musen er over lenken*/
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Skugge når musen er over lenken */
  transition: transform 0.5s ease;
  transform: scale(1.05); /* Forstørrelse når musen er over lenken */
}

p {
  margin-top: 20px; /* Øker avstanden over <p> elementet */
}
h4 {
  margin-top: 20px; /* Øker avstanden over <h4> elementet */
}

.link-frame {
  disply: inline-block; /* Sørger for at padding og margin brukes på lenkene */
  padding: 10px 20px; /* Paddingen gir rom inni lenken */
  border: 2px solid black; /* Fargen på rammen rundt lenkene */
  background-color: lightyellow; /* Rammens bakgrunnsfarge */
  border-radius: 25px; /* Gjør boksene ovale */
  transition: background-color 0.3s; /* Smooth transition når bakgrunnen endres på hover */
  color: black; /* Tekstfarge */
  }
 @keyframes bounce
 {
    0%,
    20%,
    50%,
    80%,
    100%
  {
    transform: translateY(0); /* Bounce keyframe, strater og ender på samme posisjon */
  }
    40% {
      transform: translateY(10px);
    }

    60% {
      transform: translateY(-5px);
    }
  
   /* 
   
   @keyframes bounce definerer animasjonsposisjoner ved start, mellomliggende tidspunkter (20%, 50%, 80%) og slutt (100%) av animasjonssyklusen, og alle disse posisjonene på transform er sett til translateY(0), noe som betyr at elementet er på sin opprinnelige høyde. 
    
   40% og 60% definerer animasjonsposisjoner ved 40% og 60%. Ved 40% flyttes elementet 10px nedover, og ved 60% flyttes elementet 5px oppover for å skape en bounce-effekt.
   
   Positive verdier for translateY flytter elementet nedover.
   Negative verdier for translateY flytter elementet oppover.

   TranslateY() er en funksjon i CSS-transformeringer som brukes til å flytte (transformere) et element langs Y-aksen, som betyr opp eller ned.
   
   Her er en forklaring:
   translateY(n): Flytter elementet vertikalt (opp/ned) med en avstand på n.
   
   Hvis n er positiv (for eksempel translateY(10px)), flyttes elementet nedover med 10px.
   
   Hvis n er negativ (for eksempel translateY(-10px)), flyttes elementet oppover med 10px.

   Motsetningen er TranslateX(n) som flytter elementet langs X-aksen (venstre og høyre)

   Positive verdier i translateX() (for eksempel translateX(10px)) flytter elementet mot høyre.
   
   Negative verdier i translateX() (for eksempel translateX(-10px)) flytter elementet mot venstre.

   */

 }
/* Utvidet forklaring av @keyframes bounce: 

Dette definerer en CSS-animasjon kalt "bounce".
0%, 20%, 50%, 80%, 100% og som benyttes et annet sted i HTML-filen. 

Disse prosentverdiene representerer spesifikke tidspunkter innenfor animasjonens syklus (fra start til slutt). 

Ved disse tidspunktene vil transform: translateY(0) anvendes, noe som betyr at elementet forblir på sin opprinnelige vertikale plassering.

40%: Ved dette punktet, vil elementet flyttes 10px opp fra sin opprinnelige plassering, noe som skaper en høy hopp-effekt.

60%: Ved dette punktet, vil elementet flyttes 5px opp fra sin opprinnelige plassering, noe som skaper en mindre mellombounce-effekt.
Disse bevegelsene sammen bidrar til å gi en realistisk "bounce" (hopp) effekt.


*/
 .link-frame .hover-text { /* Denne styrer formateringen av hover-teksten som er bygget inn i .link-frame-klassen. */
  position: absolute; /* Absolutt posisjonert inne i .link-frame */
  top: 50%; /* Plassering midt i høyde */
  left: 50%; /* Plassering midt i bredde */
  transform: translate(-50% -50%); /* Ytterligere senrering */
  background-color: rgba(0, 0, 0, 0.7); /* Halvgjennomsiktig svart bakgunnsfarge */
  color: white; /* Hvit tekstfarge */
  padding: 10px; /* Avstand rundt teksten */
  border-radius: 10px; /* Avrundede hjørner */
  opacity: 0; /* Skjuler teksten */
  transition: opacity 0.3s; /* Smooth transition for opacity */
  pointer-events: none; /* Tillater ikke brukerinteraksjoner */
 }

 .link-frame:hover .hover-text {
  opacity: 1; /* Viser teksten når musen er over lenken */
  }

  .link-frame {
    display: inline-block; /* Sikrer at lenken behandles som en blokkelement inne i en inline-kontekst */
    padding: 10px 20px; /* Gir innvendig poltring for å skape rom inni lenken */
    border: 2px solid black; /* Legger til en svart ramme rundt lenkene */
    background-color: lightyellow; /* Setter bakgrunnsfargen til lenkenes ramme */
    border-radius: 25px; /* Gjør hjørnene på lenken avrundede og ovale */
    transition: background-color 0.3s; /* Skaper en jevn overgang når bakgrunnsfargen endres */
    color: black; /* Setter tekstfargen til svart */
  }

  /* Koden under henter den definerte @keyframes bounce og kobler de definerte verdiene og -10px og -5px*/

 @keyframes bounce {
  40%
 {
  transform: translateY(-10px); /* Skaper hopp effekt ved å flytte elementet 10px opp ved 40% av animasjonen*/
 } 
 }
 @keyframes bounce {
    60%
    {
      transform: translateY(-5px); /* Ved 60% av animasjonen , flytter elementet seg 5px oppover for å skape en mindre mellombounce effekt*/
    }
 }
 img {
  /*animation: bounce 2s infinite; ---*/ /* fjern "/*" i starten a linjen for å slå på at bildet opper opp og ned kontinuerig */
  margin-top: 20px; /* Dette vil sette avstanden mellom toppen av bildet og elementet som er over bildet til 20px */
  border-radius: 50%; /* 50% vil gjøre bilde rundt */
  margin: 20px auto; /* 20px sentreer bildet horisontalt */
 }
 img:hover {
  animation: bounce 2s infinite; /* På hover, bilde animeres med bounce effekt */
 }