@font-face {
    font-family: "GatwickFont";
    src: url(/56c82b48f3bbd803281b.woff2) format("woff2"),
         url(/30559e84fa4bb1a7c270.woff) format("woff");
}


.content-section {
  position: relative;
  background-color: antiquewhite;
  display: flex;
  align-items: center;
}


h1{
    font-size: 3.5rem;;
}

li{
  padding-left:25px;
  list-style-position: inside; 
}

a{
    color: #000000; /* blue link color */
    text-decoration: none; /* remove underline */
}

a[href^="http"]:not([href*="moonbow.online"])::after {
  content: " 🔗";
  margin-left: 0.2em;
}


.text-section {
  position: relative;
  background-color: #A48E7F8A;
  height: 50%;
  height: auto;
  width: 60%;
  margin-left: 33vw;
  border-radius: 20px;
  box-shadow: 0 15px 100px rgb(0, 0, 0), 0 5px 10px rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255, 255, 255, 0.6);
  border: 10px solid rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(8px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  margin-top: 15vh;
  margin-bottom: 35vh;
  z-index: 99;
}


.text-cookies{
    margin-left:3vw;
    margin-right: 2vw;
}

.cookie-jar-section {
  position: absolute;
  width: 100%;
  height:auto;
  bottom:0;
}






canvas {
  display: block;
  
}
#specialBtn {
  position: absolute;
  padding: 10px 20px;
  bottom: 5vh;
  left: 50vw;
  font-size: 2rem;
  background: #000;
  color: white;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: GatwickFont, sans-serif;

  /* hidden by default */
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(0.8); /* start smaller */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);

  transition:
    transform 0.35s cubic-bezier(.25,.8,.25,1),
    opacity 0.35s ease,
    visibility 0s linear 0.35s; /* delay hiding until after anim */
}

#specialBtn.visible {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, -50%) scale(1); /* grow into place */
  transition:
    transform 0.35s cubic-bezier(.25,.8,.25,1),
    opacity 0.35s ease,
    visibility 0s linear 0s; /* visible immediately */
}

/* ✨ Subtle hover effect */
#specialBtn.visible:hover {
  transform: translate(-50%, -50%) scale(1.05); /* gentle lift */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  background: #111;
}

/* 👆 Noticeable click effect */
#specialBtn.visible:active {
  transform: translate(-50%, -50%) scale(0.95); /* press down */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6);
  background: #222;
}

/* 🚀 Modern "bounce" click animation */
#specialBtn.visible.button-clicked {
  animation: buttonBounce 0.35s ease;
}

@keyframes buttonBounce {
  0% {
    transform: translate(-50%, -50%) scale(1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
  }
  40% {
    transform: translate(-50%, -50%) scale(0.9); /* quick press */
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  }
  70% {
    transform: translate(-50%, -50%) scale(1.05); /* overshoot bounce */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
  }
  100% {
    transform: translate(-50%, -50%) scale(1); /* settle back */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
  }
}







/* Base styles */
:root {
  --text: #2B3044;
  --line: #685d5d;
  --line-active: #cca44e;
}


a.drip-link {
  display: inline-block;
  position: relative;
  text-decoration: none;
  color: inherit;
  margin: 0 var(--spacing, 0px);
  transition: margin .25s;
}

a.drip-link svg {
  width: 76px;
  height: 40px;
  position: absolute;
  left: 0;
  bottom: 0;
  transform: translate(-50%, 7px) translateZ(0);
  fill: none;
  stroke: var(--stroke, var(--line));
  stroke-linecap: round;
  stroke-width: 3px;
  stroke-dasharray: var(--offset, 69px) 278px;
  stroke-dashoffset: 361px;
  transition: stroke .25s ease var(--stroke-delay, 0s), stroke-dasharray .35s;
  transform: scale(3);
}

a.drip-link:hover {
  --spacing: 4px;
  --stroke: var(--line-active);
  --stroke-delay: .1s;
  --offset: 180px;
}