.overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.5); /* Light dimming effect */
    z-index: 1; /* Sits above the background but behind compliments */
    display: none; /* Hidden by default */
}

#complimentPage {
    position: relative;
    z-index: 2; /* Ensures compliments are displayed above overlay */
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.compliments {
  position: relative;
  width: 100%;
  height: 80vh; /* Fixed height to properly calculate positions */
  overflow: hidden;
  display: block; /* Ensures the container is a block element */
}

.compliment {
    max-width: 200px; /* Adjust this value as needed */
    word-wrap: break-word; /* Ensures long words will wrap if necessary */
    text-align: center; /* Optional: Center-aligns the text */
    font-size: 18px;
    position: absolute;
    white-space: normal; /* Allows text to wrap to the next line */
    cursor: pointer;
    opacity: 0;
    animation: hover 8s infinite, fadeInOut 15s forwards;
    color: #062d3a;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    padding: 10px;
    border-radius: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  }
  
  .heart {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 24px;
    opacity: 1;
    animation: fade 8s infinite;
    animation-delay: var(--animation-delay);
  }
  
  @keyframes hover {
    0%, 100% {
      transform: translateY(0);
    }
    50% {
      transform: translateY(-5px);
    }
  }
  
  @keyframes fade {
    0%, 100% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
  }
  
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }

/* Mobile specific styles */
@media screen and (max-width: 767px) {
  #complimentPage {
    position: fixed !important; /* Force fixed positioning */
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important; /* Full viewport width */
    height: 100vh !important; /* Full viewport height */
    z-index: 9999 !important; /* Very high z-index to be above everything */
    pointer-events: none !important; /* Allow clicks to pass through the container */
    display: block !important; /* Override flex display */
  }
  
  .compliments {
    position: fixed !important; /* Change to fixed positioning */
    top: 0 !important; /* Start from the very top */
    left: 0 !important;
    width: 100vw !important; /* Full viewport width */
    height: 100vh !important; /* Full viewport height */
    overflow: visible !important;
    z-index: 10000 !important; /* Above everything */
    pointer-events: none !important; /* Allow clicks to pass through */
  }
  
  .compliment {
    max-width: 280px !important; /* Wider to fit more text */
    width: auto !important; /* Let it size to content */
    font-size: 16px !important; /* Smaller font size */
    padding: 12px !important;
    background-color: rgba(255, 255, 255, 0.9) !important; /* More opaque for better readability */
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.4) !important;
    color: #062d3a !important; /* Force text color */
    text-shadow: none !important; /* Remove text shadow on mobile */
    overflow: visible !important; /* Ensure text is not cut off */
    min-height: 40px !important; /* Ensure there's enough height for text */
    z-index: 10001 !important; /* Ensure above other elements */
    position: fixed !important; /* Change to fixed positioning */
    pointer-events: auto !important; /* Allow clicks on compliments */
    border: 1px solid rgba(0,0,0,0.1) !important; /* Subtle border for definition */
  }
  
  .heart {
    font-size: 22px !important;
    top: -18px !important;
    z-index: 10002 !important; /* Hearts above everything */
    pointer-events: none !important; /* Hearts don't need clicks */
  }
  
  /* Ensure overlay doesn't interfere */
  #overlay {
    z-index: 9998 !important; /* Below compliments */
  }
  
  /* Different animations for mobile to avoid flickering */
  @keyframes fadeInOut {
    0% {
      opacity: 0;
    }
    15% {
      opacity: 1;
    }
    85% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
}