
:root {
    --logo: url("/images/all.png");
    --background-image: url("/images/bg.png");
    --subdomain-color: var(--bright-indigo);
    background-repeat: repeat;
    background-size: 25em;
    font-family: serif;
    --jaime-signature: " -jaime";
    --lucy-signature: " -l <3<";
    --lucy-alpha-signature: " -l.a <3<";
    --penelope-signature: " -p~ <c3<";
    --anabelle-signature: " -ab~ c<3<";
    --daisy-signature: " -d c3<";
    --may-signature: " -m~ c3<";
    --oliver-signature: " -o </3<";
    --oliver-happy-signature: " -o*~ </3<";
    --alice-signature: " -a <>";
    --alice-i-signature: " -a#1 <>";
    --alice-ii-signature: " -a#2 <>";
    --alice-iii-signature: " -a#3 <>";
    --singer-signature: " -s~ <3";
    --singer-alpha-signature: " -s.a </3";
    --singer-null-signature: " -s.0 </3";
    --singer-null-alpha-signature: " -s.0.a~ <&3";
    --kate-signature: " -kate";
    --sophie-signature: " -sophie";
    --mom-signature: " -lorna <3";
    --dad-signature: " -BERNARD <3<";
    --mom-angry-signature: " -LORNA <>";
    --dad-fake-signature: " -bernie~ c3<";
    --abyss-signature: " -ABYSS&";
    --abyss-null-signature: " -ABYSS";
    --abby-signature: " -Abby.";
    --redshift-spectrum-violet: #c865df;
    --redshift-spectrum-indigo: #9e65df;
    --redshift-spectrum-blue: #6576df;
    --redshift-spectrum-skyblue: #659ddf;
    --redshift-spectrum-turquoise: #65dfcc;
    --redshift-spectrum-green: #71df65;
    --redshift-spectrum-yellow: #dfdc65;
    --redshift-spectrum-rosegold: #dfa465;
    --redshift-spectrum-orange: #df8265;
    --redshift-spectrum-red: #df6580;
    --redshift-spectrum-magenta: #df65ad;
}

.rss-violet {
    color: var(--redshift-spectrum-violet);
}
.rss-indigo {
    color: var(--redshift-spectrum-indigo);
}
.rss-blue {
    color: var(--redshift-spectrum-blue);
}
.rss-skyblue {
    color: var(--redshift-spectrum-skyblue);
}
.rss-turquoise {
    color: var(--redshift-spectrum-turquoise);
}
.rss-green {
    color: var(--redshift-spectrum-green);
}
.rss-yellow {
    color: var(--redshift-spectrum-yellow);
}
.rss-rosegold {
    color: var(--redshift-spectrum-rosegold);
}
.rss-orange {
    color: var(--redshift-spectrum-orange);
}
.rss-red {
    color: var(--redshift-spectrum-red);
}
.rss-magenta {
    color: var(--redshift-spectrum-magenta);
}
.rss-violet-indigo {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-violet),
        var(--redshift-spectrum-indigo)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<3";
    }
}
.rss-indigo-blue {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-indigo),
        var(--redshift-spectrum-blue)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -</3";
    }
}
.rss-blue-skyblue {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-blue),
        var(--redshift-spectrum-skyblue)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -</>";
    }
}
.rss-skyblue-turquoise {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-skyblue),
        var(--redshift-spectrum-turquoise)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<>";
    }
}
.rss-turquoise-green {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-turquoise),
        var(--redshift-spectrum-green)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -</3<";
    }
}
.rss-green-yellow {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-green),
        var(--redshift-spectrum-yellow)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<!?3<";
    }
}
.rss-yellow-rosegold {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-yellow),
        var(--redshift-spectrum-rosegold)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -c3<";
    }
}
.rss-rosegold-orange {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-rosegold),
        var(--redshift-spectrum-orange)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<c3<";
    }
}
.rss-orange-red {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-orange),
        var(--redshift-spectrum-red)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<3<";
    }
}
.rss-red-magenta {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-red),
        var(--redshift-spectrum-magenta)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -<!3<";
    }
}
.rss-magenta-violet {
    color: transparent;
    background: linear-gradient(
        to right,
        var(--redshift-spectrum-magenta),
        var(--redshift-spectrum-violet)
    );
    background-clip: text;
    &:is(q.thoughts)::after {
        content: " -/";
    }
}

:root.plural-bio {
    background-image: none;
}

hgroup p {
    background-color: color-mix(in hsl,
        var(--black) 25%,
        transparent 75%
    );
}

h2 {
    font-family: sans-serif;
}


.sysmem-jaime {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--jaime-color) 25%
        );
        h2 {
            color: var(--jaime-color);
        }
    }
    &:not(:root) {
        color: var(--jaime-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--jaime-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/jaime"] {
    color: var(--jaime-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-lucy {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--lucy-color) 25%
        );
        h2 {
            color: var(--lucy-color);
        }
    }
    &:not(:root) {
        color: var(--lucy-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--lucy-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/lucy"] {
    color: var(--lucy-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-lucy-alpha {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--lucy-alpha-color) 25%
        );
        h2 {
            color: var(--lucy-alpha-color);
        }
    }
    &:not(:root) {
        color: var(--lucy-alpha-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--lucy-alpha-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/lucy-alpha"] {
    color: var(--lucy-alpha-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-penelope {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--penelope-color) 25%
        );
        h2 {
            color: var(--penelope-color);
        }
    }
    &:not(:root) {
        color: var(--penelope-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--penelope-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/penelope"] {
    color: var(--penelope-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-anabelle {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--anabelle-color) 25%
        );
        h2 {
            color: var(--anabelle-color);
        }
    }
    &:not(:root) {
        color: var(--anabelle-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--anabelle-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/anabelle"] {
    color: var(--anabelle-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-daisy {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--daisy-color) 25%
        );
        h2 {
            color: var(--daisy-color);
        }
    }
    &:not(:root) {
        color: var(--daisy-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--daisy-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/daisy"] {
    color: var(--daisy-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-may {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--may-color) 25%
        );
        h2 {
            color: var(--may-color);
        }
    }
    &:not(:root) {
        color: var(--may-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--may-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/may"] {
    color: var(--may-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-oliver {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--oliver-color) 25%
        );
        h2 {
            color: var(--oliver-color);
        }
    }
    &:not(:root) {
        color: var(--oliver-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--oliver-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/oliver"] {
    color: var(--oliver-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-oliver-happy {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--oliver-happy-color) 25%
        );
        h2 {
            color: var(--oliver-happy-color);
        }
    }
    &:not(:root) {
        color: var(--oliver-happy-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--oliver-happy-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/oliver-happy"] {
    color: var(--oliver-happy-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-alice {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--alice-color) 25%
        );
        h2 {
            color: var(--alice-color);
        }
    }
    &:not(:root) {
        color: var(--alice-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--alice-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/alice"] {
    color: var(--alice-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-alice-i {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--alice-i-color) 25%
        );
        h2 {
            color: var(--alice-i-color);
        }
    }
    &:not(:root) {
        color: var(--alice-i-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--alice-i-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/alice-i"] {
    color: var(--alice-i-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-alice-ii {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--alice-ii-color) 25%
        );
        h2 {
            color: var(--alice-ii-color);
        }
    }
    &:not(:root) {
        color: var(--alice-ii-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--alice-ii-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/alice-ii"] {
    color: var(--alice-ii-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-alice-iii {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--alice-iii-color) 25%
        );
        h2 {
            color: var(--alice-iii-color);
        }
    }
    &:not(:root) {
        color: var(--alice-iii-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--alice-iii-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/alice-iii"] {
    color: var(--alice-iii-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-singer {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--singer-color) 25%
        );
        h2 {
            color: var(--singer-color);
        }
    }
    &:not(:root) {
        color: var(--singer-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--singer-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/singer"] {
    color: var(--singer-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-singer-alpha {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--singer-alpha-color) 25%
        );
        h2 {
            color: var(--singer-alpha-color);
        }
    }
    &:not(:root) {
        color: var(--singer-alpha-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--singer-alpha-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/singer-alpha"] {
    color: var(--singer-alpha-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-singer-null {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--singer-null-color) 25%
        );
        h2 {
            color: var(--singer-null-color);
        }
    }
    &:not(:root) {
        color: var(--singer-null-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--singer-null-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/singer-null"] {
    color: var(--singer-null-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-singer-null-alpha {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--singer-null-alpha-color) 25%
        );
        h2 {
            color: var(--singer-null-alpha-color);
        }
    }
    &:not(:root) {
        color: var(--singer-null-alpha-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--singer-null-alpha-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/singer-null-alpha"] {
    color: var(--singer-null-alpha-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-kate {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--kate-color) 25%
        );
        h2 {
            color: var(--kate-color);
        }
    }
    &:not(:root) {
        color: var(--kate-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--kate-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/kate"] {
    color: var(--kate-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-sophie {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--sophie-color) 25%
        );
        h2 {
            color: var(--sophie-color);
        }
    }
    &:not(:root) {
        color: var(--sophie-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--sophie-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/sophie"] {
    color: var(--sophie-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-mom {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--mom-color) 25%
        );
        h2 {
            color: var(--mom-color);
        }
    }
    &:not(:root) {
        color: var(--mom-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--mom-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/mom"] {
    color: var(--mom-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-dad {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--dad-color) 25%
        );
        h2 {
            color: var(--dad-color);
        }
    }
    &:not(:root) {
        color: var(--dad-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--dad-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/dad"] {
    color: var(--dad-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-mom-angry {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--mom-angry-color) 25%
        );
        h2 {
            color: var(--mom-angry-color);
        }
    }
    &:not(:root) {
        color: var(--mom-angry-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--mom-angry-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/mom-angry"] {
    color: var(--mom-angry-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-dad-fake {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--dad-fake-color) 25%
        );
        h2 {
            color: var(--dad-fake-color);
        }
    }
    &:not(:root) {
        color: var(--dad-fake-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--dad-fake-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/dad-fake"] {
    color: var(--dad-fake-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-abyss {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--abyss-color) 25%
        );
        h2 {
            color: var(--abyss-color);
        }
    }
    &:not(:root) {
        color: var(--abyss-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--abyss-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/abyss"] {
    color: var(--abyss-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-abyss-null {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--abyss-null-color) 25%
        );
        h2 {
            color: var(--abyss-null-color);
        }
    }
    &:not(:root) {
        color: var(--abyss-null-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--abyss-null-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/abyss-null"] {
    color: var(--abyss-null-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}


.sysmem-abby {
    &:root {
        background-color: color-mix(in hsl,
            var(--black) 75%,
            var(--abby-color) 25%
        );
        h2 {
            color: var(--abby-color);
        }
    }
    &:not(:root) {
        color: var(--abby-color);
        &:is(q.thoughts, .signature):not(.unsigned)::after {
            content: var(--abby-signature);
            font-style: italic;
        }
    }
}

:root.plural-bio nav a[href$="/abby"] {
    color: var(--abby-color);
}

.sysmem-pfp {
    float: left;
    margin-right: 1em;
    margin-top: 1em;
    max-width: 20em;
}

