:root {
  color-scheme: dark;
  font-family: "Lucida Console", "Courier New", monospace;
  background: #050505;
  color: #efeee8;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  overflow: hidden;
  background: #050505;
}

main {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 6vw, 6rem);
  isolation: isolate;
}

h1 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #efeee8;
  font-size: clamp(3.6rem, 14vw, 12rem);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.08em;
  text-shadow: .055em .055em 0 #242424;
}

.caret {
  position: relative;
  z-index: 2;
  width: clamp(.7rem, 1.8vw, 1.45rem);
  height: clamp(3.25rem, 10vw, 8.5rem);
  margin-left: clamp(1rem, 2.4vw, 2.4rem);
  background: #f4a62a;
  animation: blink 1.15s steps(1, end) infinite;
}

.stars {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
}

.stars-far {
  opacity: .34;
  background-image:
    radial-gradient(circle, #6c6b67 0 1px, transparent 1.25px),
    radial-gradient(circle, #454542 0 1px, transparent 1.25px);
  background-position: 0 0, 4rem 3rem;
  background-size: 8.5rem 7.25rem, 11rem 9rem;
  animation: drift-far 52s linear infinite;
}

.stars-mid {
  opacity: .52;
  background-image:
    radial-gradient(circle, #aaa8a0 0 1px, transparent 1.4px),
    radial-gradient(circle, #77756f 0 1px, transparent 1.4px);
  background-position: 2rem 1rem, 7rem 5rem;
  background-size: 13rem 10rem, 17rem 14rem;
  animation: drift-mid 36s linear infinite;
}

.stars-near {
  opacity: .78;
  background-image:
    radial-gradient(circle, #d8d6ce 0 1.25px, transparent 1.6px),
    radial-gradient(circle, #8f8d87 0 1.25px, transparent 1.6px);
  background-position: 1rem 4rem, 10rem 2rem;
  background-size: 21rem 17rem, 26rem 23rem;
  animation: drift-near 24s linear infinite;
}

@keyframes drift-far {
  to { transform: translate3d(-3rem, 1.5rem, 0); }
}

@keyframes drift-mid {
  to { transform: translate3d(-6rem, 3rem, 0); }
}

@keyframes drift-near {
  to { transform: translate3d(-9rem, 4.5rem, 0); }
}

@keyframes blink {
  0%,
  54% { opacity: 1; }
  55%,
  100% { opacity: 0; }
}

@media (max-width: 36rem) {
  main {
    align-items: flex-end;
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
  }

  h1 {
    font-size: clamp(3.6rem, 24vw, 7rem);
  }

  .caret {
    width: .65rem;
    height: clamp(3rem, 17vw, 5.2rem);
    margin-left: .8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .stars,
  .caret {
    animation: none;
  }
}