:root {
  --dark: rgb(25, 30, 35);
  --darker: rgb(15, 20, 25);
  --light: rgb(195, 200, 205);
  --lighter: rgb(245, 250, 255);
  --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; }

.hidden { display: none; }

* { margin: 0; padding: 0; box-sizing: border-box; font-size: inherit; }
html { font-size: 10px; }