@font-face {
  font-family: "Anybody";
  src: url("/fonts/anybody-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 50% 150%;
  font-display: swap;
}

:root {
  --cobalt: #1A3BD6;
  --cobalt-deep: #0E2382;
  --paper: #F4F7FF;
  --paper-soft: rgb(244 247 255 / 0.74);
}

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

html {
  background: var(--cobalt-deep);
  color: var(--paper);
  font-family: "Anybody", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  min-height: 100svh;
  background: radial-gradient(120% 90% at 50% 25%, var(--cobalt) 35%, var(--cobalt-deep) 100%);
}

.field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
}

main {
  position: relative;
  height: 100svh;
  min-height: 30rem;
}

/* Centred horizontally, and vertically within the top half of the page. */
.logo {
  position: absolute;
  top: 25%;
  left: 50%;
  width: min(48rem, max(58vw, 100vw - 5rem));
  margin: 0;
  transform: translate(-50%, -50%);
}

.logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* The 3D logotype (client/logo.js) replaces the flat one once it has drawn. */
.logo-depth {
  position: absolute;
  display: none;
  pointer-events: none;
}

.logo.is-3d .logo-depth {
  display: block;
}

.logo.is-3d img {
  opacity: 0;
}

.message {
  position: absolute;
  top: 66%;
  left: 50%;
  width: min(100% - 3rem, 34rem);
  margin: 0;
  transform: translate(-50%, -50%);
  font-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.375rem);
  font-stretch: 112%;
  font-weight: 440;
  line-height: 1.5;
  text-align: center;
  color: var(--paper-soft);
  text-wrap: balance;
}

/* Set by client/field.js when clicks and taps transmit. */
.interactive {
  cursor: crosshair;
  touch-action: manipulation;
}