@import url("https://fonts.googleapis.com/css2?family=VT323&display=swap");

:root {
  --canal: #1E3DB8;
  --canal-hot: #2447D4;
  --canal-edge: #1733A6;
  --white: #F4F6FF;
  --dim: rgba(244, 246, 255, .55);
  --osd: #5FD35F;
  --red: #B8322A;
  --black: #050608;
  --mono: "VT323", monospace;
  --pad: clamp(16px, 4vw, 58px);
  --t-xl: clamp(44px, 8vw, 96px);
  --t-l: clamp(26px, 3.6vw, 44px);
  --t-m: clamp(20px, 2.4vw, 28px);
  --t-s: clamp(15px, 1.6vw, 19px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  overflow: hidden;
  color: var(--white);
  background: radial-gradient(ellipse 90% 85% at 50% 45%, #2447D4 0%, #1E3DB8 60%, #1733A6 100%);
  font-family: var(--mono);
  text-shadow: 1px 0 rgba(184, 50, 42, .35), -1px 0 rgba(120, 190, 255, .35);
  -webkit-font-smoothing: none;
}

button, input { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button {
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-shadow: inherit;
}
a { color: inherit; text-decoration: none; }
button:focus-visible, a:focus-visible, input:focus-visible {
  outline: 1px dashed var(--osd);
  outline-offset: 3px;
}
[hidden], .hide { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}