@charset "UTF-8";
:root {
  --color-primary: #ee75d2;
  --color-secondary: #75d8ee;
  --color-tertiary: #deee75;
  --color-quaternary: #9375ee;
  --color-bg: #0f021f;
}

@property --duration {
  syntax: "<time>";
  inherits: true;
  initial-value: 0s;
}
@property --wall-random {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}
.walls {
  height: 100vh;
  width: 100vw;
  position: relative;
  perspective: 800px;
  --duration: 18s;
}

.wall {
  transform-style: preserve-3d;
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(1rem, auto);
  grid-auto-flow: column;
  gap: 1rem;
  transform: translate3d(calc(var(--wi) * var(--wall-random) * 10rem), 0, calc(6rem * var(--wi)));
}
.wall:first-child {
  filter: blur(2rem);
}
.wall:nth-child(2) {
  filter: blur(1rem);
}
.wall:last-child {
  filter: blur(3rem);
}
.wall:nth-child(1) {
  --wall-index: 1;
  --wall-random: 0.6170732087;
}
.wall:nth-child(2) {
  --wall-index: 2;
  --wall-random: 0.0504229764;
}
.wall:nth-child(3) {
  --wall-index: 3;
  --wall-random: 0.1844323846;
}
.wall:nth-child(4) {
  --wall-index: 4;
  --wall-random: 0.6055166132;
}
.wall:nth-child(5) {
  --wall-index: 5;
  --wall-random: 0.2644582951;
}
.wall:nth-child(6) {
  --wall-index: 6;
  --wall-random: 0.0874474941;
}
.wall:nth-child(7) {
  --wall-index: 7;
  --wall-random: 0.286589302;
}
.wall:nth-child(8) {
  --wall-index: 8;
  --wall-random: 0.6213136839;
}
.wall:nth-child(9) {
  --wall-index: 9;
  --wall-random: 0.786551381;
}
.wall:nth-child(10) {
  --wall-index: 10;
  --wall-random: 0.067400838;
}
.wall:nth-child(11) {
  --wall-index: 11;
  --wall-random: 0.6326431419;
}
.wall:nth-child(12) {
  --wall-index: 12;
  --wall-random: 0.37614578;
}
.wall:nth-child(13) {
  --wall-index: 13;
  --wall-random: 0.6326699692;
}
.wall:nth-child(14) {
  --wall-index: 14;
  --wall-random: 0.4140827632;
}

.column {
  display: flex;
  flex-direction: column-reverse;
  position: relative;
  gap: 0.25rem;
  height: 100vh;
  transform: translateY(-120vh);
  -webkit-animation: fall var(--duration) ease-in-out infinite;
          animation: fall var(--duration) ease-in-out infinite;
  -webkit-animation-duration: calc( var(--duration) * max(var(--r0), var(--r1), var(--r2)) );
          animation-duration: calc( var(--duration) * max(var(--r0), var(--r1), var(--r2)) );
  -webkit-animation-delay: calc(var(--wall-random) * var(--r0) * 10s);
          animation-delay: calc(var(--wall-random) * var(--r0) * 10s);
}
.column:nth-child(1) {
  --r0: 0.2667562728;
  --r1: 0.3073754553;
  --r2: 0.6698914326;
}
.column:nth-child(2) {
  --r0: 0.8525266815;
  --r1: 0.9249360938;
  --r2: 0.6958950184;
}
.column:nth-child(3) {
  --r0: 0.5974204398;
  --r1: 0.5392857236;
  --r2: 0.9868959106;
}
.column:nth-child(4) {
  --r0: 0.8084711304;
  --r1: 0.3197569994;
  --r2: 0.4180405085;
}
.column:nth-child(5) {
  --r0: 0.2356659145;
  --r1: 0.5491923751;
  --r2: 0.2452004617;
}
.column:nth-child(6) {
  --r0: 0.8044336497;
  --r1: 0.8996052008;
  --r2: 0.4509354051;
}
.column:nth-child(7) {
  --r0: 0.2870292891;
  --r1: 0.222078666;
  --r2: 0.5351496904;
}
.column:nth-child(8) {
  --r0: 0.4754987983;
  --r1: 0.1663957029;
  --r2: 0.4020117772;
}
.column:nth-child(9) {
  --r0: 0.3973535884;
  --r1: 0.4812830784;
  --r2: 0.8715806909;
}
.column:nth-child(10) {
  --r0: 0.8651930532;
  --r1: 0.6619604811;
  --r2: 0.9702993093;
}
.column:nth-child(11) {
  --r0: 0.3922899554;
  --r1: 0.2383609038;
  --r2: 0.9488101804;
}
.column:nth-child(12) {
  --r0: 0.1178501719;
  --r1: 0.7597302062;
  --r2: 0.5401326819;
}
.column:nth-child(13) {
  --r0: 0.380128819;
  --r1: 0.7366514735;
  --r2: 0.9075131666;
}
.column:nth-child(14) {
  --r0: 0.8725239066;
  --r1: 0.9837560845;
  --r2: 0.8189585158;
}
.column:nth-child(15) {
  --r0: 0.773910071;
  --r1: 0.1636298306;
  --r2: 0.6888763158;
}
.column:nth-child(16) {
  --r0: 0.845166204;
  --r1: 0.2077736602;
  --r2: 0.5005274328;
}
.column:nth-child(17) {
  --r0: 0.0789078664;
  --r1: 0.0995473825;
  --r2: 0.9712346745;
}
.column:nth-child(18) {
  --r0: 0.8821814586;
  --r1: 0.8144291733;
  --r2: 0.9803799146;
}
.column:nth-child(19) {
  --r0: 0.4224031979;
  --r1: 0.5141618691;
  --r2: 0.9160609269;
}
.column:nth-child(20) {
  --r0: 0.4892544499;
  --r1: 0.4328721934;
  --r2: 0.819921107;
}
.column:nth-child(21) {
  --r0: 0.4849029766;
  --r1: 0.5702452428;
  --r2: 0.4573933598;
}
.column:nth-child(22) {
  --r0: 0.9366970896;
  --r1: 0.2764797522;
  --r2: 0.7285422178;
}
.column:nth-child(23) {
  --r0: 0.7671160044;
  --r1: 0.5350213541;
  --r2: 0.9465567762;
}
.column:nth-child(24) {
  --r0: 0.579798768;
  --r1: 0.4241278564;
  --r2: 0.4709350469;
}
.column:nth-child(25) {
  --r0: 0.5583333455;
  --r1: 0.7587377791;
  --r2: 0.2515813171;
}
.column:nth-child(26) {
  --r0: 0.125489459;
  --r1: 0.5483087089;
  --r2: 0.5387693819;
}
.column:nth-child(27) {
  --r0: 0.6898868173;
  --r1: 0.39597152;
  --r2: 0.2720621305;
}
.column:nth-child(28) {
  --r0: 0.4336976566;
  --r1: 0.0752036812;
  --r2: 0.256062894;
}
.column:nth-child(29) {
  --r0: 0.9193103862;
  --r1: 0.5003364891;
  --r2: 0.7841666508;
}
.column:nth-child(30) {
  --r0: 0.8623774935;
  --r1: 0.8799422918;
  --r2: 0.3721470101;
}

.variant {
  display: flex;
  flex-direction: column-reverse;
  -webkit-mask: linear-gradient(to bottom, transparent 50%, black);
          mask: linear-gradient(to bottom, transparent 50%, black);
  background: linear-gradient(to bottom, var(--color-secondary) 70%, var(--color-primary) 90%, var(--color-tertiary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.variant:nth-child(2) {
  transform-style: preserve-3d;
  -webkit-animation: variant 0.2s ease-in-out infinite;
          animation: variant 0.2s ease-in-out infinite;
  position: absolute;
  inset: 0;
}

@-webkit-keyframes variant {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
    transform: translate3d(0.5rem, -1rem, 1rem);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

@keyframes variant {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 0.3;
  }
  50% {
    opacity: 0.2;
    transform: translate3d(0.5rem, -1rem, 1rem);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fall {
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  to {
    transform: translateY(2vh);
    opacity: 0;
  }
}
@keyframes fall {
  60% {
    opacity: 1;
  }
  90% {
    opacity: 0;
  }
  to {
    transform: translateY(2vh);
    opacity: 0;
  }
}
.drop {
  display: grid;
  place-items: center;
}
.drop:first-child {
  position: relative;
}
.drop:first-child:after {
  display: grid;
  place-items: center;
  content: "✨";
  -webkit-text-fill-color: var(--color-primary);
  position: absolute;
  inset: 0;
  z-index: 0;
}

body {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: "Road Rage", "Helvetica Neue", "serif";
  font-weight: bold;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--color-bg), black);
  color: var(--color-primary);
}

a.labs-follow-me {
  left: 2rem;
  right: 2rem;
  bottom: 1rem;
  top: unset;
  text-align: center;
}

* {
  box-sizing: border-box;
}

@media only screen and (max-width: 50rem) {
  :root {
    font-size: 90%;
  }
}