/* Screen Sizes https://tailwindcss.com/docs/responsive-design
xs	25rem (400px)	@media (width >= 40rem) { ... }
sm	40rem (640px)	@media (width >= 40rem) { ... }
md	48rem (768px)	@media (width >= 48rem) { ... }
lg	64rem (1024px)	@media (width >= 64rem) { ... }
xl	80rem (1280px)	@media (width >= 80rem) { ... }
2xl	96rem (1536px)	@media (width >= 96rem) { ... }
*/
.anim-background {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
}

.rainbow {
  height: 100%;
  width: 0;
  top: 0;
  position: absolute;
  transform: rotate(10deg);
  transform-origin: top right;
}
.rainbow:nth-child(1) {
  animation: 58.8s linear infinite slide;
  animation-delay: -2.4s;
}
.rainbow:nth-child(2) {
  animation: 57.6s linear infinite slide;
  animation-delay: -4.8s;
}
.rainbow:nth-child(3) {
  animation: 56.4s linear infinite slide;
  animation-delay: -7.2s;
}
.rainbow:nth-child(4) {
  animation: 55.2s linear infinite slide;
  animation-delay: -9.6s;
}
.rainbow:nth-child(5) {
  animation: 54s linear infinite slide;
  animation-delay: -12s;
}
.rainbow:nth-child(6) {
  animation: 52.8s linear infinite slide;
  animation-delay: -14.4s;
}
.rainbow:nth-child(7) {
  animation: 51.6s linear infinite slide;
  animation-delay: -16.8s;
}
.rainbow:nth-child(8) {
  animation: 50.4s linear infinite slide;
  animation-delay: -19.2s;
}
.rainbow:nth-child(9) {
  animation: 49.2s linear infinite slide;
  animation-delay: -21.6s;
}
.rainbow:nth-child(10) {
  animation: 48s linear infinite slide;
  animation-delay: -24s;
}
.rainbow:nth-child(11) {
  animation: 46.8s linear infinite slide;
  animation-delay: -26.4s;
}
.rainbow:nth-child(12) {
  animation: 45.6s linear infinite slide;
  animation-delay: -28.8s;
}
.rainbow:nth-child(13) {
  animation: 44.4s linear infinite slide;
  animation-delay: -31.2s;
}
.rainbow:nth-child(14) {
  animation: 43.2s linear infinite slide;
  animation-delay: -33.6s;
}
.rainbow:nth-child(15) {
  animation: 42s linear infinite slide;
  animation-delay: -36s;
}
.rainbow:nth-child(16) {
  animation: 40.8s linear infinite slide;
  animation-delay: -38.4s;
}
.rainbow:nth-child(17) {
  animation: 39.6s linear infinite slide;
  animation-delay: -40.8s;
}
.rainbow:nth-child(18) {
  animation: 38.4s linear infinite slide;
  animation-delay: -43.2s;
}
.rainbow:nth-child(19) {
  animation: 37.2s linear infinite slide;
  animation-delay: -45.6s;
}
.rainbow:nth-child(20) {
  animation: 36s linear infinite slide;
  animation-delay: -48s;
}
.rainbow:nth-child(21) {
  animation: 34.8s linear infinite slide;
  animation-delay: -50.4s;
}
.rainbow:nth-child(22) {
  animation: 33.6s linear infinite slide;
  animation-delay: -52.8s;
}
.rainbow:nth-child(23) {
  animation: 32.4s linear infinite slide;
  animation-delay: -55.2s;
}
.rainbow:nth-child(24) {
  animation: 31.2s linear infinite slide;
  animation-delay: -57.6s;
}
.rainbow:nth-child(25) {
  animation: 30s linear infinite slide;
  animation-delay: -60s;
}

@keyframes slide {
  from {
    transform: translateX(-25vw) rotate(10deg);
  }
  to {
    transform: translateX(125vw) rotate(10deg);
  }
}
/* 
only for stuff which is easier to write in sass than tailwind

@include lg() {}

*/
:root {
  --height-navbar: 64px;
  --height-navbar-sticky: 48px;
}
@media (width >= 48rem) {
  :root {
    --height-navbar: 80px;
    --height-navbar-sticky: 64px;
  }
}
@media (width >= 80rem) {
  :root {
    --height-navbar: 100px;
    --height-navbar-sticky: 80px;
  }
}

.bg-center-center {
  background-position: center;
}

.bg-left-center {
  background-position: left center;
}

.bg-right-center {
  background-position: right center;
}

.btn .icon {
  font-size: var(--text-lg);
}

.card .btn .icon {
  font-size: var(--text-base);
}