:root {
    /* Font sizing */
    --font-xs: 0.75rem;
    --font-sm: 0.875rem;
    --font-md: 1rem;
    --font-lg: 1.125rem;
    --font-xl: 1.25rem;
    --font-2xl: 1.5rem;
    --font-3xl: 1.875rem;
    --font-4xl: 2.25rem;
    --font-5xl: 3rem;
    --font-6xl: 4rem;
    --font-7xl: 5rem;
    --font-8xl: 6rem;
    --line-height-xs: 1;
    --line-height-sm: 1.25;
    --line-height-md: 1.375;
    --line-height-lg: 1.5;
    --line-height-xl: 1.625;
    --line-height-2xl: 2;

    /* Colors */
    --black: #21222c;
    --blackSecondary: #414558;
    --blackTernary: #a7abbe;
    --blackLight: rgba(33, 34, 44, .05);
    --grey: #414558;
    --greySecondary: #626784;
    --greyTernary: #b6b9c9;
    --greyLight: rgba(65, 69, 88, .05);
    --white: #f8f8f2;
    --whiteSecondary: #fff;
    --whiteLight: hsla(60, 30%, 96%, .05);
    --cyan: #80ffea;
    --cyanSecondary: #ccfff6;
    --cyanLight: rgba(128, 255, 234, .05);
    --green: #8aff80;
    --greenSecondary: #d0ffcc;
    --greenLight: rgba(138, 255, 128, .05);
    --orange: #ffca80;
    --orangeSecondary: #ffeacc;
    --orangeLight: rgba(255, 202, 128, .05);
    --pink: #ff80bf;
    --pinkSecondary: #ffcce6;
    --pinkLight: rgba(255, 128, 191, .05);
    --purple: #9580ff;
    --purpleSecondary: #d4ccff;
    --purpleLight: rgba(149, 128, 255, .05);
    --red: #ff9580;
    --redSecondary: #ffd4cc;
    --redLight: rgba(255, 149, 128, .05);
    --yellow: #ffff80;
    --yellowSecondary: #ffc;
    --yellowLight: rgba(255, 255, 128, .05);
    --cyan-transparent: rgba(128, 255, 234, .1);
    --green-transparent: rgba(138, 255, 128, .1);
    --orange-transparent: rgba(255, 202, 128, .1);
    --pink-transparent: rgba(255, 128, 191, .1);
    --purple-transparent: rgba(149, 128, 255, .1);
    --red-transparent: rgba(255, 149, 128, .1);
    --yellow-transparent: rgba(255, 255, 128, .1);
    --disabled: #6c7393;
    --gradientDegree: 135deg;
    --glowColor: hsla(0, 0%, 100%, .25);
    --cyan-100: rgba(128, 255, 234, .1);
    --green-100: rgba(138, 255, 128, .1);
    --orange-100: rgba(255, 202, 128, .1);
    --pink-100: rgba(255, 128, 191, .1);
    --purple-100: rgba(149, 128, 255, .1);
    --red-100: rgba(255, 149, 128, .1);
    --yellow-100: rgba(255, 255, 128, .1);
    --cyan-200: rgba(128, 255, 234, .2);
    --green-200: rgba(138, 255, 128, .2);
    --orange-200: rgba(255, 202, 128, .2);
    --pink-200: rgba(255, 128, 191, .2);
    --purple-200: rgba(149, 128, 255, .2);
    --red-200: rgba(255, 149, 128, .2);
    --yellow-200: rgba(255, 255, 128, .2);
    --cyan-300: rgba(128, 255, 234, .3);
    --green-300: rgba(138, 255, 128, .3);
    --orange-300: rgba(255, 202, 128, .3);
    --pink-300: rgba(255, 128, 191, .3);
    --purple-300: rgba(149, 128, 255, .3);
    --red-300: rgba(255, 149, 128, .3);
    --yellow-300: rgba(255, 255, 128, .3);
    --cyan-400: rgba(128, 255, 234, .4);
    --green-400: rgba(138, 255, 128, .4);
    --orange-400: rgba(255, 202, 128, .4);
    --pink-400: rgba(255, 128, 191, .4);
    --purple-400: rgba(149, 128, 255, .4);
    --red-400: rgba(255, 149, 128, .4);
    --yellow-400: rgba(255, 255, 128, .4);
    --cyan-500: rgba(128, 255, 234, .5);
    --green-500: rgba(138, 255, 128, .5);
    --orange-500: rgba(255, 202, 128, .5);
    --pink-500: rgba(255, 128, 191, .5);
    --purple-500: rgba(149, 128, 255, .5);
    --red-500: rgba(255, 149, 128, .5);
    --yellow-500: rgba(255, 255, 128, .5);
    --cyan-600: rgba(128, 255, 234, .6);
    --green-600: rgba(138, 255, 128, .6);
    --orange-600: rgba(255, 202, 128, .6);
    --pink-600: rgba(255, 128, 191, .6);
    --purple-600: rgba(149, 128, 255, .6);
    --red-600: rgba(255, 149, 128, .6);
    --yellow-600: rgba(255, 255, 128, .6);
    --cyan-700: rgba(128, 255, 234, .7);
    --green-700: rgba(138, 255, 128, .7);
    --orange-700: rgba(255, 202, 128, .7);
    --pink-700: rgba(255, 128, 191, .7);
    --purple-700: rgba(149, 128, 255, .7);
    --red-700: rgba(255, 149, 128, .7);
    --yellow-700: rgba(255, 255, 128, .7);
    --cyan-800: rgba(128, 255, 234, .8);
    --green-800: rgba(138, 255, 128, .8);
    --orange-800: rgba(255, 202, 128, .8);
    --pink-800: rgba(255, 128, 191, .8);
    --purple-800: rgba(149, 128, 255, .8);
    --red-800: rgba(255, 149, 128, .8);
    --yellow-800: rgba(255, 255, 128, .8);
    --cyan-900: rgba(128, 255, 234, .9);
    --green-900: rgba(138, 255, 128, .9);
    --orange-900: rgba(255, 202, 128, .9);
    --pink-900: rgba(255, 128, 191, .9);
    --purple-900: rgba(149, 128, 255, .9);
    --red-900: rgba(255, 149, 128, .9);
    --yellow-900: rgba(255, 255, 128, .9);
    --accentColor: var(--purple);
    --purple-cyan: linear-gradient(var(--gradientDegree), var(--purple) 0%, var(--cyan) 100%);
    --yellow-pink: linear-gradient(var(--gradientDegree), var(--yellow) 0%, var(--pink) 100%);
    --cyan-green: linear-gradient(var(--gradientDegree), var(--cyan) 0%, var(--green) 100%);
    --pink-purple: linear-gradient(var(--gradientDegree), var(--pink) 0%, var(--purple) 100%);
}

body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: var(--black);
    color: var(--white);
}

.text-black {
    color: var(--black);
}
.text-white {
    color: var(--white);
}
.text-green {
    color: var(--green);
}
.text-purple {
    color: var(--purple);
}
.text-pink {
    color: var(--pink);
}
.text-cyan {
    color: var(--cyan);
}
.text-yellow {
    color: var(--yellow);
}
.text-orange {
    color: var(--orange);
}
.text-red {
    color: var(--red);
}

.text-purple-cyan {
    background: var(--purple-cyan);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.text-size-xs {
    font-size: var(--font-xs);
}
.text-size-sm {
    font-size: var(--font-sm);
}
.text-size-md {
    font-size: var(--font-md);
}
.text-size-lg {
    font-size: var(--font-lg);
}
.text-size-xl {
    font-size: var(--font-xl);
}
.text-size-8xl {
    font-size: var(--font-8xl);
}

.container {
    max-width: 800px;
    margin: 5rem auto auto;
}
ul > li {
    margin-bottom: 0.5rem;
}
code {
    background-color: var(--blackSecondary);
    font-family: 'Courier', monospace;
}