/* My Awesome Styles */

/* Diagnostic Styling 
  * Change Background Color
  * Outline Elements
*/

/* * {
    outline: 1px dotted black;
} */

/* Doodle Stage */
  #stage {
    background: none;  
    height: 316px;
    width: 552px;
  }

  @keyframes sway {
    0% {
      transform: rotate(0deg);
    }
    50% {
      transform: rotate(2deg);
    }
    100% {
      transform: rotate(0deg);
    }
  }
/* 
  .music {
    animation: sway infinite;
  }
  
  .music:nth-child(1) {
    animation-duration: 2s;
    animation-delay: 0s;
  }
  
  .music:nth-child(2) {
    animation-duration: 3s;
    animation-delay: 1s;
  }
  
  .music:nth-child(3) {
    animation-duration: 4s;
    animation-delay: 2s;
  } */

  music {
    animation: sway infinite;
  }
  
  .music1 {
    animation: sway 3s infinite;
    animation-delay: 1s;
  }
  
  .music2 {
    animation: sway 4s infinite;
    animation-delay: 1s;
  }
  
  .music3 {
    animation: sway 4s infinite;
    animation-delay: 2s;
  }

/* Ensure the play-button-container is visible */
.play-button-container {
  display: block; /* Ensure it is not hidden */
  position: relative; /* Allow positioning within the SVG */
  width: auto; /* Ensure it doesn't collapse */
  height: auto;
  overflow: visible; /* Prevent clipping */
  transform: scale(1); /* Adjust scaling if needed */
  transform-origin: center; /* Ensure scaling is centered */
}

.play-circle {
  cursor: pointer;
  transition: fill 0.3s ease;
}

.play-triangle {
  cursor: pointer;
  transition: fill 0.3s ease;
}

.play-triangle:hover {
  fill: #e21a1a; /* Darker hover effect */
}

.stop-square:hover {
  fill: #e21a1a; /* Darker hover effect for the square */
}

#vine-rope {
  stroke: #1a4405;
  stroke-width: 6px;
  animation: sway 4s infinite;
  filter: drop-shadow(2px 4px 4px rgba(0, 0, 0, 0.5)); /* Drop shadow for the vine */
  transform-origin: center top;
  position: relative; /* Create a stacking context */
  z-index: 100; /* Higher z-index to ensure it is on top */
}

#vine-rope:hover {
  stroke: #07611b;
  /* #0b9f44; */
}

#Google path {
  filter: drop-shadow(3px 3px 5px rgba(0, 0, 0, 0.6)); /* Drop shadow for Google letters */
}

#O1 {
  opacity: 1; /* Ensure it is fully visible */
  visibility: visible; /* Ensure it is not hidden */
  transform: none; /* Remove any scaling or transformations */
}

/* Ensure fireflies are on top */
.fireFlies {
  position: fixed; /* Ensure fireflies are in a separate stacking context */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100; /* Higher z-index to ensure they are on top */
  pointer-events: none; /* Prevent interaction with fireflies */
}

/* Ensure bird and music notes are hidden when display is set to none */
.bird, .music1, .music2, .music3 {
  transition: opacity 1s ease; /* Smooth transition for hiding/showing */
}

/* Restore animation speeds */
.music1, .music2, .music3 {
  animation: sway 3s infinite; /* Restore original animation speed */
}

/* Global styles to prevent horizontal scrolling */
html, body {
  overflow-x: hidden; /* Disable horizontal scrolling */
  margin: 0; /* Remove default margins */
  padding: 0; /* Remove default padding */
}

/* Responsive styles for mobile devices */
@media (max-width: 768px) {
  #stage {
    height: 200px; /* Adjust height for smaller screens */
    width: 100%; /* Make the stage width responsive */
  }

  #vine-rope {
    stroke-width: 4px; /* Reduce stroke width for smaller screens */
    animation: sway 3s infinite; /* Adjust animation duration */
  }

  .play-button-container {
    position: absolute; /* Adjust positioning for mobile */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .play-circle, .play-triangle {
    cursor: pointer;
    transition: fill 0.2s ease; /* Slightly faster transition for mobile */
  }

  .play-triangle:hover, .stop-square:hover {
    fill: #d11a1a; /* Slightly lighter hover effect for mobile */
  }

  #Google path {
    filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Adjust drop shadow for smaller screens */
  }
}

/* Responsive styles for mobile devices */
@media (max-width: 480px) { /* Target smaller screens like phones */
  /* Ensure the stage is responsive */
  #stage {
    position: relative; /* Allow the SVG to flow naturally */
    margin: 2em auto; /* Add spacing above and center the SVG */
    transform: scale(0.65); /* Scale down the entire stage slightly more */
    transform-origin: top center; /* Ensure scaling is centered */
    overflow: visible; /* Allow the SVG to be fully visible */
    max-width: 100%; /* Ensure the SVG does not exceed the viewport */
  }

  /* Adjust input field styles for smaller screens */
  input {
    position: relative; /* Align relative to parent container */
    width: 70%; /* Reduce width to fit smaller screens */
    padding: 0.6em; /* Adjust padding for smaller input */
    margin: 1em auto; /* Add spacing above and below */
    font-size: 0.8em; /* Reduce font size */
    display: block; /* Ensure input is block-level */
    max-width: 100%; /* Ensure the input does not exceed the viewport */
  }

  /* Ensure the container fits the screen */
  .scaled-container {
    width: 100%; /* Ensure the container spans the full width */
    margin: 2em 0; /* Add spacing at the top and bottom */
    padding: 0; /* Remove any unintended padding */
    position: relative;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align elements */
    gap: 1em; /* Add spacing between children */
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  /* Ensure the template container fits the screen */
  .template-container {
    width: 100%; /* Ensure the container spans the full width */
    margin: 2em 0; /* Add spacing at the top and bottom */
    padding: 0; /* Remove any unintended padding */
    position: relative;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: center; /* Center-align elements */
    gap: 1em; /* Add spacing between children */
    overflow-x: hidden; /* Prevent horizontal overflow */
  }

  /* Adjust button container spacing */
  .button-container {
    display: flex; /* Use flexbox to align buttons horizontally */
    justify-content: center; /* Center the buttons */
    flex-wrap: nowrap; /* Prevent buttons from stacking */
    gap: 0.5em; /* Reduce spacing between buttons */
    margin: 0.5em auto; /* Add vertical spacing */
    max-width: 100%; /* Ensure the button container does not exceed the viewport */
  }

  button {
    font-size: 0.7em; /* Reduce font size for smaller screens */
    padding: 0.3em 0.6em; /* Adjust padding for smaller buttons */
    display: inline-block; /* Ensure buttons are inline */
  }
}