:root {
  color-scheme: dark;
  background: #050505;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  overflow: hidden;
}

.page-frame {
  display: grid;
  place-items: center;
  min-height: 100svh;
  padding: clamp(1.5rem, 6vmin, 5rem);
}

.diagonal-billing {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(100%, 64rem);
  column-gap: clamp(2rem, 12vw, 10rem);
  row-gap: clamp(1rem, 5vh, 3rem);
}

.name {
  color: inherit;
  margin: 0;
  text-transform: uppercase;
  font-family: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.65rem, min(7vw, 8vh), 6rem);
  font-weight: 900;
  line-height: 0.85;
  letter-spacing: -0.025em;
  text-decoration: none;
  white-space: nowrap;
  text-shadow:
    0 0 1px rgba(255, 255, 255, 1),
    0 0 2px rgba(255, 255, 255, 0.72),
    0 0 5px rgba(255, 255, 255, 0.32),
    1px 0.55px 3px rgba(255, 255, 255, 0.38),
    -0.8px 0.2px 4px rgba(255, 255, 255, 0.22);
  filter: contrast(1.08);
}

.name--bottom-left {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
}

.name--top-right {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}