/* GENERELT */
body {
  background-color: #000;
  color: white;
  font-family: 'Calibri Light', sans-serif;
  text-align: center;
  padding: 50px;
  position: relative;
  height: 100vh;
  overflow-y: scroll;
}

/* Styling af beskedboksen */
.message-box {
  position: fixed;
  top: 50%; /* Centrerer boksen vertikalt */
  right: 190px; /* Flytter boksen lidt længere til højre */
  transform: translateY(-50%); /* Justerer så boksen er præcist centreret vertikalt */
  padding: 20px;
  background-color: #ff0066;
  color: white;
  font-size: 1.2em;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  display: none;
  z-index: 1000;
}

h1 {
  font-size: 4em;
  margin-bottom: 20px;
  display: inline-block;
  font-weight: bold;
}

h1 span {
  color: white; /* Teksten skal være hvid for bedre kontrast */
}

/* Underoverskrift */
h2 {
  font-size: 2em;
  color: white; /* Startfarven (hvid) */
  animation: gradientColorChange 4s linear infinite; /* Animerer farveskift */
}

/* Farveændringsanimation */
@keyframes gradientColorChange {
  0% {
    color: #ff0066; /* Startfarve */
  }
  25% {
    color: #00ffcc; /* Midtfase farve */
  }
  50% {
    color: #ffcc00; /* Midtfase farve */
  }
  75% {
    color: #ff6600; /* Midtfase farve */
  }
  100% {
    color: #6a86d2; /* Slutfarve */
  }
}

/* Link til at gå til side2 */
h2 a {
  color: #6a86d2; /* Ændret farve */
  text-decoration: underline;
  font-size: 0.9em; /* Gør linket lidt mindre */
  margin-bottom: 10px; /* Reducerer afstanden til teksten nedenfor */
}
h3 a {
  color: #6a86d2; /* Ændret farve */
  text-decoration: underline;
  font-size: 0.9em; /* Gør linket lidt mindre */
  margin-bottom: 10px; /* Reducerer afstanden til teksten nedenfor */
}

/* Animation for gradient farveændring */
@keyframes gradientShift {
  0% {
    background: linear-gradient(45deg, #00ffcc, #ff0066);
  }
  100% {
    background: linear-gradient(45deg, #ff0066, #00ffcc);
  }
}

/* BILLEDE */
img {
  margin-top: 30px;
  max-width: 50%;
  height: auto;
  border: 2px solid #00ffcc;
  border-radius: 12px;
}

/* TEKST MED JOKE-STIL */
.joke {
  margin-top: 20px;
  font-style: italic;
  font-size: 1.3em;
  color: #aaaaaa;
}

/* LINK TIL AT GÅ TILBAGE */
.back-link {
  color: #00ffcc;
  text-decoration: underline;
  font-size: 1.2em;
  display: inline-block;
  margin-top: 60px;
}

.back-link:hover {
  color: #00ffaa;
}

/* FOOTER */
.footer {
  margin-top: auto;
  font-size: 1.2em;
  color: #aaaaaa;
}

/* Wordle container */
.wordle-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

/* Wordle række */
.wordle-row {
  display: flex;
  gap: 10px;  /* Øg afstanden mellem felterne */
  justify-content: center;
  visibility: visible; /* Alle rækker skal være synlige */
}

/* Inputfelter */
.letter {
  width: 50px;
  height: 50px;
  background-color: black;
  color: white;
  border: 3px solid gray;
  border-radius: 5px;
  text-align: center;
  font-size: 2em;
  margin: 5px; /* Mellemrum mellem inputfelterne */
  text-transform: uppercase; /* Gør bogstaverne store */
}

.letter:focus {
  border-color: #00ffaa;
  outline: none;
}

/* Disabled inputfelter (kan ikke redigeres) */
.letter:disabled {
  background-color: #333;
  cursor: not-allowed;
  pointer-events: none; /* Forhindrer interaktion */
}

/* Gæt-knappen */
#submitGuess {
  background-color: #00ffcc;
  color: black;
  border: none;
  padding: 10px 20px;
  font-size: 1.2em;
  cursor: pointer;
  border-radius: 5px;
  margin-top: 10px;
}

#submitGuess:hover {
  background-color: #00ffaa;
}

.correct {
  background-color: green !important;
  color: white;
  border: 3px solid gray;
}

.wrong-position {
  background-color: yellow !important;
  color: black;
  border: 3px solid gray;
}

.wrong-letter {
  background-color: red !important;
  color: white;
  border: 3px solid gray;
}

/* Deaktiver markøren på inaktive inputfelter */
input:disabled {
    pointer-events: none; /* Sørger for, at inaktive felter ikke kan fokuseres ved klik */
    background-color: #f0f0f0; /* Valgfri - gør inaktive inputfelter grå */
}
/* STJERNEHIMMEL */
.stars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  display: block;
}

/* ANIMATION: TWINKLE EFFEKT (LET BLINKENDE) */
@keyframes twinkle {
  0% {
    opacity: 0.6;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    opacity: 1;
  }
}

/* STJERNERNE */
.star {
  position: absolute;
  background-color: white;
  border-radius: 50%;
  opacity: 0.8;
  animation: twinkle 2s infinite alternate;
}

/* Justerede stjernepositioner */
.star:nth-child(1) { top: 5%; left: 5%; width: 3px; height: 3px; }
.star:nth-child(2) { top: 20%; left: 10%; width: 2.5px; height: 2.5px; }
.star:nth-child(3) { top: 10%; left: 80%; width: 1.5px; height: 1.5px; }
.star:nth-child(4) { top: 35%; left: 80%; width: 4px; height: 4px; }
.star:nth-child(5) { top: 45%; left: 10%; width: 3px; height: 3px; }
.star:nth-child(6) { top: 70%; left: 85%; width: 2px; height: 2px; }
.star:nth-child(7) { top: 80%; left: 15%; width: 3px; height: 3px; }
.star:nth-child(8) { top: 50%; left: 85%; width: 1.8px; height: 1.8px; }
.star:nth-child(9) { top: 60%; left: 30%; width: 2.5px; height: 2.5px; }
.star:nth-child(10) { top: 25%; left: 50%; width: 2px; height: 2px; }
.star:nth-child(11) { top: 10%; left: 80%; width: 2px; height: 2px; }
.star:nth-child(12) { top: 50%; left: 70%; width: 2.2px; height: 2.2px; }
.star:nth-child(13) { top: 45%; left: 25%; width: 2px; height: 2px; }
.star:nth-child(14) { top: 60%; left: 80%; width: 3.5px; height: 3.5px; }
.star:nth-child(15) { top: 75%; left: 5%; width: 1.8px; height: 1.8px; }
.star:nth-child(16) { top: 5%; left: 40%; width: 2.2px; height: 2.2px; }
.star:nth-child(17) { top: 35%; left: 30%; width: 2px; height: 2px; }
.star:nth-child(18) { top: 50%; left: 90%; width: 3px; height: 3px; }
.star:nth-child(19) { top: 60%; left: 75%; width: 1.5px; height: 1.5px; }
.star:nth-child(20) { top: 90%; left: 95%; width: 2px; height: 2px; }
.star:nth-child(21) { top: 70%; left: 70%; width: 2.5px; height: 2.5px; }
.star:nth-child(22) { top: 90%; left: 20%; width: 1.8px; height: 1.8px; }
.star:nth-child(23) { top: 85%; left: 35%; width: 3px; height: 3px; }
.star:nth-child(24) { top: 85%; left: 50%; width: 2px; height: 2px; }
.star:nth-child(25) { top: 90%; left: 70%; width: 2.2px; height: 2.2px; }