body{
    padding-top: 3.5rem;
}

@keyframes blob-bounce {
    0% {
      transform: translate(-50%, -50%) translate3d(0, 0, 0);
    }
    25% {
      transform: translate(-50%, -50%) translate3d(100%, 0, 0);
    }
    50% {
      transform: translate(-80%, -80%) translate3d(100%, 100%, 0);
    }
    75% {
      transform: translate(-70%, -70%) translate3d(0, 100%, 0);
    }
    100% {
      transform: translate(-50%, -50%) translate3d(0, 0, 0);
    }
  }
  
  .animate-blob {
    animation: blob-bounce 5s infinite ease-in-out;
}


/* Button Styles */
.copy {
    --button-bg: #f3f4f6;
    --button-hover-bg: #e5e7eb;
    --button-text-color: #4b5563;
    --button-hover-text-color: #1f2937;
    --button-border-radius: 50%;
    --button-diameter: 40px;
    --button-outline-width: 1px;
    --button-outline-color: #9ca3af;
  
    width: var(--button-diameter);
    height: var(--button-diameter);
    border-radius: var(--button-border-radius);
    background-color: var(--button-bg);
    color: var(--button-text-color);
    border: none;
    cursor: pointer;
    position: relative;
    outline: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Tooltip Styles */
  .tooltip {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font: 12px Menlo, Roboto Mono, monospace;
    color: #374151;
    background: #ffffff;
    padding: 5px 10px;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  .tooltip::before {
    content: attr(data-text-initial);
  }
  
  /* Arrow for Tooltip */
  .tooltip::after {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 10px;
    height: 10px;
    background: inherit;
    box-shadow: inherit;
  }
  
  /* Icon Styles */
  .copy svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    fill: var(--button-text-color);
  }
  
  .checkmark {
    display: none;
  }
  
  /* Actions */
  .copy:hover .tooltip,
  .copy:focus:not(:focus-visible) .tooltip {
    opacity: 1;
    visibility: visible;
    top: calc(-100% - 10px);
  }
  
  .copy:focus:not(:focus-visible) .tooltip::before {
    content: attr(data-text-end);
  }
  
  .copy:focus:not(:focus-visible) .clipboard {
    display: none;
  }
  
  .copy:focus:not(:focus-visible) .checkmark {
    display: block;
  }
  
  .copy:hover,
  .copy:focus {
    background-color: var(--button-hover-bg);
  }
  
  .copy:active {
    outline: var(--button-outline-width) solid var(--button-outline-color);
  }
  
  .copy:hover svg {
    color: var(--button-hover-text-color);
  }