/* Reset */
@import url('https://fonts.googleapis.com/css2?family=Alkatra:wght@400..700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Metamorphous&display=swap');
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  body, html {
    height: 100%;
    font-family: "Alkatra", system-ui;
    background: #0b0b0b; /* Fallback color */
    color: wheat;
  }
  
  /* Full-screen Landing Section */
  .landing {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    
    overflow: hidden;
    position: relative;
    color: wheat;
    padding: 20px;
  }
  
  .video-container {
    position: absolute;
    top: 0;
    left: 3px;
    width: 98vw;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
    border: 5px dashed rgb(253, 81, 50);
  }

  .video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 2;
  }
  
  #backgroundVideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  
  /* Content Styling */

  .content {
    text-align: center;
    opacity: 0;
    animation: fadeIn 3s ease forwards;
    z-index: 3;
  }
  
  .welcome-text {
  font-size: 2.5rem;
  background: linear-gradient(90deg, #ff6b6b, #f7d794, #4ecdc4, #c7ecee, #ff6b6b);
  background-size: 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientAnimation 5s linear infinite;
}

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

  
  .subtitle {
    font-size: 1.5em;
    margin-top: 10px;
    color: wheat;
    opacity: 0;
    animation: fadeInText 3s ease forwards 1s;
  }
  
  /* Animations */
  @keyframes slideIn {
    from {
      transform: translateY(-50px);
      opacity: 0;
    }
    to {
      transform: translateY(0);
      opacity: 1;
    }
  }
  
  @keyframes fadeIn {
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeInText {
    to {
      opacity: 1;
    }
  }
  
  .celebration {
    position: relative;
    overflow: hidden;
  }
  
  .celeb__content {
    padding: 45px 30px;
    text-align: center;
    transform: translateY(20px); /* Slightly lower position */
    transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth transition */
  }

  .bday,
  .b_day,
  .b-day {
    max-width: 100vw; /* Ensures it doesn't exceed the viewport width */
    max-height: 50vh; /* Ensures it doesn't exceed half the viewport height */
  }

  .bday {
    position: relative;
    left: 440px;
    bottom: -446px;
  }

  .b_day {
    position: relative;
    left: -6%;
    bottom: -678px;
  }

  .b-day {
    position: relative;
    right: -514px;
    bottom: -644px;
  }

  .celebration-title {
    font-size: 2rem;
  }

  .celebration-text {
    font-size: 1.2rem;
  }
  
  .celeb__content.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Original position */
  }
  
  .celeb__content span {
    display: block; /* Each line will be treated as a block */
    opacity: 0; /* Initially hidden */
    transform: translateY(20px); /* Slightly lower position */
    transition: opacity 0.6s ease, transform 0.6s ease; /* Smooth transition */
  }
  
  .celeb__content span.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Original position */
  }
  
  .celeb__content span.visible {
    opacity: 1; /* Fully visible */
    transform: translateY(0); /* Original position */
  }
  
  .container {
    text-align: center;
}

h1 {
  font-size: 3rem;
  color: wheat;
  transition: opacity 0.5s ease-in-out;
}

.footer {
  background-color: inherit; /* Black background */
  color: inherit; /* Accent color */
  text-align: center; /* Centered text */
  padding: 20px 0; /* Top and bottom padding */
  position: relative; /* Ensure it's positioned relative */
  bottom: 0; /* Aligns the footer to the bottom of the page */
  width: 100%; /* Full width */
  font-size: 1.2rem; /* Font size */
}

.footer p {
  margin: 5px 0; /* Margin for paragraphs */
}

  
  /* Mobile Responsiveness */
  @media (max-width: 600px) {
    .welcome-text {
      font-size: 2em; /* Smaller font size for smaller screens */
    }
  
    .subtitle {
      font-size: 1.2em; /* Adjust subtitle font size */
    }
  
    .landing {
      padding: 10px; /* Add padding on mobile for spacing */
    }

    .video-container {
      left: 3px;
      width: 98vw;
    }
    
    .celeb__content {
      position: relative;
      bottom: 208px;
      text-align: left;
    }

    .bday{
      display: block;
      position: relative;
      left: 131px;
      bottom: -519px;
    }

    .b_day{
      position: relative;
      left: 21%;
      bottom: -866px;
    }

    .b-day{
      position: relative;
      left: 31%;
      bottom: 106px;
    }


  }