* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  :root {
    --diver: rgb(35, 35, 40);
  }
  
  body { /* Added body styling for centering input area */
    display: flex;
    flex-direction: column;
    min-height: 100dvh; /* Ensure body takes full viewport height */
}
.app {
  flex: 1; /* Allow the .app to take up remaining space */
  min-height: 100dvh;
  width: 100vw;
  position: relative;
  font-family: sans-serif;
  overflow: hidden; /* Hide overflow from animations */
}
  
.scene-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
  
  .sky {
    height: 20%;
    background-image: radial-gradient(
      farthest-side at 120% 65%,
      yellow,
      rgb(252, 189, 73),
      rgb(96, 171, 233),
      rgb(119, 180, 230)
    );
    width: 100%;
  }
  
  .ocean {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    /* border-top-left-radius: 5px; */
    /* border-top-right-radius:; */
    /* border: 2px solid black; */
    overflow: hidden;

  }
  
  .ocean::after {
    content: "";
    top: 0;
    width: 150%;
    height: 60px;
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    filter: blur(80px);
  }
  
  .ocean::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 150%;
    background: linear-gradient(black, black, transparent);
    transform: rotate(35deg) translateX(-45%) translateY(15%);
    filter: blur(250px);
  }
  
  .ocean-floor {
    width: 100%;
    height: 15px;
    width: 100%;
    background: tan;
    position: absolute;
    bottom: 0;
    z-index: 2; /* Place the floor above the video */
}
  .ocean-floor-contents {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 5;
  }
  
  .shell {
    height: 10px;
    width: 30px;
    background: white;
    position: absolute;
    right: 3rem;
    bottom: 1rem;
    border-radius: 0.25rem;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    box-shadow: -5px 2px 5px rgba(15, 15, 15, 0.6) inset;
    /* transform: skew(300deg); */
  }
  
  .ocean-floor::after {
    content: "";
    position: absolute;
    width: 150%;
    height: 150px;
    border-radius: 50%;
    background: tan;
    top: -15px;
    box-shadow: 2px 3px 25px 5px rgba(15, 15, 15, 0.7) inset;
  }
  
  .ocean-floor::before {
    content: "";
    position: absolute;
    width: 150%;
    height: 100px;
    border-radius: 50%;
    background: tan;
    top: -5px;
    left: -50%;
    box-shadow: 2px 3px 15px black inset;
  }
  
  .seaweed-parent {
    width: 100px;
    height: 10px;
    position: absolute;
    z-index: 5;
  }
  
  .seaweed-section {
    position: absolute;
    z-index: 5;
    transform-origin: bottom;
  }
  
  .seaweed-section-1 {
    transform: rotate(25deg) translateX(-1rem);
  }
  
  .seaweed-section-3 {
    transform: rotate(-25deg);
  }
  
  .seaweed {
    width: 10px;
    height: 10px;
    position: relative;
    border-radius: 15%;
    left: 10px;
    background: green;
    /* border: 2px solid black; */
    animation: seaweed 16s cubic-bezier(0.075, 0.82, 0.165, 1) infinite;
  }
  
  .seaweed-animation-1 {
    animation: seaweed2 16s cubic-bezier(0.375, 0.82, 0.865, 1.2) infinite;
  }
  
  .seaweed-animation-2 {
    animation: seaweed 17s cubic-bezier(0.275, 0.52, 0.765, 1.1) infinite;
  }
  
  .seaweed-animation-3 {
    animation: seaweed2 15s 1s cubic-bezier(0.275, 0.52, 0.765, 1.1) infinite;
  }
  
  @keyframes seaweed {
    0% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(2deg);
    }
    30% {
      transform: rotate(3deg);
    }
    45% {
      transform: rotate(1deg);
    }
    60% {
      transform: rotate(-1deg);
    }
    75% {
      transform: rotate(-4deg);
    }
    85% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  
  @keyframes seaweed2 {
    0% {
      transform: rotate(0deg);
    }
    15% {
      transform: rotate(3deg);
    }
    30% {
      transform: rotate(1deg);
    }
    45% {
      transform: rotate(-3deg);
    }
    60% {
      transform: rotate(1deg);
    }
    75% {
      transform: rotate(-3deg);
    }
    85% {
      transform: rotate(1deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  
  /* DIVER */
  
  .diver {
    width: 200px;
    height: 75px;
    /* border: 1px solid black; */
    position: absolute;
    display: flex;
    align-items: center;
    bottom: 5rem;
    animation: swimmingby 20s cubic-bezier(0.275, 0.385, 0.62, 1.275) infinite;
    /* transform: scale(0.65); */
  }
  @media (max-width: 600px) {
  .diver {
    transform: scale(0.6); /* Shrink the diver for small screens */
  }
  .ocean-floor::after, .ocean-floor::before {
    width: 200%; /* Ensure the floor floor covers the width when zoomed */
  }
}
  
  .happy-birthday {
    position: absolute;
    top: -2rem;
    left: 3rem;
    background: white;
    padding: 0.5rem;
    border-radius: 40%;
    border-bottom-left-radius: 100px;
    animation: happybday 20s infinite;
  }
  
  .happy-birthday::after {
    content: "";
    width: 6px;
    height: 7px;
    background: white;
    position: absolute;
    border-radius: 40%;
    left: -1rem;
  }
  
  .happy-birthday::before {
    content: "";
    width: 10px;
    height: 10px;
    background: white;
    position: absolute;
    border-radius: 40%;
    left: -0.7rem;
    /* left: -1rem;
    top: 4rem; */
  }
  
  @keyframes happybday {
    0% {
      filter: blur(100px);
      opacity: 0;
    }
    /* 25% {
      opacity: 0;
    } */
    50% {
      opacity: 0;
      filter: blur(100px);
    }
    55% {
      opacity: 1;
      filter: blur(0px);
    }
    65% {
      filter: blur(0px);
    }
    /* 75% {
      opacity: 0;
    } */
    100% {
      filter: blur(100px);
      opacity: 0;
    }
  }
  
  @keyframes swimmingby {
    0% {
      transform: translateX(125vw) translateY(-10rem);
    }
    50% {
      transform: translateX(50vw) translateY(2rem);
    }
    65% {
      transform: translateX(35vw) translateY(1rem);
    }
    100% {
      transform: translateX(-125vw) translateY(-5rem) rotate(35deg);
    }
  }
  
  .diver-head {
    width: 30px;
    height: 35px;
    /* border: 2px solid black; */
    border-radius: 50%;
    transform: translate(0.5rem, -0.85rem);
    background: black;
    background: var(--diver);
  }
  
  .diver-body {
    width: 75px;
    height: 25px;
    border-radius: 1rem;
    border-bottom-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-right-radius: 35%;
    /* border: 2px solid black; */
    background: black;
    background: var(--diver);
  
    position: relative;
  }
  
  .tank {
    width: 60px;
    height: 13px;
    background: grey;
    border-radius: 10px;
    border-top-right-radius: 1px;
    border-bottom-right-radius: 1px;
    position: absolute;
    left: 0.65rem;
    z-index: 5;
    top: -0.25rem;
    box-shadow: 4px 2px 10px rgba(15, 20, 20, 0.85) inset;
  }
  
  .diver-arm {
    width: 40px;
    height: 10px;
    /* border: 2px solid red; */
    background: black;
    background: var(--diver);
  
    border-radius: 1rem;
    border-bottom-left-radius: 50%;
    position: absolute;
    top: 0.65rem;
    left: -30px;
    /* transform: rotate(-25deg) translateY(0.75rem); */
    transform-origin: right;
    animation: swimmingarm 4s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
  }
  
  .diver-arm::after {
    content: "";
    width: 20px;
    height: 15px;
    background: var(--diver);
    position: absolute;
    left: -0.5rem;
    top: -0.15rem;
    border-radius: 2rem;
  }
  
  @keyframes swimmingarm {
    0% {
      transform: rotate(-145deg) translateY(0.25rem);
    }
    50% {
      transform: rotate(-25deg) translateY(0.25rem);
    }
    100% {
      transform: rotate(-145deg) translateY(0.25rem);
    }
  }
  
  .diver-legs {
    width: 85px;
    height: 50px;
    border-radius: 1rem;
    transform: rotateX(65deg) translateX(-0.5rem);
    /* transform: rotateX(20deg); */
    /* border: 2px solid black; */
  }
  
  .diver-leg {
    width: 100%;
    height: 25px;
    /* border: 2px solid black; */
    display: flex;
    align-items: center;
    transform-origin: left;
  }
  
  .diver-leg-1 {
    animation: swimleg1 2s linear infinite;
  }
  
  @keyframes swimleg1 {
    0% {
      transform: rotate(5deg) translateY(0.25rem);
    }
    50% {
      transform: rotate(-5deg) translateY(0.25rem);
    }
    100% {
      transform: rotate(5deg) translateY(0.25rem);
    }
  }
  
  .diver-leg-2 {
    animation: swimleg2 2s linear infinite;
  }
  
  @keyframes swimleg2 {
    0% {
      transform: rotate(-5deg) translateY(-0.15rem);
    }
    50% {
      transform: rotate(5deg) translateY(-0.15rem);
    }
    100% {
      transform: rotate(-5deg) translateY(-0.15rem);
    }
  }
  
  .leg {
    width: 65%;
    height: 20px;
    /* border: 2px solid black; */
    background: var(--diver);
  }
  
  .fin {
    width: 45%;
    height: 30px;
    /* border: 2px solid black; */
    transform: rotate(25deg);
    transform-origin: left;
    background: linear-gradient(to right, rgb(35, 45, 45), rgb(15, 15, 20));
  }
  
  .fin-1 {
    animation: fin2 2s linear infinite;
  }
  
  @keyframes fin1 {
    0% {
      transform: rotate(-15deg) translateY(-0.15rem);
    }
    50% {
      transform: rotate(15deg) translateY(-0.15rem);
    }
    100% {
      transform: rotate(-15deg) translateY(-0.15rem);
    }
  }
  
  .fin-2 {
    animation: fin1 2s linear infinite;
  }
  
  @keyframes fin2 {
    0% {
      transform: rotate(-15deg) translateY(-0.15rem);
    }
    50% {
      transform: rotate(15deg) translateY(-0.15rem);
    }
    100% {
      transform: rotate(-15deg) translateY(-0.15rem);
    }
  }
  
  /*FISH */
  
  .fish-body {
    width: 45px;
    height: 25px;
    /* border: 1px solid black; */
    background: var(--color);
    position: absolute;
    border-radius: 50%;
    box-shadow: 2px -5px 15px rgba(35, 25, 25, 0.5) inset;
  }
  
  .fish-swim-left {
    transform: translateX(-50vw) translateY(-3rem);
  }
  
  @keyframes fishswimleft {
    0% {
      transform: translateX(-50vw) translateY(-3rem);
    }
    100% {
      transform: translateX(150vw) translateY(2rem);
    }
  }
  
  .fish-swim-right {
    transform: translateX(150vw) translateY(3rem);
  }
  
  @keyframes fishswimright {
    0% {
      transform: translateX(150vw) translateY(3rem);
    }
    50% {
      transform: translateX(50vw) translateY(1rem);
    }
    100% {
      transform: translateX(-50vw) translateY(-2rem);
    }
  }
  
  .fish-swim-left::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color);
    left: -10px;
    clip-path: polygon(13% 0, 3% 100%, 100% 53%);
  }
  
  .fish-swim-left::before {
    content: "";
    width: 4px;
    height: 4px;
    background: rgba(25, 25, 30, 0.5);
    position: absolute;
    right: 0.5rem;
    top: 0.5rem;
  }
  
  .fish-swim-right::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    background: var(--color);
    left: 32.5px;
    clip-path: polygon(94% 0, 0 49%, 100% 100%);
  }
  
  .fish-swim-right::before {
    content: "";
    width: 4px;
    height: 4px;
    background: rgba(25, 25, 30, 0.5);
    position: absolute;
    left: 0.5rem;
    top: 0.5rem;
  }
  
  .crab {
    width: 60px;
    height: 25px;
    /* border: 1px solid black; */
    position: absolute;
    left: 6rem;
    bottom: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.7);
    /* animation: crabwalk 25s 3s cubic-bezier(0.15, 0.26, 0.65, 1.34) infinite; */
  }
  
  .crab-claw {
    width: 10px;
    height: 20px;
    /* border: 1px solid black; */
    background: red;
    box-shadow: 5px 3px 5px rgba(25, 25, 20, 0.5) inset;
  }
  .crab-claw-left {
    transform: rotate(35deg);
    border-top-left-radius: 100px;
    transform-origin: right;
    clip-path: polygon(0 0, 100% 0, 73% 100%, 49% 71%, 18% 100%);
    animation: clawleft 13s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
  }
  
  @keyframes clawleft {
    0% {
      transform: rotate(55deg) translateY(0.25rem);
    }
    50% {
      transform: rotate(35deg) translateX(0.5rem) translateY(0.25rem);
    }
  
    100% {
      transform: rotate(55deg) translateY(0.25rem);
    }
  }
  
  .crab-claw-right {
    transform: rotate(-35deg);
    border-top-right-radius: 100px;
    transform-origin: left;
    animation: clawright 13s cubic-bezier(0.39, 0.575, 0.565, 1) infinite;
  
    clip-path: polygon(0 0, 100% 0, 73% 100%, 49% 71%, 18% 100%);
  }
  
  @keyframes clawright {
    0% {
      transform: rotate(-55deg) translateY(0.25rem);
    }
    50% {
      transform: rotate(-35deg) translateX(-0.5rem) translateY(0.25rem);
    }
  
    100% {
      transform: rotate(-55deg) translateY(0.25rem);
    }
  }
  .crab-body {
    height: 100%;
    width: 25px;
  
    /* border: 1px solid black; */
  }
  
  .crab-head {
    height: 75%;
    width: 100%;
    border-radius: 2px;
    z-index: 10;
    position: relative;
    /* border: 1px solid black; */
    background: red;
    border-radius: 10px;
    box-shadow: 2px 3px 5px rgba(25, 25, 20, 0.5) inset;
  }
  
  .crab-legs {
    display: flex;
    height: 15%;
    width: 100%;
    justify-content: space-evenly;
  }
  
  .crab-leg {
    height: 100%;
    width: 6px;
    background: red;
    position: relative;
  }
  
  .octopus {
    height: 150px;
    width: 55px;
    border-radius: 1rem;
    /* border: 3px solid red; */
    position: absolute;
    left: 45%;
    top: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transform: scale(0.75) translateX(125vw);
    animation: octopusswimleft 13s 4s cubic-bezier(0.475, 0.385, 0.62, 1.075)
      infinite;
    /* justify-content: center; */
  }
  
  @keyframes octopusswimleft {
    0% {
      transform: scale(0.75) translateX(125vw);
    }
  
    45% {
      transform: scale(0.65) translateX(20vw) translateY(3rem);
    }
  
    100% {
      transform: scale(0.75) translateX(-125vw) translateY(-1.5rem);
    }
  }
  
  .octopus-head {
    height: 70px;
    border-radius: 100px;
    /* border-bottom-left-radius:100px;
    border-bottom-right-radius:100px; */
    width: 50px;
    position: absolute;
    background: gray;
    z-index: 5;
    /* box-shadow: 2px 3px 15px black inset; */
  }
  
  .octopus-head::after {
    content: "";
    position: absolute;
    top: 0;
    width: 80px;
    height: 50px;
    background: gray;
    border-radius: 50%;
    left: -15px;
    box-shadow: 2px 3px 15px black inset;
  }
  
  .octopus-body {
    height: 100px;
    width: 100%;
    /* border: 2px solid red; */
    display: flex;
    position: absolute;
    bottom: 0;
  }
  
  .octopus-arm {
    height: 100%;
    flex: 1;
    /* border: 2px solid pink; */
    position: relative;
    transform: translateY(-1rem);
  }
  
  .octopus-tentacle-segment {
    height: 10px;
    width: 3px;
    background: grey;
    position: relative;
    bottom: -10px;
    box-shadow: 2px 3px 5px rgba(15, 15, 15, 0.4) inset;
  
    /* left: 5px; */
  }
  
  .octopus-animation-1 {
    animation: octopustentacle 12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
      infinite;
  }
  
  @keyframes octopustentacle {
    0% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(20deg);
    }
    40% {
      transform: rotate(-10deg);
    }
    60% {
      transform: rotate(20deg);
    }
    80% {
      transform: rotate(5deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  
  .octopus-animation-2 {
    animation: octopustentacle2 12s cubic-bezier(0.175, 0.885, 0.32, 1.275)
      infinite;
  }
  
  @keyframes octopustentacle2 {
    0% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(-5deg);
    }
    40% {
      transform: rotate(5deg);
    }
    60% {
      transform: rotate(8deg);
    }
    80% {
      transform: rotate(-3deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
  
  .octopus-animation-3 {
    animation: octopustentacle3 15s cubic-bezier(0.175, 0.885, 0.32, 1.275)
      infinite;
  }
  
  @keyframes octopustentacle3 {
    0% {
      transform: rotate(0deg);
    }
    20% {
      transform: rotate(-7deg);
    }
    40% {
      transform: rotate(-3deg);
    }
    60% {
      transform: rotate(2deg);
    }
    80% {
      transform: rotate(1deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
 
  /* extra code  */
  
  #input-area {
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    margin: 20px auto; /* Center the input area */
    width: 80%; /* Limit width on larger screens */
    max-width: 500px; /* Set a maximum width */
}
#message-title, #message-input {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-right: 10px; /* Space between inputs and button */
  flex: 1; /* Allow inputs to grow */
}
/* #throw-button {
  padding: 8px 16px;
  background-color: #4caf50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
} */


/* CSS */
#throw-button {
  background-color: #c2fbd7;
  border-radius: 100px;
  box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
  color: green;
  cursor: pointer;
  display: inline-block;
  font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
  padding: 7px 20px;
  text-align: center;
  text-decoration: none;
  transition: all 250ms;
  border: 0;
  font-size: 16px;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

#throw-button:hover {
  box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
  transform: scale(1.05) rotate(-1deg);
}
#pond {
  width: 100%;
  height: 100%;
  position: relative; /* Add this */
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

.bottles-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.bottles-layer .bottle {
  pointer-events: auto;
}
.ocean-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the video covers the entire area */
  z-index: 1; /* Place the video behind other elements */
}

@media (max-width: 768px) {
  nav {
    flex-wrap: wrap;
    gap: 8px;
    padding: 8px 12px;
  }
  nav div:last-child {
    gap: 12px;
  }

  .bottle {
    width: 44px;
    height: 72px;
    font-size: 11px;
  }

  @keyframes float {
    0% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-6px);
    }
    100% {
      transform: translateY(0);
    }
  }

  @keyframes wave {
    0% {
      transform: rotate(-1.5deg);
    }
    50% {
      transform: rotate(1.5deg);
    }
    100% {
      transform: rotate(-1.5deg);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bottle,
  .fish-body,
  .bubble,
  .diver {
    animation: none !important;
  }
}

.bottle {
  position: absolute;
  width: 50px; /* Adjust bottle size */
  height: 80px; /* Adjust bottle size */
  background: url("bottle_1_no_bg.png"); /* Replace with your bottle image */
  background-size: contain;
  background-repeat: no-repeat;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white; /* Text color inside bottle */
  font-size: 12px; /* Adjust font size */
  transform-origin: center bottom; /* For proper rotation */
  animation: float 4s linear infinite, wave 2s linear infinite; /* Add float and wave animation */
  z-index: 10; /* Ensure bottles are above the ocean */
}
    
.bottle span {
max-width: 100%; /* Occupy full width of the bottle */
overflow: hidden; /* Hide overflowing text */
text-overflow: ellipsis; /* Add ellipsis (...) for overflow */
white-space: nowrap; /* Prevent text from wrapping */
text-align: center;
}

.bottle:focus { /* CORRECTED: Target the span on focus */
  outline: none !important;
  box-shadow: none !important;
}
    


    @keyframes float {
        0% { transform: translateY(0); }
        50% { transform: translateY(-10px); } /* Adjust float height */
        100% { transform: translateY(0); }
    }
    
    @keyframes wave {
        0% { transform: rotate(-2deg); } /* Adjust wave angle */
        50% { transform: rotate(2deg); }
        100% { transform: rotate(-2deg); }
    }
    
    .message-popup {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: white;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
      z-index: 1000; /* Ensure it's on top */
    }
    
    .message-popup h2 {
      margin-top: 0;
    text-align: center;
    }
    
    .message-popup button {
      float: right;
      margin-top: 10px;
      padding: 8px 16px;
      background-color:red;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    @media (max-width: 768px) { /* Example: Adjust for tablets and smaller */
      #input-area {
          flex-direction: column; /* Stack input elements */
          width: 90%;
      }
      #message-title, #message-input {
          margin: 5px 0; /* Add margin between stacked inputs */
          flex: auto; /* Inputs take available width */
      }
      #throw-button {
          margin-top: 10px; /* Space button below inputs */
          margin-left: 0;
          width: 100%; /* Button takes full width */
      }
  
      .diver {
          transform: scale(0.7); /* Make diver smaller on mobile */
      }
  
      /* Adjust other element sizes/positions as needed */
      .crab {
          transform: scale(0.5);
      }
      
  }
  
  @media (max-width: 480px) { /* Example: Adjust for phones */
      .diver {
          transform: scale(0.5); /* Even smaller on phones */
      }
      .crab {
          transform: scale(0.3);
      }
      /* Further adjustments for smaller screens */
  }

  .bubble {
    width: 30px;
    height: 30px;
    border-radius: 100%;
    position: absolute;
    background-color: white;
    bottom: -30px;
    opacity: 0.2;
    animation: bubble 15s ease-in-out infinite,
      sideWays 4s ease-in-out infinite alternate;
  }
  
  @keyframes bubble {
    0% {
      transform: translateY(0%);
      opacity: 0.06;
    }
    100% {
      transform: translateY(-120vh);
    }
  }
  
  @keyframes sideWays {
    0% {
      margin-left: 0px;
    }
    100% {
      margin-left: 200px;
    }
  }
  
  .bubble--1 {
    left: 10%;
    animation-delay: 0.5s;
    animation-duration: 16s;
    opacity: 0.2;
  }
  
  .bubble--2 {
    width: 15px;
    height: 15px;
    left: 40%;
    animation-delay: 1s;
    animation-duration: 10s;
    opacity: 0.1;
  }
  
  .bubble--3 {
    width: 10px;
    height: 10px;
    left: 30%;
    animation-delay: 5s;
    animation-duration: 20s;
    opacity: 0.3;
  }
  
  .bubble--4 {
    width: 25px;
    height: 25px;
    left: 40%;
    animation-delay: 8s;
    animation-duration: 17s;
    opacity: 0.2;
  }
  
  .bubble--5 {
    width: 30px;
    height: 30px;
    left: 60%;
    animation-delay: 10s;
    animation-duration: 15s;
    opacity: 0.1;
  }
  
  .bubble--6 {
    width: 10px;
    height: 10px;
    left: 80%;
    animation-delay: 3s;
    animation-duration: 30s;
    opacity: 0.4;
  }
  
  .bubble--7 {
    width: 15px;
    height: 15px;
    left: 90%;
    animation-delay: -7s;
    animation-duration: 25s;
    opacity: 0.3;
  }
  
  .bubble--9 {
    width: 20px;
    height: 20px;
    left: 50%;
    bottom: 30px;
    animation-delay: -5s;
    animation-duration: 19s;
    opacity: 0.2;
  }
  
  .bubble--10 {
    width: 40px;
    height: 40px;
    left: 30%;
    bottom: 30px;
    animation-delay: -21s;
    animation-duration: 16s;
    opacity: 0.3;
  }
  
  .bubble--11 {
    width: 30px;
    height: 30px;
    left: 60%;
    bottom: 30px;
    animation-delay: -13.75s;
    animation-duration: 20s;
    opacity: 0.3;
  }
  
  .bubble--11 {
    width: 25px;
    height: 25px;
    left: 90%;
    bottom: 30px;
    animation-delay: -10.5s;
    animation-duration: 19s;
    opacity: 0.3;
  }

 .date{
  color: blue;
 } 
 .popupMessage{
  margin: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
 }
 h1 {
  text-align: center; /* Center the text */
  font-size: 2em; /* Adjust size */
  color:white; /* Set color */
  margin-bottom: 20px; /* Add some spacing below */
  background-color: aqua; /* Add background color */
  /* ... other styles */
}

.bottle .flag {
  width: 20px;
  height: 15px;
  position: absolute;
  top: 5px; /* Changed from bottom to top */
  left: 5px;
  border: 1px solid rgba(0, 0, 0, 0.2);
}

nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: white; /* White background */
  padding: 10px 20px; /* Add some padding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: add a subtle shadow */
}

.nav-title {
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: bold;
}

nav div:first-child { /* Bottle Message */
  font-size: clamp(1rem, 4vw, 1.5rem);
  font-weight: bold;
}

nav div:last-child { /* About and Collab links */
  display: flex; /* Arrange links horizontally */
  gap: 20px; /* Space between links */
}

nav div:last-child a {
  text-decoration: none; /* Remove underlines from links */
  color: #333; /* Dark gray color for links */
  font-weight: 500; /* Medium font weight */
}

nav div:last-child a:hover {
  color: #007bff; /* Change color on hover (e.g., blue) */
}

/* ocean.css */

/* ocean.css */

/* ocean.css */

/* Hidden Section Styles (About and Collab) */
.hidden-section {
  display: none;
  background-color: rgba(255, 255, 255, 0.9); /* Slightly transparent white */
  padding: 25px;
  margin: 20px auto;
  max-width: 700px; /* Adjust width as needed */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  text-align: left;
  position: relative;
  font-size: 16px;
  line-height: 1.7;
}

.hidden-section h2 {
  color: #007bff; /* Primary color */
  margin-bottom: 20px;
  font-weight: 600;
}

.hidden-section p,
.hidden-section ul,
.hidden-section li {
  margin-bottom: 15px;
}

.hidden-section ul {
  list-style-type: disc;
  margin-left: 25px;
}

.close-section {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: #f0f0f0;
  border: none;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 5px;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.close-section:hover {
  background-color: #e0e0e0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hidden-section {
      padding: 20px;
      margin: 15px auto;
      font-size: 15px;
  }
}