/** Wave effect config */
@property --animation-tick {
  syntax: '<number>';
  inherits: false;
  initial-value: 10000;
}

@property --height {
  syntax: '<number>';
  inherits: false;
  initial-value: .7;
}

@keyframes move {
  100% {
    --animation-tick: 0;
  }
}

div.wave-animation {
  --amplitude: 35;
  --animation-tick: 18000;
  --gap: 120;
  --height: 0.5;
  --speed: 300;
  --layer1color: #29bac20d;
  --layer2color: #29bac20d;
  --layer3color: #29bac20d;
  position: absolute;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  background: paint(waveDraw);
  margin: auto;
  cursor: pointer;
  flex-shrink: 0;
  animation: move var(--speed) infinite linear;
  overflow: hidden;
  transition: --height 8s;
}
.bg-white {
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

.shadow-xl {
  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color),
    0 8px 10px -6px var(--tw-shadow-color);
  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
    var(--tw-shadow);
}
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke,
    opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.transition-\[background-color\] {
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 0.15s;
}
.ease-in {
  transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.ease-in-out {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
  .dark\:border-gray-500 {
    --tw-border-opacity: 1;
    border-color: rgb(107 114 128 / var(--tw-border-opacity));
  }
  .dark\:bg-gray-700 {
    --tw-bg-opacity: 1;
    background-color: rgb(55 65 81 / var(--tw-bg-opacity));
  }
  .dark\:bg-gray-800 {
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity));
  }
  .dark\:bg-gray-900 {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity));
  }
  .dark\:text-slate-200 {
    --tw-text-opacity: 1;
    color: rgb(226 232 240 / var(--tw-text-opacity));
  }
  .dark\:shadow-slate-700 {
    --tw-shadow-color: #334155;
    --tw-shadow: var(--tw-shadow-colored);
  }
  .dark\:placeholder\:text-slate-300::-moz-placeholder {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity));
  }
  .dark\:placeholder\:text-slate-300::placeholder {
    --tw-text-opacity: 1;
    color: rgb(203 213 225 / var(--tw-text-opacity));
  }
}
/** common background */