/* Adapted from Uiverse.io by Ashon-G; colors tuned for the Eco Club palette. */
.uiverse {
  --duration: 7s;
  --easing: linear;
  --c-color-1: rgba(200, 219, 147, .7);
  --c-color-2: #527b59;
  --c-color-3: #8dbb75;
  --c-color-4: rgba(241, 238, 228, .7);
  --c-shadow: rgba(200, 219, 147, .38);
  --c-shadow-inset-top: rgba(200, 219, 147, .75);
  --c-shadow-inset-bottom: rgba(241, 238, 228, .45);
  --c-radial-inner: #31563c;
  --c-radial-outer: #18392c;
  --c-color: #f1eee4;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  isolation: isolate;
  border: 0;
  border-radius: 40px;
  padding: 0;
  color: var(--c-color);
  background: radial-gradient(circle, var(--c-radial-inner), var(--c-radial-outer) 80%);
  box-shadow: 0 0 18px var(--c-shadow);
  text-align: center;
  transition: box-shadow .3s ease, transform .3s ease;
}
.uiverse:before {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 2px 9px var(--c-shadow-inset-top), inset 0 -3px 5px var(--c-shadow-inset-bottom);
}
.uiverse:hover { --duration: 1400ms; box-shadow: 0 0 28px var(--c-shadow); transform: translateY(-2px); }
.uiverse:focus-visible { outline: 2px solid var(--c-color-1); outline-offset: 5px; }
.uiverse .uiverse-wrapper {
  position: relative;
  display: block;
  min-width: 190px;
  overflow: hidden;
  padding: 14px 18px;
  border-radius: inherit;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.uiverse .uiverse-label {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  white-space: nowrap;
}
.uiverse .uiverse-label i { color: var(--c-color-1); font-size: 17px; font-style: normal; line-height: 1; }
.uiverse .uiverse-circles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.uiverse .circle {
  --blur: 8px;
  position: absolute;
  top: 0;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  filter: blur(var(--blur));
  background: var(--background, transparent);
  transform: translate(var(--x, 0), var(--y, 0)) translateZ(0);
  animation: var(--animation, none) var(--duration) var(--easing) infinite;
}
.uiverse .circle-1,.uiverse .circle-9,.uiverse .circle-10 { --background: var(--c-color-4); }
.uiverse .circle-3,.uiverse .circle-4 { --background: var(--c-color-2); --blur: 14px; }
.uiverse .circle-5,.uiverse .circle-6 { --background: var(--c-color-3); --blur: 16px; }
.uiverse .circle-2,.uiverse .circle-7,.uiverse .circle-8,.uiverse .circle-11,.uiverse .circle-12 { --background: var(--c-color-1); --blur: 12px; }
.uiverse .circle-1 { --x: 0px; --y: -40px; --animation: circle-1; }
.uiverse .circle-2 { --x: 92px; --y: 8px; --animation: circle-2; }
.uiverse .circle-3 { --x: -12px; --y: -12px; --animation: circle-3; }
.uiverse .circle-4 { --x: 80px; --y: -12px; --animation: circle-4; }
.uiverse .circle-5 { --x: 12px; --y: -4px; --animation: circle-5; }
.uiverse .circle-6 { --x: 56px; --y: 16px; --animation: circle-6; }
.uiverse .circle-7 { --x: 8px; --y: 28px; --animation: circle-7; }
.uiverse .circle-8 { --x: 28px; --y: -4px; --animation: circle-8; }
.uiverse .circle-9 { --x: 20px; --y: -12px; --animation: circle-9; }
.uiverse .circle-10 { --x: 64px; --y: 16px; --animation: circle-10; }
.uiverse .circle-11 { --x: 4px; --y: 4px; --animation: circle-11; }
.uiverse .circle-12 { --x: 52px; --y: 4px; --blur: 14px; --animation: circle-12; }
@keyframes circle-1 { 33% { transform: translate(0, 16px) translateZ(0); } 66% { transform: translate(12px, 64px) translateZ(0); } }
@keyframes circle-2 { 33% { transform: translate(80px, -10px) translateZ(0); } 66% { transform: translate(72px, -48px) translateZ(0); } }
@keyframes circle-3 { 33% { transform: translate(20px, 12px) translateZ(0); } 66% { transform: translate(12px, 4px) translateZ(0); } }
@keyframes circle-4 { 33% { transform: translate(76px, -12px) translateZ(0); } 66% { transform: translate(112px, -8px) translateZ(0); } }
@keyframes circle-5 { 33% { transform: translate(84px, 28px) translateZ(0); } 66% { transform: translate(40px, -32px) translateZ(0); } }
@keyframes circle-6 { 33% { transform: translate(28px, -16px) translateZ(0); } 66% { transform: translate(76px, -56px) translateZ(0); } }
@keyframes circle-7 { 33% { transform: translate(8px, 28px) translateZ(0); } 66% { transform: translate(20px, -60px) translateZ(0); } }
@keyframes circle-8 { 33% { transform: translate(32px, -4px) translateZ(0); } 66% { transform: translate(56px, -20px) translateZ(0); } }
@keyframes circle-9 { 33% { transform: translate(20px, -12px) translateZ(0); } 66% { transform: translate(80px, -8px) translateZ(0); } }
@keyframes circle-10 { 33% { transform: translate(68px, 20px) translateZ(0); } 66% { transform: translate(100px, 28px) translateZ(0); } }
@keyframes circle-11 { 33% { transform: translate(4px, 4px) translateZ(0); } 66% { transform: translate(68px, 20px) translateZ(0); } }
@keyframes circle-12 { 33% { transform: translate(56px, 0) translateZ(0); } 66% { transform: translate(60px, -32px) translateZ(0); } }
@media (prefers-reduced-motion: reduce) {
  .uiverse, .uiverse .circle { animation: none !important; transition: none !important; }
  .uiverse:hover { transform: none; }
}