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

html {
  height: 100%;
  overflow: hidden;
  font-family: "Noto Sans Display", sans-serif;
}

body {
  height: 100%;
  overflow: hidden;
  background: radial-gradient(farthest-corner at 50% 0%, #1b3c4b 0%, #00050b 100%);
}

main {
  position: fixed;
  inset: 0;
  overflow: hidden;
  display: grid;
  place-items: center;
}

.contact,
.copyright {
  position: fixed;
  right: 1.75rem;
  z-index: 10;
  letter-spacing: 0.04em;
}

.contact {
  top: 1.25rem;
}

.copyright {
  bottom: 1.25rem;
}

.contact a {
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-size: clamp(0.7rem, 2.5vw, 0.875rem);
  transition: color 0.2s;
}

.contact a:hover {
  color: #fff;
}

.copyright {
  color: rgba(255, 255, 255, 0.35);
  font-size: clamp(0.65rem, 2vw, 0.75rem);
}

.light-rays {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  list-style: none;
  pointer-events: none;
  -webkit-filter: blur(0.6rem);
  filter: blur(0.6rem);
}

.light-rays>li {
  --deg: 0;
  --length: 0px;
  --thickness: 20px;
  --duration: 2s;
  --delay: 1s;
  --rotate: 0deg;
  --degRange: 72.5deg;
  --spreadRange: 70vw;

  position: absolute;
  transform-style: preserve-3d;
  perspective: 500px;
  width: var(--thickness);
  height: calc(20% + 370px + var(--length));
  left: 50%;
  transform:
    translateX(calc(-50% + var(--deg) * var(--spreadRange) * -1 + 0.5 * var(--spreadRange))) translateY(-100px) rotateZ(calc(var(--degRange) * -0.5 + var(--deg) * var(--degRange))) rotateX(0.01deg);
  transform-origin: center -100px;
  mix-blend-mode: screen;
  animation:
    shimmer linear var(--duration) calc(var(--delay) * -1) infinite alternate forwards,
    rotate ease-in-out calc(var(--duration) * 3.14) calc(var(--delay) * -1) infinite alternate forwards;
}

.light-rays>li::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(166, 255, 248, 1), rgba(166, 255, 248, 0));
  transform-origin: top center;
  transform: rotateX(40deg);
}

.light-rays>li:nth-child(1) {
  --deg: .42;
  --thickness: 21px;
  --length: 15px;
  --duration: 1.8s;
  --delay: 2.3s;
  --rotate: 2deg;
}

.light-rays>li:nth-child(2) {
  --deg: .73;
  --thickness: 14px;
  --length: -20px;
  --duration: 2.1s;
  --delay: 2.7s;
  --rotate: -1deg;
}

.light-rays>li:nth-child(3) {
  --deg: .15;
  --thickness: 29px;
  --length: 30px;
  --duration: 1.4s;
  --delay: 2.5s;
  --rotate: 3deg;
}

.light-rays>li:nth-child(4) {
  --deg: .88;
  --thickness: 11px;
  --length: -40px;
  --duration: 2.4s;
  --delay: 2.1s;
  --rotate: -3deg;
}

.light-rays>li:nth-child(5) {
  --deg: .61;
  --thickness: 33px;
  --length: 10px;
  --duration: 1.6s;
  --delay: 2.9s;
  --rotate: 1deg;
}

.light-rays>li:nth-child(6) {
  --deg: .29;
  --thickness: 18px;
  --length: -10px;
  --duration: 2.3s;
  --delay: 2.4s;
  --rotate: -2deg;
}

.light-rays>li:nth-child(7) {
  --deg: .94;
  --thickness: 25px;
  --length: 45px;
  --duration: 1.2s;
  --delay: 2.2s;
  --rotate: 4deg;
}

.light-rays>li:nth-child(8) {
  --deg: .07;
  --thickness: 10px;
  --length: -35px;
  --duration: 2.5s;
  --delay: 2.8s;
  --rotate: -4deg;
}

.light-rays>li:nth-child(9) {
  --deg: .55;
  --thickness: 28px;
  --length: 20px;
  --duration: 1.9s;
  --delay: 2.6s;
  --rotate: 2deg;
}

.light-rays>li:nth-child(10) {
  --deg: .38;
  --thickness: 16px;
  --length: -25px;
  --duration: 1.5s;
  --delay: 2.3s;
  --rotate: -1deg;
}

.light-rays>li:nth-child(11) {
  --deg: .82;
  --thickness: 22px;
  --length: 5px;
  --duration: 2.2s;
  --delay: 2.7s;
  --rotate: 3deg;
}

.light-rays>li:nth-child(12) {
  --deg: .47;
  --thickness: 32px;
  --length: -15px;
  --duration: 1.7s;
  --delay: 2.5s;
  --rotate: -2deg;
}

.light-rays>li:nth-child(13) {
  --deg: .19;
  --thickness: 13px;
  --length: 40px;
  --duration: 2.4s;
  --delay: 2.1s;
  --rotate: 1deg;
}

.light-rays>li:nth-child(14) {
  --deg: .67;
  --thickness: 20px;
  --length: -30px;
  --duration: 1.3s;
  --delay: 2.9s;
  --rotate: -3deg;
}

.light-rays>li:nth-child(15) {
  --deg: .34;
  --thickness: 27px;
  --length: 25px;
  --duration: 2.0s;
  --delay: 2.4s;
  --rotate: 4deg;
}

.light-rays>li:nth-child(16) {
  --deg: .91;
  --thickness: 15px;
  --length: -45px;
  --duration: 1.6s;
  --delay: 2.2s;
  --rotate: -4deg;
}

.light-rays>li:nth-child(17) {
  --deg: .26;
  --thickness: 30px;
  --length: 35px;
  --duration: 2.3s;
  --delay: 2.8s;
  --rotate: 2deg;
}

.light-rays>li:nth-child(18) {
  --deg: .79;
  --thickness: 12px;
  --length: -5px;
  --duration: 1.4s;
  --delay: 2.6s;
  --rotate: -1deg;
}

.light-rays>li:nth-child(19) {
  --deg: .53;
  --thickness: 24px;
  --length: 15px;
  --duration: 2.1s;
  --delay: 2.3s;
  --rotate: 3deg;
}

.light-rays>li:nth-child(20) {
  --deg: .11;
  --thickness: 19px;
  --length: -20px;
  --duration: 1.8s;
  --delay: 2.7s;
  --rotate: -2deg;
}

.light-rays>li:nth-child(21) {
  --deg: .65;
  --thickness: 34px;
  --length: 50px;
  --duration: 1.5s;
  --delay: 2.5s;
  --rotate: 1deg;
}

.light-rays>li:nth-child(22) {
  --deg: .44;
  --thickness: 17px;
  --length: -10px;
  --duration: 2.4s;
  --delay: 2.1s;
  --rotate: -3deg;
}

.light-rays>li:nth-child(23) {
  --deg: .87;
  --thickness: 23px;
  --length: 30px;
  --duration: 1.2s;
  --delay: 2.9s;
  --rotate: 4deg;
}

.light-rays>li:nth-child(24) {
  --deg: .32;
  --thickness: 11px;
  --length: -40px;
  --duration: 2.5s;
  --delay: 2.4s;
  --rotate: -4deg;
}

.light-rays>li:nth-child(25) {
  --deg: .75;
  --thickness: 26px;
  --length: 20px;
  --duration: 1.9s;
  --delay: 2.2s;
  --rotate: 2deg;
}

.light-rays>li:nth-child(26) {
  --deg: .21;
  --thickness: 14px;
  --length: -25px;
  --duration: 1.6s;
  --delay: 2.8s;
  --rotate: -1deg;
}

.light-rays>li:nth-child(27) {
  --deg: .58;
  --thickness: 31px;
  --length: 10px;
  --duration: 2.2s;
  --delay: 2.6s;
  --rotate: 3deg;
}

.light-rays>li:nth-child(28) {
  --deg: .96;
  --thickness: 18px;
  --length: -30px;
  --duration: 1.7s;
  --delay: 2.3s;
  --rotate: -2deg;
}

.light-rays>li:nth-child(29) {
  --deg: .14;
  --thickness: 28px;
  --length: 45px;
  --duration: 1.3s;
  --delay: 2.7s;
  --rotate: 1deg;
}

.light-rays>li:nth-child(30) {
  --deg: .69;
  --thickness: 22px;
  --length: -15px;
  --duration: 2.0s;
  --delay: 2.5s;
  --rotate: -3deg;
}

.light-rays>li:nth-child(31) {
  --deg: .48;
  --thickness: 16px;
  --length: 35px;
  --duration: 1.4s;
  --delay: 2.1s;
  --rotate: 4deg;
}

.light-rays>li:nth-child(32) {
  --deg: .83;
  --thickness: 9px;
  --length: -45px;
  --duration: 2.3s;
  --delay: 2.9s;
  --rotate: -4deg;
}

.logo-wrap {
  position: relative;
  z-index: 1;
}

.logo {
  width: min(320px, 60vw);
  height: auto;
  display: block;
}

@media (max-width: 600px) {
  .light-rays>li {
    --spreadRange: 90vw;
  }

  .contact,
  .copyright {
    right: 1rem;
  }

  .contact {
    top: 1rem;
  }

  .copyright {
    bottom: 1rem;
  }
}

@keyframes shimmer {
  from {
    opacity: 0.33;
  }

  to {
    opacity: 0.03;
  }
}

@keyframes rotate {
  from {
    rotate: 0deg;
  }

  to {
    rotate: var(--rotate);
  }
}