:root { color-scheme: dark; }

* { box-sizing: border-box; }

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

body {
  margin: 0;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #000000;
}

.stars,
.stars::after {
  position: fixed;
  inset: -25%;
  content: "";
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='180' viewBox='0 0 240 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23fff'%3E%3Crect x='17' y='22' width='2' height='2'/%3E%3Crect x='73' y='49' width='1' height='1'/%3E%3Crect x='134' y='13' width='2' height='2'/%3E%3Crect x='209' y='39' width='1' height='1'/%3E%3Crect x='42' y='105' width='1' height='1'/%3E%3Crect x='104' y='142' width='2' height='2'/%3E%3Crect x='175' y='112' width='1' height='1'/%3E%3Crect x='227' y='157' width='2' height='2'/%3E%3Crect x='15' y='166' width='1' height='1'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 240px 180px;
}

.stars {
  opacity: .28;
  animation: drift 35s linear infinite;
}

.stars::after {
  opacity: .45;
  transform: rotate(19deg) scale(1.25);
  animation: drift-reverse 52s linear infinite;
}

.monogram {
  width: min(72vw, 500px);
  min-width: 0;
  display: grid;
  place-items: center;
  position: relative;
  text-align: center;
  z-index: 1;
}

.mail {
  display: block;
  width: 100%;
  line-height: 0;
  transition: opacity .18s ease;
}

.mail img {
  display: block;
  width: 100%;
  height: auto;
  filter: contrast(300%);
}

.mail:hover, .mail:focus-visible { opacity: .72; }

.price {
  position: absolute;
  z-index: 2;
  top: calc(100% + 48px);
  left: 50%;
  transform: translateX(-50%);
  color: #f4f3f7;
  font-family: "Share Tech Mono", monospace;
  font-size: 13px;
  letter-spacing: .08em;
  white-space: nowrap;
}

.price span { color: #8f8e95; }
.price output { margin-left: 9px; }

.company {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  color: #b9b8c0;
  font-family: "Share Tech Mono", monospace;
  font-size: 14px;
  letter-spacing: .04em;
  text-decoration: none;
  transition: color .18s ease;
}

.company:hover, .company:focus-visible { color: #ffffff; }

@keyframes drift {
  to { transform: translate3d(120px, 70px, 0); }
}

@keyframes drift-reverse {
  to { transform: rotate(19deg) scale(1.25) translate3d(-90px, 110px, 0); }
}

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

@media (max-width: 520px) {
  .monogram { width: 82vw; }
}