:root {
  --border-radius: 0.5rem;

  --main-100: rgba(126 151 228 / 1);
  --main-200: rgba(48 79 151 / 1);
  --main-300: rgba(8 56 129 / 1);
  --main-400: rgba(7 46 106 / 1);
  --main-500: rgba(5 33 77 / 1);

  --accent-100: rgba(176, 170, 238, 1);
  --accent-200: rgba(134, 126, 209, 1);
  --accent-300: rgba(114, 85, 200, 1);
  --accent-400: rgba(108, 97, 223, 1);

  --warn-100: rgba(255, 164, 46, 1);

  --green: rgba(100 162 136 / 1);

  --white: rgba(255 255 255 / 1);
  --gray: rgba(173 173 173 / 1);
  --black: rgba(30 30 30 / 1);

  --shadow-base: 0 0 2.5rem 0 rgba(5, 33, 77, 0.48);

  --duration--short: 150ms;
  --duration--standard: 300ms;
  --easing--standard: cubic-bezier(0.4, 0.0, 0.2, 1);
  --easing--decelerated: cubic-bezier(0.0, 0.0, 0.2, 1);
  --easing--in-out: cubic-bezier(0.4, 0.0, 0.6, 1);
}

html {
  background-color: var(--main-300);
}

html, body {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

body {
  -webkit-font-smoothing: subpixel-antialiased;
  font-family: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
  font-size: 16px;
  color: var(--white);

  overflow: hidden;
}

a {
  color: currentColor;
}

@media screen and (min-width: 960px) {
}