@import url("style.css");


.menu a[href="welcome.html"] {
    text-decoration: underline; /* Underline the Home link */
    text-underline-offset: 4px; /* Add some space between the text and the underline */
}
  
.container {
    padding-top: 5%; /* Space between the top of the page and the content */
    text-align: center;
    position: relative;
    font-size: 3rem; /* Adjusted for better scaling */
    margin: 0 auto;
    min-height: 300px;
  }
  
  /* Delta and Time Styling */
  .delta, .time {
    font-size: 5rem; /* Scalable and consistent unit */
    font-family: Arial, Helvetica, sans-serif;
    font-weight: bold;
    color: transparent; /* Make the text itself invisible */
    background: linear-gradient(90deg,
      var(--image-darkcolor) 0%,
      var(--image-lightcolor) 33%,
      var(--image-accentcolor) 66%,
      var(--image-darkcolor) 100%
    ); /* Gradient glow */
    background-size: 200% auto; /* Double the size for animation */
    background-clip: text; /* Clip the gradient to the text */
    text-fill-color: transparent; /* Ensure text color is transparent */
    animation: flowGlow 20s linear infinite; /* Continuous flowing animation */
  }
  
  /* Division Line Styling */
  .division-line {
    width: 150px;
    height: 5px;
    background: linear-gradient(90deg,
    var(--image-darkcolor) 0%,
    var(--image-lightcolor) 33%,
    var(--image-accentcolor) 66%,
    var(--image-darkcolor) 100%);
    background-size: 200% auto;
    margin: 1rem auto;
    border-radius: 10px; /* Smooth edges for the line */
    animation: flowGlow 20s linear infinite; /* Sync with text animation */
    /*box-shadow: 0 0 15px #D5E2DF, 0 0 10px #93EAD6; /* Subtle glow effect */
  }


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


.background-picture {
    position: relative; /* Ensure the background image container is positioned relative */
    padding-bottom: 10%;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
    max-height: 350px; /* Ensure the background image respects the max height */
    overflow: hidden; /* Prevent overflow of child elements *//* Ensure the background image respects the max height */
    z-index: 1; /* Ensure the background image is behind the profile picture */
}



.background-picture img {
  
    width: 100%;
    height: auto;
    max-height: 350px; /* Ensure the image height maxes out at 250px */
    object-fit: cover;
}

.profile-picture-container {
  display: flex; /* Flexbox for consistent alignment */
  flex-direction: column; /* Stack the description below the picture */
  align-items: center; /* Center-align the picture and text */
  position: absolute;
  bottom: 20px; /* Position relative to the background */
  left: 20px; /* Position relative to the background */
  z-index: 4; /* Ensure it appears above other elements */
}

.profile-picture {
  border-radius: 50%; /* Keep the circular shape */
  overflow: hidden; /* Ensure the image stays within the circular boundary */
  width: 15vw; /* Use viewport width for responsiveness */
  height: 15vw; /* Maintain a perfect square for circular cropping */
  max-width: 250px; /* Set a maximum size for larger screens */
  max-height: 250px; /* Maintain a consistent aspect ratio */
  min-width: 80px; /* Set a minimum size for smaller screens */
  min-height: 80px; /* Maintain the aspect ratio */
  border: 2px solid var(--image-darkcolor); /* Add a border for emphasis */
  display: flex; /* Flexbox ensures the content inside aligns correctly */
  align-items: center; /* Center the image vertically */
  justify-content: center; /* Center the image horizontally */
  background-color: #000; /* Fallback background color to avoid blank areas */
  z-index: 4; /* Ensure it appears above other elements */
}

.profile-picture img {
  width: 100%; /* Ensure the image fills the container */
  height: 100%; /* Ensure the image fills the container */
  border-radius: 50%; /* Creates the circular effect */
  object-fit: cover; /* Ensures the image is cropped perfectly to fill the circle */
  object-position: center; /* Centers the image content within the circle */
  display: block; /* Removes inline-block spacing issues */
}

.profile-description {
  margin-top: 10px; /* Spacing between the image and text */
  font-size: 1rem; /* Set a responsive font size */
  color: var(--text-color); /* Text color */
  text-align: center; /* Center the text under the picture */
  font-weight: bold; /* Make the text bold */
}

.story {
    padding: 20px;
}

.story p {
    padding-right: 20px;
}

.story h1 {
    padding-top: 40px; /* Adds padding between the title and the background image */
    padding-bottom: 20px; /* Adds padding between the title and the content */
    padding-left: 30px; /* Adds padding between the title and the left side */
    font-size: 2rem; /* Adjusted for better scaling */
}

.story-text {
  font-family: Arial, Helvetica, sans-serif; /* Ensure consistent font with other elements */
  font-size: 1rem; /* Match a readable font size */
  line-height: 1.8; /* Improve text spacing for readability */
  color: #22443e; /* Ensure text is visible */
  padding: 20px; /* Maintain consistent padding */
  background-color: var(--image-accentcolor);
  border-radius: 16px; /* Match the rounded corners */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
  text-align: center; /* Keep text alignment consistent */
}

.story-text p {
  margin-bottom: 1rem; /* Spacing between paragraphs */
  word-wrap: break-word; /* Break long words for proper wrapping */
  word-break: break-word; /* Ensure proper wrapping for lengthy text */
  background-color: transparent; 
}

.marquee {
  display: flex;
  justify-content: center;  /* Center the panel inside the marquee */
  align-items: center;
  width: 100%;
  overflow-x: hidden;  /* Enable horizontal scrolling if necessary */
  padding: 20px;  /* Optional: adds spacing around the boxes */
  box-sizing: border-box;
}


.panel {
  display: flex;
  flex-wrap: nowrap; /* Prevent wrapping, keep all boxes in one line */
  justify-content: flex-center; /* Align boxes to the left */
  align-items: center;
  gap: 20px; /* Space between boxes */
  width: 100%;
  max-width: 100%; /* Ensure it doesn’t stretch beyond the screen width */
  margin: 0 auto; /* Center the panel */
  transition: transform 0.3s ease;
}

.box {
  flex: 0 0 auto; /* Do not shrink or grow, maintain original size */
  width: calc(20vw); /* Width is set to 20% of the viewport width */
  max-width: 250px; /* Set max width to avoid boxes getting too large */
  min-width: 180px; /* Set a minimum width for boxes */
  background-color: #c1ddd6;
  border-radius: 16px;
  height: 180px; /* Fixed height for boxes */
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px;
  position: relative;
  transition: transform 0.3s ease-in-out, border 0.3s ease-in-out;
  text-align: center;
  cursor: pointer;
  padding: 10px; /* Padding for better content spacing */
}
.box.selected {
  border: 3px solid #93EAD6;
  transform: scale(1.3); /* Make selected box larger */
  background: linear-gradient(180deg, transparent, #93EAD6);
}
.box.fade {
  opacity: 0.7; /* Fade out the second box before and after */
}

.box:hover {
  transform: scale(1.15);
}


.question {
  background-color: #c1ddd6;
  color: #22443e; /* Ensure text is visible */
  font-size: 1.2rem;
  font-weight: bold;
  margin: 0;
  padding: 8px;
  position: absolute;
  text-align: center;
  opacity: 1;
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  word-break: break-word; /* Ensure proper wrapping for very long words */
  transition: opacity 0.3s ease-in-out;
}

/* Styling for answer text */
.answer {
  font-size: 1.1rem;
  font-weight: 500;
  margin: 0;
  padding: 8px;
  position: absolute;
  text-align: center;
  background: linear-gradient(90deg, #93EAD6, #D5E2DF, #93EAD6);
  -webkit-background-clip: text;
  color: #D5E2DF,; /* Ensure text is initially invisible */
  white-space: normal; /* Allow text to wrap */
  word-wrap: break-word; /* Break long words */
  word-break: break-word; /* Ensure proper wrapping for very long words */
  opacity: 0; /* Initially hidden */
  transition: opacity 0.3s ease-in-out, color 0.3s ease-in-out;
}

/* Selected box styling */
.box.selected .question {
  opacity: 0; /* Hide the question when selected */
}

.box.selected .answer {
  opacity: 1; /* Show the answer when selected */
}