:root {
    --bg-dark: #1e2030;
    --bg-light: #24273a;
    --grey-light: #939ab7;
    --grey: #5b6078;
    --grey-dark: #5b6078;
    --text: #cad3f5;
    --blue: #8aadf4;
    --purple: #c6a0f6;
    --sapphire: #7dc4e4;
    --lavender: #b7bdf8;
    --red: #ed8796;
    --text-alt: var(--lavender);
    --text-alt-colour: var(--blue);
    --text-alt-colour-darker: var(--purple);
    --dot-bg: var(--bg-dark);
    --dot-color: var(--bg-light);
    --color-hr: var(--blue);
    --dot-size: 4px;
    --dot-space: 22px;
}

.separator {
    display: flex;
    align-items: center;
    text-align: center;
}

.separator::before,
.separator::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid var(--color-hr);
}

.separator:not(:empty)::before {
    margin-right: 0.25em;
}

.separator:not(:empty)::after {
    margin-left: 0.25em;
}