body {
      background: linear-gradient(120deg, #fde1d3, #e2f3f5, #c7f9cc);
      background-size: 400% 400%;
      animation: gradientMove 4s ease infinite;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: center;
    }

    @keyframes gradientMove {
      0% { background-position: 0% 50%; }
      50% { background-position: 100% 50%; }
      100% { background-position: 0% 50%; }
    }

header {
      padding-bottom: 3rem;
      animation: fadeInDown 1.2s ease;
      text-align: center;
    }

h1 {
      font-family: 'Expletus Sans', sans-serif; 
      font-weight: 1000;
      margin-bottom: 6rem;
      animation: fadeInUp 1.2s ease;
    }

p {
      font-family: 'Expletus Sans', sans-serif; 
      font-size: 1.1rem;
      color: #333;
      margin-bottom: 2rem;
      animation: fadeInUp 1.4s ease;
    }


    @keyframes fadeInUp {
      from { opacity: 0; transform: translateY(20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeInDown {
      from { opacity: 0; transform: translateY(-20px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
    }

.typewriter {
  overflow: hidden;       
  white-space: nowrap;           
  animation: typing 3s steps(40, end), blink 0.7s step-end infinite;
  text-align: center;
  animation-fill-mode: forwards;
}

@keyframes typing {
  from { width: 0%; }
  to { width: 100%; }
}