
body {
      background-color: #e4e8ff;
      font-family: 'Lora', cursive, sans-serif;
      padding: 20px;

    }

.jersey-10-regular {
  font-family: "Jersey 10", sans-serif;
  font-weight: 400;
  font-style: normal;
}

    /* Animation for the main title */
    @keyframes bounceInDown {
      0% {
        opacity: 0;
        transform: translateY(-200px);
      }
      60% {
        opacity: 1;
        transform: translateY(30px);
      }
      80% {
        transform: translateY(-10px);
      }
      100% {
        transform: translateY(0);
      }
    }

    /* Animation for the text */
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(20px);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* Animation for placeholders */
    @keyframes pulse {
      0% {
        box-shadow: 0 0 0 0 rgba(255, 105, 180, 0.7);
      }
      70% {
        box-shadow: 0 0 0 10px rgba(255, 105, 180, 0);
      }
      100% {
        box-shadow: 0 0 0 0 rgba(255, 105, 180, 0);
      }
    }

    /* Apply animations */
    h1 {
      color: #ff69b4;
      text-shadow: 2px 2px 4px #aaa;
      animation: bounceInDown 2s ease-in;
      font-size: 60px;
    }

    /* Animate section headers */
    h2 {
        font-size: 40px;
      animation: fadeInUp 1.5s ease-in;
    }

    /* Animate paragraphs and list items */
    p, li {
        font-size: 20px;
      animation: fadeInUp 1s ease-in;
    }

    /* Animate video placeholders */
    .video-placeholder {
      background-color: #ffd1dc;
      border: 2px dashed #ff69b4;
      border-radius: 10px;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #a0522d;
      font-weight: bold;
      margin-top: 10px;
      animation: pulse 2s infinite;
    }
 