/* Nulstil standardmargener og sikrer konsistent box-sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Baggrundscontainer – fylder hele skærmen */
#background {
  position: relative;
  height: 100vh; /* 100% af viewport-højden */
  overflow: hidden; /* Skjul alt der går ud over skærmen */
}

/* Baggrundsbilledet – centreret og skaleret korrekt */
#background img {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100vw; /* fyld hele viewportens bredde */
  min-height: 100vh; /* fyld hele viewportens højde */
  transform: translate(-50%, -50%); /* centrerer billedet */
  z-index: -1; /* lægger det bag alt andet */
  object-fit: cover; /* bevar proportioner men dæk hele området */
}

/* Overlay – alt indhold der vises ovenpå baggrunden */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw; /* fyld hele skærmens bredde */
  height: 100vh; /* fyld hele skærmens højde */
  display: flex;
  flex-direction: column; /* elementer stables lodret */
  justify-content: flex-start; /* start fra toppen */
  align-items: center; /* centrer vandret */
  padding-top: 5vh; /* afstand fra toppen */
  text-align: center;
}

/* Overskrifter */
.overlay h2 {
  font-family: "Exo 2", sans-serif;
  color: white;
  text-align: center;
  font-size: 60px; 
  margin-top: 10vh; /* afstand fra toppen */
}

/* Det genererede stjernenavn */
#navn {
  font-size: 100px; 
  font-family: "Exo 2", sans-serif;
  color: white;
  text-align: center;
  margin: 10vh 0; /* luft over og under teksten */
  text-shadow: 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.7); /* blød skygge for kontrast */
}

/* Generér-navn knap */
#generateBtn {
  padding: 2vh 4vw; 
  font-size: 18px; 
  font-family: "Audiowide", sans-serif;
  border: none;
  border-radius: 5vh; /* afrundede hjørner */
  background-color: #213768;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  border: 0.5vh solid #12D7E1; 
}

/* Hovereffekt på knappen */
#generateBtn:hover {
  background-color: #63B8FF;
  transform: scale(1.05);
}

/* Højre pil – neutral styling uden baggrund */
#rightArrow {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Pilebillede størrelse */
#rightArrow img {
  width: 8vw; /* responsiv størrelse */
  height: auto;
}

/* Navigation-pil container nederst */
.navigation-arrows {
  position: fixed; /* altid synlig nederst */
  bottom: 2vh; /* lidt afstand fra bunden */
  width: 100vw; /* fyld hele bredden */
  display: flex;
  justify-content: space-between; /* en pil i hver side */
  padding: 0 5vw; /* afstand fra kanterne */
  z-index: 10; /* ovenpå baggrunden men under video */
}

/* Pile generelt */
.navigation-arrows img {
  width: 8vw; /* gør pile responsive */
  height: auto;
  cursor: pointer;
}

/* Video der bruges til fade/transition */
#transitionVideo {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999; /* ligger øverst */
  object-fit: cover; /* dæk hele skærmen uden at strække */
  display: none; /* skjult som standard */
  opacity: 0; /* starter usynlig */
  pointer-events: none; /* gør at videoen ikke blokerer klik */
}