/* Nulstil margin, padding og gør box-sizing nemmere at arbejde med */
* {
  margin: 0;                  /* Fjerner alle standardmarginer */
  padding: 0;                 /* Fjerner al standardpadding */
  box-sizing: border-box;     /* Inkluderer padding og border i width/height */
}

/* Baggrund container, fylder hele skærmen */
#Background {
  position: relative;         /* Gør det muligt at placere elementer absolut inde i den */
  height: 100vh;              /* Fylder hele højden af viewport */
  overflow: hidden;           /* Skjuler alt, der går udenfor containeren */
}

/* Videoen, som ligger bag overlay */
#bg-video {
  position: absolute;         /* Absolut placering i forhold til #Background */
  top: 50%;                   /* Center lodret */
  left: 50%;                  /* Center vandret */
  min-width: 100%;            /* Minimum bredde fylder hele containeren */
  min-height: 100%;           /* Minimum højde fylder hele containeren */
  width: auto;                /* Automatisk bredde for at bevare proportioner */
  height: auto;               /* Automatisk højde for at bevare proportioner */
  transform: translate(-50%, -50%); /* Flytter videoen tilbage til perfekt center */
  z-index: -1;                /* Ligger bag overlay/tekst */
  object-fit: cover;          /* Fylder containeren uden at deformere videoen */
}

/* Overlay container til tekst, knapper osv. */
.overlay {
  position: absolute;         /* Ligger ovenpå video */
  z-index: 1;                 /* Sørger for overlay ligger foran video */
  width: 100%;                /* Fylder hele bredden */
  height: 100%;               /* Fylder hele højden */
}

/* Container til knap */
#button-container {
  margin-top: 200px;          /* Afstand fra toppen af overlay */
  display: flex;              /* Brug flexbox for nem centrering */
  justify-content: center;    /* Centrerer knappen horisontalt */
}

/* Animation for teksten */
@keyframes pulseGlow {
  0% {
    text-shadow: 0 0 10px #12D7E1, 0 0 20px #12D7E1, 0 0 30px #12D7E1;
  }
  50% {
    text-shadow: 0 0 20px #12D7E1, 0 0 40px #12D7E1, 0 0 60px #12D7E1;
  }
  100% {
    text-shadow: 0 0 10px #12D7E1, 0 0 20px #12D7E1, 0 0 30px #12D7E1;
  }
}

/* Animation for knappen */
@keyframes buttonGlow {
  0% {
    box-shadow: 0 0 10px #12D7E1, 0 0 20px #12D7E1;
  }
  50% {
    box-shadow: 0 0 20px #12D7E1, 0 0 40px #12D7E1;
  }
  100% {
    box-shadow: 0 0 10px #12D7E1, 0 0 20px #12D7E1;
  }
}

/* Overskrift H1 */
h1 {
  font-family: future earth, sans-serif;   /* Specifik skrifttype */
  color: white;                            /* Hvid tekstfarve */
  text-align: center;                      /* Centrerer teksten */
  margin-top: 250px;                       /* Afstand fra toppen */
  font-size: 80px;                         /* Stor titel */
  animation: pulseGlow 2s infinite alternate; /* Animeret glow-effekt */
}

/* Knappen inde i button-container */
#button-container a {
  display: inline-block;                   /* Blokerer som inline-block */
  text-decoration: none;                   /* Fjern understregning */
  background-color: #213768;               /* Baggrundsfarve */
  color: white;                            /* Tekstfarve */
  padding: 40px 100px;                     /* Indvendig afstand */
  border-radius: 40px;                      /* Runde hjørner */
  cursor: pointer;                         /* Pointer på hover */
  font-family: 'Audiowide', sans-serif;   /* Font til knappen */
  border: 4px solid #12D7E1;              /* Blå kant */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Smooth hover */
  animation: buttonGlow 2s infinite alternate; /* Glow-animation på knappen */
}

/* Knap hover-effekt */
#button-container a:hover {
  background-color: #12D7E1;               /* Skifter farve på hover */
  border-color: white;                     /* Skifter kantfarve */
}