:root {
  color-scheme: light dark;

  --primary-hue: 160;
  --primary-saturation: 15%;
  --primary-color: hsl(var(--primary-hue), var(--primary-saturation), 63%);
  --primary-color-100: hsl(var(--primary-hue), var(--primary-saturation), 10%);
  --primary-color-200: hsl(var(--primary-hue), var(--primary-saturation), 25%);
  --primary-color-300: hsl(var(--primary-hue), var(--primary-saturation), 50%);
  --primary-color-400: hsl(var(--primary-hue), var(--primary-saturation), 75%);
  --primary-color-500: hsl(var(--primary-hue), var(--primary-saturation), 85%);

  --main-font: "Lato", sans-serif;
}

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  font-family: var(--main-font);
  color: var(--surface-color);
  background-color: var(--primary-color-100);
  max-height: 100%;
  max-width: 100%;
  font-weight: 500;
}