* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    height: 100%;
    font-family: Arial, sans-serif;
}

body {
  background: #002060;
  display: flex;
  flex-direction: column;
}

.container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
}

.content {
    text-align: center;
    color: white;
    z-index: 10;
    display: flex;
    flex-direction: column;
    height: 100%;
}



footer {
    text-align: start;
    color: grey;
    z-index: 10;
    .copyright-div {
      padding-bottom: 0.5rem;
      .foot-text {
          font-size: 0.8rem;
          padding-left: 1rem;
      }
    }

}

.grid-content {
    display: grid;
    gap: 3rem;
    row-gap: 1.5rem;
    padding-bottom: 2rem;
    @media (max-width: 500px) {
      gap: 2rem;
    }
    justify-items: center;
    align-items: start;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    @media (max-width: 500px) {
        grid-template-columns: 1fr;
    }
}

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

p {
    font-size: 1.25rem;
}

.utls-logo {
  flex-grow: 1;
  /* padding-bottom: 2rem; */
  /* height: 50%; */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  svg {
      /* height: 15rem; */
      width: min(50vw, 17rem);
  }
}
.launch-cta {
  margin-top: 3rem;
  margin-bottom: 1rem;
}
.partner-logos {
  width: 100px;
  img {
    width: 100%;
  }
}

#g-thanks {
  /* padding-top: 3rem; */
  grid-column: 1 / span 3;
  grid-row: 1;
  @media (max-width: 500px) {
      grid-column: auto;
      grid-row: auto;
  }
}

.contact-button {
    margin-top: 1.5rem;
    padding: 0.5rem 1rem;
    font-size: 1rem;
    color: #002060; /* Clear text color */
    background-color: white; /* White background */
    border: 1px solid #002060; /* Optional border for definition */
    border-radius: 10px; /* Elegantly rounded corners */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.contact-button:hover {
    background-color: #002060; /* Change background on hover */
    color: white; /* Change text color on hover */
    border: 1px solid white; /* Optional border for definition */
}

#g-ipiclogo {
  width: 150px;
  grid-row: 2 / span 1;
  grid-column: 2 / span 1;
  @media (max-width: 500px) {
      grid-column: auto;
      grid-row: auto;
  }
}
#g-iraplogo {
  width: 75px;
  grid-row: 2 / span 1;
  grid-column: 1 / span 1;
  @media (max-width: 500px) {
    grid-column: auto;
    grid-row: auto;
  }
}
#g-vlablogo {
  grid-row: 2 / span 1;
  grid-column: 3 / span 1;
  @media (max-width: 500px) {
    grid-column: auto;
    grid-row: auto;
  }
}

.date {
    font-size: 1rem;
    margin-top: 1.5rem;
}

.subtle-text {
  color: grey;
    font-size: 1rem;
    margin-top: 1.5rem;
}

/* Include the 2s pause as part of animation duration */
@keyframes fillChange {
  0%   { fill: #00aeef; }
  /* 1%  { fill: #C800FF; } */
  /* 1%  { fill: turquoise; } */
  /* 1%  { fill: gold; } */
  1%  { fill: magenta; }
  /* 1%  { fill: coral; } */
  /* 80% { fill: #C800FF; } */
  /* 80% { fill: turquoise; } */
  /* 7% { fill: gold; } */
  7% { fill: magenta; }
  /* 7% { fill: coral; } */
  8% { fill: #00aeef; }
  100%   { fill: #00aeef; }
}

.cls-2 {
  opacity: 0;
  animation: blockInOut 35s ease-in-out infinite;
}

  .cls-3 {
    opacity: 0;
  }

  @keyframes blockInOut {
    0%   { opacity: 1; }
    5%   { opacity: 1; }   /* Fade in */
    80%  { opacity: 1; }   /* Stay visible */
    100% { opacity: 0; }   /* Fade out */
  }

  /* 
    Delay defines the staggered start for each block.
    Blocks later in the sprawl animate later, but also begin fading out earlier.
    The total animation is 34s:
    - 0–4s: sprawl in
    - 4–28s: fully visible
    - 28–34s: collapse out
  */

#block-1b  { animation-delay: 0.5s; animation-duration: 37s;}
#block-2b  { animation-delay: 0.6s; animation-duration: 37s;}
#block-2c  { animation-delay: 0.9s; animation-duration: 37s;}
#block-3b  { animation-delay: 0.7s; animation-duration: 37s;}
#block-3a  { animation-delay: 1.0s; animation-duration: 37s;}
#block-3c  { animation-delay: 1.1s; animation-duration: 37s;}
#block-4b  { animation-delay: 0.8s; animation-duration: 37s;}
#block-4a  { animation-delay: 1.3s; animation-duration: 37s;}
#block-4c  { animation-delay: 1.2s; animation-duration: 37s;}
#block-5b  { animation-delay: 0.9s; animation-duration: 37s;}
#block-6b  { animation-delay: 1.0s; animation-duration: 37s;}
#block-6a  { animation-delay: 1.3s; animation-duration: 37s;}
#block-6c  { animation-delay: 1.4s; animation-duration: 37s;}
#block-7b  { animation-delay: 1.1s; animation-duration: 37s;}
#block-7a  { animation-delay: 1.6s; animation-duration: 37s;}
#block-7c  { animation-delay: 1.5s; animation-duration: 37s;}
#block-8b  { animation-delay: 1.2s; animation-duration: 37s;}
#block-9b  { animation-delay: 1.3s; animation-duration: 37s;}
#block-10b  { animation-delay: 1.4s; animation-duration: 37s;}
#block-10c  { animation-delay: 1.7s; animation-duration: 37s;}
#block-11b  { animation-delay: 1.5s; animation-duration: 37s;}
#block-11a  { animation-delay: 1.8s; animation-duration: 37s;}
#block-11c  { animation-delay: 1.9s; animation-duration: 37s;}
#block-12b  { animation-delay: 1.6s; animation-duration: 37s;}
#block-12a  { animation-delay: 1.9s; animation-duration: 37s;}
#block-13b  { animation-delay: 1.7s; animation-duration: 37s;}
#block-13a  { animation-delay: 2.0s; animation-duration: 37s;}
#block-14a  { animation-delay: 2.1s; animation-duration: 37s;}
#block-15a  { animation-delay: 2.2s; animation-duration: 37s;}
#block-15b  { animation-delay: 2.3s; animation-duration: 37s;}
#block-16b  { animation-delay: 2.4s; animation-duration: 37s;}
#block-16a  { animation-delay: 2.8s; animation-duration: 37s;}
#block-16c  { animation-delay: 2.7s; animation-duration: 37s;}
#block-17b  { animation-delay: 2.5s; animation-duration: 37s;}
#block-18a  { animation-delay: 2.6s; animation-duration: 37s;}
#block-19a  { animation-delay: 2.7s; animation-duration: 37s;}
#block-20a  { animation-delay: 2.8s; animation-duration: 37s;}
#block-20b  { animation-delay: 3.0s; animation-duration: 37s;}
#block-21a  { animation-delay: 2.9s; animation-duration: 37s;}
#block-21b  { animation-delay: 3.1s; animation-duration: 37s;}
#block-21c  { animation-delay: 3.2s; animation-duration: 37s;}
#block-22a  { animation-delay: 3.0s; animation-duration: 37s;}


#tblock-1a {
  fill:#00aeef; /* original in svg */
  animation: blockInOut 37s ease-in-out 0.2s infinite,
             fillChange 37s ease-in 3.5s infinite;
}

#tblock-2a {
  fill:#00aeef; /* original in svg */
  animation: blockInOut 37s ease-in-out 0.4s infinite,
             fillChange 37s ease-in 3.75s infinite;
}

#tblock-2b {
  fill:#00aeef; /* original in svg */
  animation: blockInOut 37s ease-in-out 0.6s infinite,
             fillChange 37s ease-in 4.0s infinite;
}

#tblock-1b {
  fill:#00aeef; /* original in svg */
  animation: blockInOut 37s ease-in-out 0.8s infinite,
             fillChange 37s ease-in 4.25s infinite;
}