/*
  variables
*/
:root {
  --base-size: 1rem;
  --base-size-article: 1.6vmin;

  --color-background: #2d2a2e;
  --color-paper: #f4f0e7;

  --color-white: #fcfcfa;
  --color-white-darker: hsl(from var(--color-white) h s calc(l - 12.5));
  --color-white-darkest: hsl(from var(--color-white) h s calc(l - 25));
  --color-gray: #b8b2a1;
  --color-gray-darker: hsl(from var(--color-gray) h s calc(l - 12.5));
  --color-gray-darkest: hsl(from var(--color-gray) h s calc(l - 25));
  --color-black: #727072;
  --color-black-darker: hsl(from var(--color-black) h s calc(l - 12.5));
  --color-black-darkest: hsl(from var(--color-black) h s calc(l - 25));

  --color-red: #ff6188;
  --color-red-darker: hsl(from var(--color-red) h s calc(l - 12.5));
  --color-red-darkest: hsl(from var(--color-red) h s calc(l - 25));
  --color-green: #a9dc76;
  --color-green-darker: hsl(from var(--color-green) h s calc(l - 12.5));
  --color-green-darkest: hsl(from var(--color-green) h s calc(l - 25));
  --color-yellow: #ffd866;
  --color-yellow-darker: hsl(from var(--color-yellow) h s calc(l - 12.5));
  --color-yellow-darkest: hsl(from var(--color-yellow) h s calc(l - 25));
  --color-blue: #78dce8;
  --color-blue-darker: hsl(from var(--color-blue) h s calc(l - 12.5));
  --color-blue-darkest: hsl(from var(--color-blue) h s calc(l - 25));
  --color-magenta: #fc9867;
  --color-magenta-darker: hsl(from var(--color-magenta) h s calc(l - 12.5));
  --color-magenta-darkest: hsl(from var(--color-magenta) h s calc(l - 25));
  --color-cyan: #ab9df2;
  --color-cyan-darker: hsl(from var(--color-cyan) h s calc(l - 12.5));
  --color-cyan-darkest: hsl(from var(--color-cyan) h s calc(l - 25));

  --transition-duration: 500ms;
}

/*
  colors
*/
.color-red {
  color: var(--color-red);
}

.color-green {
  color: var(--color-green);
}

.color-yellow {
  color: var(--color-yellow);
}

.color-blue {
  color: var(--color-blue);
}

.color-magenta {
  color: var(--color-magenta);
}

.color-cyan {
  color: var(--color-cyan);
}

/*
  links
*/
a {
  text-decoration: dotted underline;
  text-underline-offset: 0.2rem;
  text-decoration-thickness: 0.1rem;
}