/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: #044781;
  text-align: center;
  font-family: "Times New Roman", serif;
  background-image: url(space-pixels-3.png);
  background-size: cover;
  margin: 0;
  padding: 0;
  height: 100%;
  position: relative;
  
}

/* Overlay to improve readability */
.background-overlay {
  background: url(blank.png) no-repeat center center;
  background-size: contain;
  opacity: 1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Dragon banner setup */
.dragon-banner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  z-index: 2;
  position: relative;
}

/* Dragon image */
.dragon {
  height: 150px;
}

/* Flip the right one */
.right-dragon {
  transform: scaleX(-1);
}

/* Marquee styling */
.marquee-text {
  flex-grow: 1;
  margin: 0 10px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid hotpink;
  border-radius: 8px;
  padding: 8px;
  position: relative;
  z-index: 2;
}

.marquee-inner-text {
  font-size: 36px;
  color: lime;
  font-weight: bold;
  text-shadow: 0 0 5px hotpink, 0 0 10px cyan;
  font-family: "Comic Sans MS", cursive;
  animation: glowPulse 2s ease-in-out infinite;
}

/* Neon pulsing effect */
@keyframes glowPulse {
  0%   { text-shadow: 0 0 5px hotpink, 0 0 10px cyan; }
  50%  { text-shadow: 0 0 15px hotpink, 0 0 30px cyan; }
  100% { text-shadow: 0 0 5px hotpink, 0 0 10px cyan; }
}

/* UFO gif styling */
.ufo-gif {
  position: relative;
  z-index: 2;
  margin: 20px auto;
  display: flex;
  justify-content: center;
}


#black-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: black;
  z-index: 9999;
  opacity: 1;
  transition: opacity 2s ease;
  pointer-events: none;
}



/* Spinning text */
.spinning-text {
  font-size: 36px;
  color: cyan;
  font-weight: bold;
  text-shadow:
    1px 1px 0 #00f,
    2px 2px 0 #0ff,
    3px 3px 0 #00f;
  animation: spin 5s linear infinite;
  transform-origin: center;
  display: inline-block;
  z-index: 2;
  position: relative;
  margin-top: 20px;
}

@keyframes spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

/* Content wrapper */
.content {
  position: relative;
  z-index: 2;
  padding: 2rem;
}