@import url('https://fonts.googleapis.com/css2?family=Cinzel+Decorative:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&display=swap');

.subtitle {
  font-family: 'Fixedsys', serif;
  font-size: 2rem;
  display: block;
  margin-top: 0.5em;
  color: linear-gradient(
  90deg,
  #549dcc 0%,   /* világos, izzó pink */
  #e5549f 20%,  /* élénk pink láng */
  #b2125d 45%,  /* sötét pink mag */
  #c84d8d 65%,  /* átmenet a hűvösebb tónusba */
  #549dcc 100%  /* kékes vég – hideg perem, mint a tűz lángja */
);
}

body {
  font-family: 'Cinzel Decorative', cursive;
  background: url('https://i.imgur.com/J4Ex761.png') no-repeat center center fixed;
  background-size: cover;
  color: #f85abb;
  text-align: center;
  padding: 2rem;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

h1, .subtitle {
  background: linear-gradient(
  90deg,
  #549dcc 0%,   /* világos, izzó pink */
  #e5549f 20%,  /* élénk pink láng */
  #b2125d 45%,  /* sötét pink mag */
  #c84d8d 65%,  /* átmenet a hűvösebb tónusba */
  #549dcc 100%  /* kékes vég – hideg perem, mint a tűz lángja */
);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

ul {
  list-style: none;
  padding: 0;
}

li {
  font-size: 1.4rem;
  margin: 0.5rem 0;
}

textarea {
  width: 90%;
  height: 150px;
  margin-top: 8rem;
}

#namesList {
  font-size: 1.2rem;
  margin-top: 6rem;
  color: #549dcc;
  text-shadow: 2px 2px #346280;
}

#namesList {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 12px;
  padding: 1.5rem;
  display: inline-block;
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
}

@keyframes fadeInSlow {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

#namesList li {
  opacity: 0;
  animation: fadeInSlow 1.2s ease-out forwards;
}

/* lépcsőzetes megjelenés, hogy ne egyszerre jöjjenek be */
#namesList li:nth-child(1) { animation-delay: 3s; }
#namesList li:nth-child(2) { animation-delay: 13s; }
#namesList li:nth-child(3) { animation-delay: 23s; }
#namesList li:nth-child(4) { animation-delay: 33s; }
#namesList li:nth-child(5) { animation-delay: 43s; }
#namesList li:nth-child(6) { animation-delay: 53s; }