body {
  background-image: url('Background.png');
  background-size: cover;          /* makes it fill the screen */
  background-position: center;     /* keeps it centered */
  background-attachment: fixed;    /* optional: makes it stay while scrolling */
  background-repeat: no-repeat;
  background-color: #0b0b0b;
  color: #d8d8d8;
  font-family: 'cursive';
  padding: 40px;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1;
}

h1 {
  color: #0b0b0b;
  text-shadow: 0 0 10px #9400d3;
  font-size: 3em;
  text-align: center;
  font-style: italic;
}

h2 {
  color: #0b0b0b;
  margin: auto;
  text-align: center;
}

p {
  font-size: 1.2em;
  line-height: 1.6;
  max-width: 800px;
  margin: auto;
  text-align: center;
}

.video-container {
  display: flex;
  justify-content: center;
  margin: auto;
}

.video-container iframe {
  width: 100%;
  max-width: 560px;
  aspect-ratio: 16 / 9;
  border: 3px solid #6a00ff; /* violet frame */
  border-radius: 15px;        /* rounded corners */
  box-shadow: 0 0 20px rgba(106, 0, 255, 0.4); /* glowing effect */
}


iframe {
  max-width: 100%;
  height: auto;
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 0.8s ease-out;
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

li {
  text-align: center;
}