@font-face {
  font-family: SeuratProB;
  src: url("seuratprob.woff2") format('woff2'),
       url("seuratprob.woff") format('woff'),
       url("seuratprob.ttf") format('truetype');
}

body {
  font-family: SeuratProB, "Arial Rounded MT Bold", sans-serif;
  font-weight: 400;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  color: var(--color-text);
  background-color: var(--color-bg);
  padding: 2em;

  /* VARIABLES */
  --color-bg: #e2deb7;
  --color-text: #666;

  --color-primary: rgba(66, 129, 164, 1);
  --color-secondary: rgba(72, 169, 166, 1);

  --color-danger: rgba(193, 102, 107, 1);
  --color-danger-bg: rgba(193, 102, 107, 0.2);
  --color-warning: rgba(212, 180, 131, 1);
  --color-warning-bg: rgba(212, 180, 131, 0.2);
  --color-success: rgba(72, 169, 166, 1);
  --color-success-bg: rgba(72, 169, 166, 0.2);

  --font-size-lg: 18px;
  --line-height-lg: 27px;
  --font-size-md: 16px;
  --line-height-md: 24px;
  --font-size-sm: 14px;
  --line-height-sm: 21px;

  --breakpoint-md: 600px;
  --breakpoint-lg: 900px;
}