:root {
  --size-tiny: 2px;
  --size-small: 0.25rem;
  --size-medium: 0.5rem;
  --size-large: 1rem;

  --font-size-1: 10px;
  --font-size-2: 12px;
  --font-size-3: 14px;
  --font-size-4: 16px;
  --font-size-5: 20px;

  --border-radius: 0.25rem;

  --animation-duration: 500ms;

  --color-gray-shade-0: color(#000000 tint(0%));
  --color-gray-shade-10: color(#000000 tint(10%));
  --color-gray-shade-20: color(#000000 tint(20%));
  --color-gray-shade-30: color(#000000 tint(30%));
  --color-gray-shade-40: color(#000000 tint(40%));
  --color-gray-shade-50: color(#000000 tint(50%));
  --color-gray-shade-60: color(#000000 tint(60%));
  --color-gray-shade-70: color(#000000 tint(70%));
  --color-gray-shade-80: color(#000000 tint(80%));
  --color-gray-shade-90: color(#000000 tint(90%));
  --color-gray-shade-95: color(#000000 tint(95%));
  --color-gray-shade-100: color(#000000 tint(100%));

  --color-blue: #3865c2;
  --color-blue-tint: color(#3865c2 tint(10%));
  --color-brown: #915f38;
  --color-brown-tint: color(#915f38 tint(10%));
  --color-green: #538d4e;
  --color-green-tint: color(#538d4e tint(10%));
  --color-red: #ff5555;
  --color-red-tint: color(#ff5555 tint(10%));
  --color-yellow: #b59f3b;
  --color-yellow-tint: color(#b59f3b tint(10%));

  --color-error: var(--color-red);
  --color-hint: lightyellow;
  --color-text: var(--color-gray-shade-100);
  --color-link: var(--color-blue);
  --color-link-hover: var(--color-blue-tint);

  --color-pending: var(--color-gray-shade-10);
  --color-pending-tint: var(--color-gray-shade-20);
  --color-incorrect: var(--color-gray-shade-30);
  --color-incorrect-tint: var(--color-gray-shade-40);
  --color-correct: var(--color-green);
  --color-correct-tint: var(--color-green-tint);
  --color-present: var(--color-yellow);
  --color-present-tint: var(--color-yellow-tint);
}

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
  font-size: var(--font-size-4);
  background-color: var(--color-gray-shade-10);
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  padding: 0;
}

* {
  box-sizing: border-box;
}
