* { box-sizing: border-box; }
html, body { height: 100%; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

:root{
  --bg: #2e2e2e;
  --fg: #dbdbdb;
  --size: clamp(1.125rem, 1rem + 2.2vw, 3rem);
  --letterspace: 0.02em;
}

body{
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: "Courier New", "Nimbus Mono L", "Liberation Mono", Courier, monospace;
  cursor: crosshair;
}

main{
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4vh 3vw;
}

.loading{
  font-size: var(--size);
  line-height: 1.2;
  letter-spacing: var(--letterspace);
  white-space: pre;
  text-rendering: optimizeLegibility;
  user-select: none;
}

@media (min-resolution: 2dppx){
  .loading{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
}

.loading {
  --i: 0;
  transition: transform 160ms cubic-bezier(0.25, 1, 0.5, 1),
              text-shadow 160ms ease,
              letter-spacing 160ms ease;
  will-change: transform, text-shadow, letter-spacing;

  transform: scale(calc(1 + 0.12 * var(--i)));
  letter-spacing: calc(var(--letterspace) + 0.04em * var(--i));
}

.cursor-tail {
  position: fixed;
  top: 0;
  left: 0;
  width: 12px;
  height: 12px;
  background: var(--fg);
  border-radius: 50%;
  pointer-events: none;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}