:root {
  --dark: #191E23;
  --darker: #0f1419;
  --light: #C5C8C6;
  --lighter: #C5C8C6;
  --blue-light: #9cdcfe;
  --blue-dark: #569bd4;
  --green-light: #b5cea8;
  --green-dark: #4ec9b0;
  --yellow: #dcdcaa;
  --red: #ce9178;
  --purple: #c586c0;
  --purple-dark: #543952;
}

.dark { color: var(--dark) !important; border-color: var(--dark) !important; }
.darker { color: var(--darker) !important; border-color: var(--darker) !important; }
.light { color: var(--light) !important; border-color: var(--light) !important; }
.lighter { color: var(--lighter) !important; border-color: var(--light) !important; }
.blue { color: var(--blue-dark) !important; border-color: var(--blue-dark) !important; }
.green { color: var(--green-dark) !important; border-color: var(--green-dark) !important; }
.yellow { color: var(--yellow) !important; border-color: var(--yellow) !important; }
.red { color: var(--red) !important; border-color: var(--red) !important; }
.purple { color: var(--purple) !important; border-color: var(--purple) !important; }

* { margin: 0; padding: 0; box-sizing: border-box; font-size: inherit; }
html { font-size: 10px; }
body { font-size: 1.4rem; font-family: SegoeUI, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; }

p, ul, ol, table, figure, img, h1, h2, h3, h4, h5, h6 { margin: 0 0 2rem 0; display: block; }
ul { padding: 0 0 0 2rem; }
ol { padding: 0 0 0 2rem; }
h1 { font-size: 150%; }
h2 { font-size: 133%; }
h3 { font-size: 125%; }
img { width: 100%; height: auto; }