html,
body {
    margin: 0;
  height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: "Gabarito", sans-serif;
    color: white;
    font-size: 45px;
    width:100%;
    height:100%;
    animation: myanimation 10s infinite;
    animation-direction: alternate;
}

h2 {
  margin: 0;
  margin-bottom: -1.5rem;
}

.subtitle {
  padding-top: 10px;
  font-size: 1.5rem;
  margin-bottom: 40px;
}

.coming-soon {
  font-size: 1rem;
  font-weight: 100;
}

@keyframes myanimation {
  0% {
    background-color: #e63946; /* Neon red, evokes vibrant radio station vibes */
  }
  25% {
    background-color: #1d3557; /* Dark navy, bringing a bit of the AI/tech future */
  }
  50% {
    background-color: #f4a261; /* Soft orange, bringing that 80s retro warmth */
  }
  75% {
    background-color: #2a9d8f; /* Aqua-green, reminiscent of 80s neon signage */
  }
  100% {
    background-color: #264653; /* Deep teal, giving the modern, sleek vibe */
  }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    body {
        font-size: 50px;
    }
  }
  
  /* Medium devices (landscape tablets, 768px and up) */
  @media only screen and (min-width: 768px) {
    body {
        font-size: 55px;
    }
  }
  
  /* Large devices (laptops/desktops, 992px and up) */
  @media only screen and (min-width: 992px) {
    body {
        font-size: 60px;
    }
  }
  
  /* Extra large devices (large laptops and desktops, 1200px and up) */
  @media only screen and (min-width: 1200px) {
    body {
        font-size: 70px;
    }
  }