body::after {
  content: "";
  position: fixed;
  top: 0; 
  bottom: 0; 
  left: 0; 
  right: 0;
  pointer-events: none; 
  z-index: -1; 
  padding-bottom: 60vh;
  
  /* Intersecting lines in a faint, subtle red */
  background: 
    /* Top line */
    linear-gradient(to bottom, transparent 120px, rgba(255, 0, 0, 0.15) 120px, rgba(255, 0, 0, 0.15) 121px, transparent 121px),
    
    /* Bottom line */
    linear-gradient(to top, transparent 40px, rgba(255, 0, 0, 0.15) 40px, rgba(255, 0, 0, 0.15) 41px, transparent 41px),
    
    /* Left line */
    linear-gradient(to right, transparent 40px, rgba(255, 0, 0, 0.15) 40px, rgba(255, 0, 0, 0.15) 41px, transparent 41px),
    
    /* Right line */
    linear-gradient(to left, transparent 40px, rgba(255, 0, 0, 0.15) 40px, rgba(255, 0, 0, 0.15) 41px, transparent 41px);
}








/* 1. The Navbar Container */
.glass-navbar {
  position: fixed;
  top: 45px;
  left: 50%;
  transform: translateX(-50%); /* Keeps it perfectly dead-center */
  width: 65%; /* Adjust width as needed */
  max-width: 400px;
  height: 55px;
  border-radius: 30px; /* Gives it that pill/rounded rectangle shape */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9998; /* Keeps it on top of the text, just under the play button */
  
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  
}

/* 2. The Liquid Glass Background (Distorted) */
.glass-navbar::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -2;
  
  /* Applying the exact same liquid filter */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
  background-color: rgba(255, 255, 255, 0.13); 
}

/* 3. The Two-Colored Gradient Stroke */
.glass-navbar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: -1;
  pointer-events: none;
  
  /* The Gradient Colors! 
    Change the two rgba() values below to whatever you want. 
  */
  background: linear-gradient(90deg, rgba(255, 216, 216, 1), rgba(64, 0, 0, 1));
  
  /* The Mask Trick: Hollows out the inside so only a 2px stroke is left */
  padding: 1px; /* Change this number to make the stroke thicker or thinner */
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* 4. The Centralized Logo */
.nav-logo {
  position: relative;
  z-index: 10; /* Ensures the logo stays crisp and above the glass */
  color: #000; 
  font-family: inherit;
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 2px;
}

    .nav-logo img {
    width: 80px; /* Adjust size as needed */
    /* height: 24px; */
   margin-top: 10px;
    }











/* The main button container */
.glass-play-button {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  z-index: 9999; /* Ensures it stays hovering above all other elements */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: transparent;
  
  /* We removed overflow: hidden; because the ::after layer makes it unnecessary */
  
  /* Kept ONLY your outer white glow and soft drop shadow here */
  box-shadow: 
    0 0 1px 1px rgba(255, 255, 255, 0.8),
    0 8px 24px rgba(0, 0, 0, 0.05);
    
  transition: transform 0.2s ease;
}

/* Hover effect for the whole button */
.glass-play-button:hover {
  transform: translateY(-2px) scale(1.05);
}

/* The liquid glass background layer (Distorted) */
.glass-play-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: -1; /* Keeps the distortion behind the play icon */
  
  /* Your adjusted blur and distortion */
  backdrop-filter: blur(.5px);
  -webkit-backdrop-filter: blur(.2px);
  filter: url(#glass-distortion);
  -webkit-filter: url(#glass-distortion);
  
  /* Your adjusted white tint */
  background-color: rgba(255, 255, 255, 0.13); 
}

/* NEW: The Crisp Overlay (Not Distorted) */
.glass-play-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 1; /* Sits above the wavy glass but behind the icon */
  pointer-events: none; /* Let clicks pass through to the button */
  
  /* We moved YOUR exact inner shadow here! It will now be perfectly round. */
  box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.01);
}

/* The solid play icon */
.play-icon {
  width: 34px;
  height: 34px;
  fill: #400000; 
  margin-left: 4px; /* Optically centers the triangle shape */
  position: relative;
  z-index: 10;
}










main{
    margin: 100px 0;
}

/* Base styles applied to all text */
  body {
    font-family: "Just Me Again Down Here", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8rem; /* Increased for better readability with this specific font */
    line-height: 1.6;
    color: #400000;
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 41px;
    padding-bottom: 40vh;
    background-color: #F9F2DF;
  }

  /* Header styling */
  header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid #400000;
  }

  .hero-nd-pic{
      text-align: center;
  }
  .hero-nd-pic img{
      border-radius: 22px;
     
      width: 70%;
      max-width: 300px;
  }
  
  h2 {
    font-size: 2rem;
    color: #400000;
    margin: 10px 0px;
    
  }
  h6{
      margin: 0;
      padding: 0;
  }

  /* Paragraph spacing */
  p {
    margin-bottom: 40px;
  }
  .finalp{
      text-align: center;
  }

  /* The requested italic property for the span tags */
  span.italic {
    color: #C40050;
  }














/* Starting state for paragraphs (blurred, faded, and pushed down) */
p {
  margin-bottom: 20px;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  /* The transition controls the speed. 0.8s feels very cinematic */
  transition: opacity 0.8s ease-out, filter 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, filter, transform; /* Optimizes performance */
}

/* The state when the paragraph scrolls into view */
p.reveal {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}






/* The Main Outer Wrapper */
.message-box-container {
  position: relative;
  width: 70%;
  max-width: 400px; 
  margin: 60px auto 40px auto; 
  padding: 30px 24px; 
  display: flex;
  flex-direction: column; 
  
  /* Creates the soft inner background AND the gradient border outside */
  background: 
    linear-gradient(135deg, #F9EADF, #F9EADF) padding-box, 
    linear-gradient(135deg, #ff9a9e, #7a1c1c) border-box; /* Removed the accidental "DF" */
  border: 1px solid transparent; 
  border-radius: 32px; 
  
  /* box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); */
  z-index: 1;
}
.loginbox{
     padding: 15px 24px;
     
}

/* The Input Field */
.message-input {
  width: 100%;
  height: 50px;
  
  
  color: #333333; /* Changed to dark grey so the typed text is visible against the cream background */
  
  background: 
    linear-gradient(135deg, #F9F2DF, #F9F2DF) padding-box, 
    linear-gradient(135deg, #ff9a9e, #7a1c1c) border-box; /* Removed the accidental "DF" */
  border: 1px solid transparent; 
  border-radius: 40px;

  padding: 0 20px; /* Fixed the typo so text doesn't hit the edges */
  font-family: inherit; 
  font-size: 1.4rem;
  outline: none;
  resize: none; 
  line-height: 2;  /* Fixed the broken comment syntax */
  margin-bottom: 24px; 
  box-sizing: border-box;
}
.passbox{
    height: 80px;
    border-radius: 25px; 
    
}

.message-input::placeholder {
  color: #a39b9b;
  opacity: 0.8;
}

/* Centers the button */
.button-row {
  display: flex;
  justify-content: center; 
  width: 100%;
}

/* The Black Pill Button */
.message-send-btn {
  background-color: #000000; 
  border: none;
  border-radius: 40px; 
  width: 80%; 
  max-width: 280px;
  padding: 6px 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  
  color: #ffffff; /* Added the missing 'f' for pure white */
  font-family: inherit;
  font-size: 1.4rem; 
  letter-spacing: 1px;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.message-send-btn:hover {
  transform: scale(1.03);
  background-color: #222222; 
}






/* Container to keep it centered and styled */
.affection-container {
  text-align: center;
  font-size: 2rem; 
  font-family: inherit;
  color: #333;
  margin: 40px 0; 
  line-height: 1.6; /* Adds a nice, natural gap between the two lines */
}

/* Forces the line break so they stack on top of each other */
.affection-line {
  display: block; 
}
/* Adds a soft, elegant grey line exactly between the two names */
.affection-line:first-child {
  position: relative;
  padding-bottom: 20px; /* Space above the line */
  margin-bottom: 20px;  /* Space below the line */
}

/* Draws the actual line */
.affection-line:first-child::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%; /* Controls how wide the line is */
  max-width: 350px;
  height: 1px; /* Controls the thickness */
  background-color: rgba(0, 0, 0, 0.15); /* A very soft, semi-transparent grey */
}

/* The specific words that change */
.changing-name {
  color: #C40050; 
  font-weight: bold;
  opacity: 1;
  display: inline-block;
  transition: opacity 0.8s ease-in-out; 
}

/* The class we toggle with JavaScript to hide the text */
.changing-name.fade-out {
  opacity: 0;
}













/* ==========================================
   SUBTLE FALLING COMETS BACKGROUND
   ========================================== */
.comet-container {
  position: fixed; /* Keeps them locked to the screen while she scrolls */
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 1000; /* Puts it behind everything else */
  pointer-events: none; /* Ensures it never blocks her from clicking or typing */
}

.comet {
  position: absolute;
  width: 1px; /* Very thin and delicate */
  height: 120px; /* The length of the tail */
  /* Creates the fading tail using your specific F6D9CC color (RGB: 246, 217, 204) */
 background: linear-gradient(to bottom, rgba(237, 201, 185, 0) 0%, rgba(237, 201, 185, 0.998) 100%);
  border-radius: 50%;
  opacity: 0;
  transform: rotate(45deg);
  animation: fallingComet linear infinite;
}

/* The movement logic */
@keyframes fallingComet {
  0% {
    transform: rotate(45deg) translateY(-200px);
    opacity: 0;
  }
  15% {
    opacity: 0.6; /* Fades in subtly */
  }
  40% {
    opacity: 0; /* Fades out before hitting the very bottom */
  }
  100% {
    transform: rotate(45deg) translateY(1800px);
    opacity: 0;
  }
}

/* Positioning and timing for each individual comet so they fall randomly */
.comet:nth-child(1) { top: 10%; left: 80%; animation-duration: 8s; animation-delay: 0s; }
.comet:nth-child(2) { top: -10%; left: 100%; animation-duration: 12s; animation-delay: 3s; }
.comet:nth-child(3) { top: 30%; left: 110%; animation-duration: 10s; animation-delay: 6s; }
.comet:nth-child(4) { top: 5%; left: 120%; animation-duration: 14s; animation-delay: 1s; }
.comet:nth-child(5) { top: 40%; left: 90%; animation-duration: 9s; animation-delay: 8s; }

/* The 5 NEW comets */
.comet:nth-child(6) { top: 20%; left: 105%; animation-duration: 11s; animation-delay: 2s; }
.comet:nth-child(7) { top: -5%; left: 85%; animation-duration: 13s; animation-delay: 5s; }
.comet:nth-child(8) { top: 50%; left: 115%; animation-duration: 9.5s; animation-delay: 7s; }
.comet:nth-child(9) { top: 15%; left: 95%; animation-duration: 15s; animation-delay: 4s; }
.comet:nth-child(10) { top: -20%; left: 125%; animation-duration: 10.5s; animation-delay: 9s; }