body {
  background-color: #1a1a2e;
  color: #e0e0e0;
  font-family: "Outfit", sans-serif;
  overflow-x: hidden; /* Prevent horizontal scrollbar */
  position: relative; /* Ensure proper positioning context */
}

.glass-effect {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.image-container {
  position: relative;
  width: 100%;
  padding-top: 75%;
  /* 4:3 Aspect Ratio */
  overflow: hidden;
}

.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, #4d4dff, #6441a4);
  opacity: 0.2;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateY(50px);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.05);
  }

  100% {
    transform: scale(1);
  }
}

.animate-fadeIn {
  animation: fadeIn 1s ease-out;
}

.animate-slideIn {
  animation: slideIn 0.5s ease-out;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

.live-pulse {
  animation: live-pulse 2s infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(83, 252, 24, 0.7);
  }

  70% {
    box-shadow: 0 0 0 10px rgba(83, 252, 24, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(83, 252, 24, 0);
  }
}

.scrolldiv1 {
  left: 50%;
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 25px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: antiquewhite;
  animation: scrolldown 1.2s ease-in-out infinite 0.15s;
}

.scrolldiv2 {
  left: 50%;
  transform: translateY(0%) rotate(45deg);
  opacity: 0;
  width: 2em;
  height: 2em;
  background-color: transparent;
  z-index: 80;
  bottom: 40px;
  position: absolute;
  border-width: 0 0.25em 0.25em 0;
  border-style: solid;
  border-color: antiquewhite;
  animation: scrolldown 1.2s ease-in-out infinite;
}

.scrolldiv1:hover,
.scrolldiv2:hover {
  cursor: pointer;
}

@keyframes scrolldown {
  0% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }

  50% {
    transform: translateY(0%) rotate(45deg);
    opacity: 0.2;
  }

  100% {
    transform: translateY(20%) rotate(45deg);
    opacity: 0.7;
  }
}

a.hover\:cursor-pointer:hover {
  cursor: pointer;
}

/* on mobile hide above */
@media (max-width: 1280px) {
  .text-logo {
    display: none;
  }
}

.candy {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 30%;
  left: 27%;
  z-index: -1;
  animation: hovereffect-1 4.4s infinite;
}

.watermelon {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 20%;
  right: 26%;
  z-index: -1;
  animation: hovereffect-2 4.3s infinite;
}

@keyframes hovereffect-1 {
  0%,
  100% {
    transform: rotate(25deg) translate(0, 0);
  }

  50% {
    transform: rotate(0deg) translate(0, -10px);
  }
}

@keyframes hovereffect-2 {
  0%,
  100% {
    transform: rotate(0deg) translate(0, 0);
  }

  50% {
    transform: rotate(-25deg) translate(0, -10px);
  }
}

@keyframes hovereffect-3 {
  0%,
  100% {
    transform: translate(0, 0);
  }

  50% {
    transform: translate(0, -10px);
  }
}

.gelatto,
.blackberry,
.bomb,
.banana {
  position: fixed;
  top: 0;
  width: 200px;
  z-index: -1000;
  pointer-events: none;
  --darkreader-ignore: true;
}

.gelatto,
.blackberry {
  left: -30px;
}

.bomb,
.banana {
  right: -62px;
}

.bomb {
  top: 10%;
  animation: hovereffect-3 4.2s infinite;
}

.banana {
  top: 60%;
  animation: hovereffect-3 4.1s infinite;
}

.gelatto {
  top: 5%;
  animation: hovereffect-3 4.3s infinite;
}

.blackberry {
  top: 50%;
  animation: hovereffect-3 4.4s infinite;
}

/* hide on mobile */
@media (max-width: 900px) {
  .watermelon,
  .candy {
    display: none;
  }

  .float-left,
  .float-right {
    display: none;
  }
}

.bg-primary {
  background-color: #EEAF0E;
}

.float-left {
  position: absolute;
  right: 0;
  top: 460px;
  width: 300px;
  animation: floatLeft 5s infinite;
}

.float-right {
  position: absolute;
  left: 0;
  top: 110px;
  width: 300px;
  animation: floatRight 5s infinite;
}

@keyframes floatLeft {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes floatRight {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes pulse-ring {
  0% {
    transform: scale(0.33);
  }

  80%,
  100% {
    opacity: 0;
  }
}

@keyframes pulse-dot {
  0% {
    transform: scale(0.8);
  }

  50% {
    transform: scale(1);
  }

  100% {
    transform: scale(0.8);
  }
}

.pulse-ring {
  animation: pulse-ring 1.25s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

.pulse-dot {
  animation: pulse-dot 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) infinite;
}

.coin-icon-shadow {
  filter: drop-shadow(0 0 1px rgba(0, 0, 0, 1));
}