/* Body and Background */
body {
    font-family: 'Poppins', sans-serif;
    margin: 0;
    padding: 0;
    background: linear-gradient(135deg, #01265f, #4578c4); /* Soft blues */
    color: #333;
    display: flex;
    flex-direction: column; /* Stack header, main, and footer vertically */
    min-height: 100vh; /* Ensure the body fills the viewport height */
  
  }

  #hero-banner {
    width: 100%; /* Full width */
    height: 800px; /* Adjust the height for a wide, cinematic feel */
    background-size: cover; /* Ensures the image covers the entire area */
    background-position: 50% 10%; /* Adjust vertical framing (50% horizontal, 25% down from the top) */
    background-repeat: no-repeat; /* Avoids repeating the image */
    border-radius: 10px; /* Adds smooth corners to match the design */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for depth */
  }
  
  /* Adjust the transition for smoother resizing */
  #hero-banner img {
    transition: transform 0.5s ease; /* Smoother hover effect */
  }
  
  #hero-banner:hover img {
    transform: scale(1.02); /* Slight zoom on hover */
  }
  
  /* Header */
  header {
    text-align: center;
    background: #4169e1; /* Royal blue */
    color: #fff;
    padding: 40px 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }
  
/* Main Page Header */
 header h1 {
    font-size: 3em;
    color: #ffffff; /* White for contrast */
    margin: 0;
    margin-bottom: 10px;
  }

  #dynamic-word {
    color: #ff69b4; /* Pink like my ribbon */
    font-weight: bold; /* Slight emphasis */
    transition: color 0.3s ease; /* Smooth color transition */
  }  

  /* Main Content Area */
main {
    flex: 1; /* Fills the space between header and footer */
  }
  
  #main-header p {
    font-size: 1.2em;
    color: #f0f8ff; /* Lighter white/blue tone for subtlety */
    text-align: center;
  }
  
  header p {
    font-size: 1.2em;
    margin-top: 10px;
  }
  
  /* Navigation */
  nav {
    background: #333;
    padding: 10px 0;
  }
  
  nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
  }
  
  nav ul li {
    margin: 0 20px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 1.1em;
  }
  
  nav ul li a:hover {
    color: #ff69b4; /* Pink hover effect */
  }
  
  /* Sections */
  main section {
    padding: 40px;
    margin: 20px auto;
    max-width: 900px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  main h2 {
    color: #1e90ff; /* Sky blue */
    text-align: center;
    font-size: 2em;
  }
  
  main p {
    line-height: 1.8;
  }
  
/* Gallery Section */
#gallery {
    padding: 40px;
    text-align: center;
    background: #f9f9f9;
  }
  
  #gallery h2 {
    font-size: 2.5em;
    color: #4169e1;
    margin-bottom: 20px;
  }
  
  .gallery {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
  }
  
  .gallery img {
    width: 200px;
    border-radius: 8px;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  
  .gallery img:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
/* Footer Styles */
footer {
    text-align: center;
    padding: 10px 0;
    background: #4169e1; /* Royal Blue */
    color: white;
    position: relative; /* Changed from fixed */
    bottom: 0; /* Ensure it's at the bottom of the content */
    width: 100%;
  }
  
  /* Ribbon Floating Animation */
@keyframes float {
    from {
      transform: translateY(0);
    }
    to {
      transform: translateY(-10px);
    }
  }
  
      /* Story Page Specific */
  main article {
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
    line-height: 1.8;
    font-size: 1.2em;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }
  
  nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 10px;
    background: #333;
  }
  
  nav ul li {
    margin: 0 15px;
  }
  
  nav ul li a {
    color: #fff;
    text-decoration: none;
  }
  
  nav ul li a:hover {
    color: #ff69b4; /* Pink Hover */
  }
  
/* Toggle Stories Button */
#toggle-stories {
  background: linear-gradient(135deg, #4169e1, #1e90ff); /* Smooth gradient */
  color: #ffffff; /* White text */
  border: 2px solid #1e90ff; /* Slight outline for definition */
  font-size: 1.3em; /* Keep the current font size */
  font-weight: bold; /* Keep the bold styling */
  padding: 12px 20px; /* Slightly larger padding for a fuller look */
  cursor: pointer;
  border-radius: 25px; /* Rounded edges for a pill shape */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Soft shadow */
  transition: all 0.3s ease; /* Smooth transition for hover effects */
}

/* Hover Effects */
#toggle-stories:hover {
  background: linear-gradient(135deg, #1e90ff, #63b8ff); /* Brighter gradient on hover */
  color: #f0f8ff; /* Slightly lighter text for contrast */
  border-color: #63b8ff; /* Matches hover gradient */
  transform: translateY(-2px); /* Slight lift effect */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3); /* Stronger shadow on hover */
}

/* Glow Animation (Optional) */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 4px 10px rgba(99, 184, 255, 0.5);
  }
  50% {
    box-shadow: 0 8px 20px rgba(99, 184, 255, 0.8);
  }
}

#toggle-stories:hover {
  animation: pulse 1.5s infinite; /* Pulsing effect when hovered */
}


/* Stories Container */
#stories-container {
  overflow: hidden; /* Ensures content doesn't spill during collapse */
  height: 0; /* Start fully collapsed */
  transition: height 0.5s ease; /* Smooth height adjustment */
  display: block; /* Keep a vertical layout */
  background: none; /* Remove gradient from the container */
  padding: 0 20px; /* Add horizontal padding if needed */
}

/* Stories Container (Expanded) */
#stories-container.expanded {
  height: 200px; /* Automatically adjust to content height */
  display: block; /* Ensure vertical stacking */
  padding: 20px;
  border-radius: 10px;
}

/* Individual Chapter Tiles */
#stories-container article {
  margin-bottom: 10px; /* Space between tiles */
  background: linear-gradient(to right, #4169e1, #1e90ff); /* Gradient only on tiles */
  padding: 20px;
  border-radius: 8px;
  color: #ffffff;
  text-align: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#stories-container article:hover {
  transform: scale(1.02); /* Slight zoom effect */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Highlighted shadow */
}




/* Remove Gradient from Container */
#stories-container {
  overflow: hidden; /* Prevent content spill */
}

/* Individual Chapter Tiles with Vertical Gradient */
#stories-container article {
  background: linear-gradient(to bottom, #0b3d91, #37474f, #ff69b4); /* Full gradient */
  background-size: 100% 1000%; /* Ensure gradient spans all tiles */
  background-position: 0 calc(var(--tile-index, 0) * 10%); /* Adjust slice position dynamically */
  background-clip: padding-box; /* Ensure gradient stays inside padding */
  padding: 15px;
  border-radius: 8px;
  color: #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
}

/* Tile Borders */
#stories-container article {
  border: 1px solid rgba(255, 255, 255, 0.1); /* Smooth border for subtle separation */
}

/* Gradient Slicing for Each Tile */
#stories-container article:nth-child(1) {
  --tile-index: 0; /* First tile slice */
}
#stories-container article:nth-child(2) {
  --tile-index: 1; /* Second tile slice */
}
#stories-container article:nth-child(3) {
  --tile-index: 2; /* Third tile slice */
}
#stories-container article:nth-child(4) {
  --tile-index: 3; /* Fourth tile slice */
}
#stories-container article:nth-child(5) {
  --tile-index: 4; /* Fifth tile slice */
}
#stories-container article:nth-child(6) {
  --tile-index: 5; /* Sixth tile slice */
}
#stories-container article:nth-child(7) {
  --tile-index: 6; /* Seventh tile slice */
}
#stories-container article:nth-child(8) {
  --tile-index: 7; /* Eighth tile slice */
}
#stories-container article:nth-child(9) {
  --tile-index: 8; /* Ninth tile slice */
}
#stories-container article:nth-child(10) {
  --tile-index: 9; /* Tenth tile slice */
}
#stories-container article:nth-child(11) {
  --tile-index: 10; /* Tenth tile slice */
}








#arrow {
  display: inline-block;
  margin-left: 8px; /* Space between text and arrow */
  transition: transform 0.3s ease; /* Smooth rotation */
}

#stories-container.expanded + h2 #arrow {
  transform: rotate(180deg); /* Rotate when expanded */
}

#bottom-button {
  position: fixed; /* Makes the button float */
  bottom: 20px; /* Distance from the bottom */
  left: 20px; /* Distance from the right */
  z-index: 1000; /* Ensures it appears above other content */
}

#scroll-top {
  background: linear-gradient(135deg, #63b8ff, #1e90ff);
  color: #ffffff;
  border: none;
  font-size: 1.3em;
  padding: 12px 20px;
  border-radius: 50%; /* Circular button */
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
  width: 60px; /* Adjust size for circle */
  height: 60px;
  text-align: center; /* Center text inside the button */
  line-height: 60px; /* Vertically center text */
}

#scroll-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.3);
}

#stories-container article {
  border: 1px solid rgba(255, 255, 255, 0.1); /* Clean and subtle border */
}

a {
  color: white
}