:root {
    --white: #F0F0F0;
    --black: #231E1E;
    --grey: #A9A9A9;
    --dark-purple: #AD6BCB;
    --light-purple: #CB97DA;
    --base-typeface: system-ui, sans-serif;
    --heading-typeface: system-ui, sans-serif;
}

body {
    background-color: var(--black);
    color: var(--white);
    font-family: var(--base-typeface);
    text-wrap: balance;
}

h1,
h2,
h3 {
    font-family: var(--heading-typeface);
    text-transform: uppercase;
    line-height: 1.1;
}

h1, h2, h3, a {
    color: var(--dark-purple);
}

a {
    color: var(--dark-purple);
}

a:visited {
    color: var(--light-purple);
}

ol {
    list-style: none;
}

nav ul {
    list-style: none;
    text-align: center;
    text-transform: uppercase;
}

.quote {
    border: 0.2rem solid var(--grey);
    padding-left: 2rem;
    padding-right: 2rem;
}

.quote figcaption {
    padding: 0.5rem;
}