/* Define keyframes for text color animation */
@keyframes text-color-animation {
  0%, 100% { color: #FF4A53; } /* Red color */
  33.33% { color: #F6874A; } /* Orange color */
  66.66% { color: #EDFF18; } /* Yellow color */
}

/* Define keyframes for fading between gradients */
@keyframes fade-in-out {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

/* Body styles with animated gradient background using multiple layers */
body {
  margin: 0;
  padding: 0;
  overflow: hidden; /* Prevent scrolling */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-image: linear-gradient(to bottom, #69FFB7, #66AFFF); /* Light green to blue */
  background-size: cover;
  position: relative;
  animation: fade-in-out 18s infinite linear;
}

body::before, body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  z-index: -1;
}

body::before {
  background-image: linear-gradient(to bottom, #66AFFF, #9E53FF); /* Blue to purple */
  animation: fade-in-out 18s infinite linear;
}

body::after {
  background-image: linear-gradient(to bottom, #9E53FF, #69FFB7); /* Purple to light green */
  animation: fade-in-out 18s -9s infinite linear; /* start half way through the animation cycle */
}

/* Content styles with text animation */
#content {
  position: absolute;
  text-align: center;
  font-family: 'Times New Roman', serif;
  font-weight: bold;
  font-size: 3em;
  animation: text-color-animation 4s infinite linear; /* Continuous color change */
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5); /* Black shadow for contrast */
}

/* Triangle animation container */
#triangle-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    overflow: hidden;
    z-index: 10;
}

.triangle {
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 128px 221px 128px; /* Dynamic resizing handled by JavaScript */
    border-color: transparent transparent #ffffff transparent; /* White triangle at the bottom */
    opacity: 0; /* Start and end invisible */
    transform-origin: 50% 100%;
    animation-fill-mode: forwards;
}

@keyframes grow-shrink {
    0%, 100% {
        transform: scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: scale(1) rotate(360deg);
        opacity: 1;
    }
}