@keyframes galaxyBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes stars {
  from { transform: translate(0, 0); }
  to { transform: translate(100px, 100px); }
}

body {
  text-align: center;
  font-family: 'Poppins', sans-serif;
  color: #ffffff;
  margin: 0;
  padding: 20px;
  background: linear-gradient(-45deg, #0f0f1a, #1a0033, #4b0082);
  background-size: 600% 600%;
  animation: galaxyBackground 20s ease infinite;
  transition: background 1s ease, color 0.5s ease;
}

h1, h2, h3, p {
  color: #e0d4f7;
  transition: color 0.4s ease, font-size 0.3s ease;
}

button, input {
  width: 80%;
  max-width: 250px;
  padding: 12px;
  font-size: 1.2em;
  border-radius: 8px;
  border: none;
  margin: 10px 0;
  transition: background 0.4s ease, box-shadow 0.4s ease, color 0.4s ease, font-size 0.3s ease;
  color: white;
  background-color: #2d003d;
}

input {
  background: radial-gradient(circle at 20% 20%, #2d003d, #1a0033);
  box-shadow: 0 0 8px #6a0dad;
  text-align: center;
}

input::placeholder {
  color: #b799e0;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

input:focus {
  outline: none;
  box-shadow: 0 0 12px #a64dff;
  font-size: 1.25em;
}

button {
  background: radial-gradient(circle at 20% 20%, #ff8aff, #6a0dad);
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 12px #8a2be2;
  cursor: pointer;
}

button::before {
  content: "";
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
  background: repeating-radial-gradient(circle, white 1px, transparent 2px);
  opacity: 0.3;
  animation: stars 60s linear infinite;
}

button:hover {
  background-color: #a64dff;
  box-shadow: 0 0 18px #c77dff;
}

#codeContainer,
#codeText,
#input,
#playOptions,
#customCodeInput,
#enterButton,
#gameContainer {
  display: none;
}

#wordDisplay {
  font-size: 2em;
  letter-spacing: 15px;
  transition: letter-spacing 0.3s ease;
}

#wrongLetters {
  font-size: 1.2em;
  color: #ff6b6b;
  transition: color 0.3s ease;
}

@media (max-width: 600px) {
  h1 {
    font-size: 2em;
  }

  button,
  input {
    width: 90%;
  }
}

#credits {
  position: fixed;
  bottom: 7.75px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.9em;
  color: #b5aee6;
}