@import "https://api.fontshare.com/v2/css?f[]=array@400,700&display=swap";
@import "https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;700&display=swap";
.boot-screen {
  z-index: 9999;
  box-sizing: border-box;
  background: #000;
  padding: 6vw;
  transition: opacity .4s;
  position: fixed;
  inset: 0;
}

.boot-screen--hidden {
  opacity: 0;
  pointer-events: none;
}

.boot-screen__lines {
  color: #fff;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
  font-family: Courier New, Courier, monospace;
  font-size: clamp(13px, 1.5vw, 18px);
  line-height: 2;
}

.boot-screen__cursor {
  vertical-align: text-bottom;
  background: #fff;
  width: .55em;
  height: 1em;
  margin-left: 2px;
  animation: .8s step-end infinite bootCursorBlink;
  display: inline-block;
}

@keyframes bootCursorBlink {
  50% {
    opacity: 0;
  }
}

.boot-screen__logo {
  text-align: center;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #dc2626f2;
  text-shadow: 0 0 40px #dc2626cc, 0 0 120px #dc262666;
  opacity: 0;
  justify-content: center;
  align-items: center;
  font-family: array, sans-serif;
  font-size: clamp(72px, 15vw, 200px);
  transition: opacity .4s, transform .4s;
  display: flex;
  position: absolute;
  inset: 0;
  transform: scale(.9);
}

.boot-screen__logo--in {
  opacity: 1;
  transform: scale(1);
}

.skeleton-screen {
  z-index: 9999;
  box-sizing: border-box;
  opacity: 0;
  pointer-events: none;
  background: #000;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
  padding: 6vw;
  transition: opacity .3s;
  display: flex;
  position: fixed;
  inset: 0;
}

.skeleton-screen--visible {
  opacity: 1;
  pointer-events: auto;
}

.skeleton-block {
  background: linear-gradient(90deg, #ffffff0f 25%, #dc262624 50%, #ffffff0f 75%) 0 0 / 200% 100%;
  border-radius: 4px;
  animation: 1.4s ease-in-out infinite skeletonPulse;
}

@keyframes skeletonPulse {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

.skeleton-block--title {
  width: min(420px, 60vw);
  height: 40px;
}

.skeleton-block--line {
  width: min(600px, 80vw);
  height: 16px;
}

.skeleton-block--short {
  width: min(380px, 55vw);
}

.skeleton-grid {
  gap: 1rem;
  width: 100%;
  margin-top: 1.5rem;
  display: flex;
}

.skeleton-block--card {
  flex: 1;
  height: 220px;
}

.skeleton-block--tall {
  width: 100%;
  height: 55vh;
  margin-top: 1rem;
}

@media (width <= 640px) {
  .skeleton-grid {
    flex-direction: column;
  }

  .skeleton-block--card {
    height: 120px;
  }
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

*, :before, :after {
  box-sizing: border-box;
}

a {
  color: inherit;
  text-decoration: none;
}

html, body {
  overscroll-behavior-x: none;
  font-optical-sizing: auto;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  font-family: array, sans-serif;
  font-size: clamp(20px, 3.6vw, 64px);
  font-weight: 600;
  overflow-x: hidden;
}

body {
  background-color: #000;
  background-image: linear-gradient(#dc26260d 1px, #0000 1px), linear-gradient(90deg, #dc26260d 1px, #0000 1px);
  background-size: 48px 48px;
}

p {
  font-optical-sizing: auto;
  color: #ffffffbf;
  background: #000;
  margin: 0;
  padding: 0;
  font-family: Space Grotesk, sans-serif;
  font-size: clamp(16px, 1.4vw, 20px);
  font-weight: 400;
  line-height: 1.9;
}

::-webkit-scrollbar {
  width: 13px;
  height: 13px;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-top: 6px solid #000;
  width: 50%;
}

::-webkit-scrollbar-thumb:hover {
  background: #bbb;
}

::-webkit-scrollbar-corner {
  background: #000;
}

.wrapper {
  perspective: 500px;
  width: auto;
  margin: auto;
  animation: 6s linear infinite rotateAngle;
  transform: rotateX(10deg);
}

button {
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: .04em;
  mix-blend-mode: color-dodge;
  perspective: 500px;
  transform-style: preserve-3d;
  background: #fff;
  border: none;
  border-radius: .4em;
  margin: .5em 0;
  padding: .9em 2.5em;
  font-family: space grotesk, sans-serif;
  font-size: 21px;
  font-weight: 500;
  display: block;
  position: relative;
}

button:before, button:after {
  --z: 0px;
  content: "";
  opacity: 0;
  mix-blend-mode: inherit;
  border-radius: inherit;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transform: translate3d(calc(var(--z) * 0px),
        calc(var(--z) * 0px),
        calc(var(--z) * 0px));
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

button span {
  mix-blend-mode: none;
  display: block;
}

button:after {
  background-color: #b30000;
}

button:before {
  background-color: #ff1731;
}

button:hover {
  background-color: #ffd6d6;
  transition: background .3s .1s;
}

button:hover:before {
  --z: .04;
  animation: 2.2s forwards translateWobble;
}

button:hover:after {
  --z: -.06;
  animation: 2.2s forwards translateWobble;
}

@keyframes rotateAngle {
  0% {
    animation-timing-function: cubic-bezier(.61, 1, .88, 1);
    transform: rotateY(0)rotateX(10deg);
  }

  25% {
    transform: rotateY(20deg)rotateX(10deg);
  }

  50% {
    animation-timing-function: cubic-bezier(.61, 1, .88, 1);
    transform: rotateY(0)rotateX(10deg);
  }

  75% {
    transform: rotateY(-20deg)rotateX(10deg);
  }

  100% {
    transform: rotateY(0)rotateX(10deg);
  }
}

@keyframes translateWobble {
  0% {
    opacity: 0;
    transform: translate3d(calc(var(--z) * 0px),
            calc(var(--z) * 0px),
            calc(var(--z) * 0px));
  }

  16% {
    transform: translate3d(calc(var(--z) * 160px),
            calc(var(--z) * 160px),
            calc(var(--z) * 160px));
  }

  28% {
    opacity: 1;
    transform: translate3d(calc(var(--z) * 70px),
            calc(var(--z) * 70px),
            calc(var(--z) * 70px));
  }

  44% {
    transform: translate3d(calc(var(--z) * 130px),
            calc(var(--z) * 130px),
            calc(var(--z) * 130px));
  }

  59% {
    transform: translate3d(calc(var(--z) * 85px),
            calc(var(--z) * 85px),
            calc(var(--z) * 85px));
  }

  73% {
    transform: translate3d(calc(var(--z) * 110px),
            calc(var(--z) * 110px),
            calc(var(--z) * 110px));
  }

  88% {
    opacity: 1;
    transform: translate3d(calc(var(--z) * 90px),
            calc(var(--z) * 90px),
            calc(var(--z) * 90px));
  }

  100% {
    opacity: 1;
    transform: translate3d(calc(var(--z) * 100px),
            calc(var(--z) * 100px),
            calc(var(--z) * 100px));
  }
}

.site-footer {
  text-align: center;
  border-top: 1px solid #dc262633;
  padding: .6rem 1rem .5rem;
}

.site-footer__links {
  flex-wrap: wrap;
  justify-content: center;
  gap: .85rem;
  margin-bottom: .25rem;
  display: flex;
}

.site-footer__links a {
  color: #ffffff8c;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-family: Space Grotesk, sans-serif;
  font-size: 11px;
  text-decoration: none;
}

.site-footer__links a:hover {
  color: #dc2626e6;
}

.site-footer__copyright {
  color: #ffffff59;
  margin: 0;
  font-size: 10px;
}
/*# sourceMappingURL=project.2809464d.css.map */