:root {
    --color-bg: #001;
    --color-mid: #103;
    --color-text: #AAC;
    --gray-bg: #222;
    --gray-mid: #444;
    --gray-text: #BBB;

    --frag-bh-blue: mediumblue;
    --frag-tc-blue: lightskyblue;

    --frag-bh-cyan: darkcyan;
    --frag-tc-cyan: lightcyan;

    --frag-bh-green: green;
    --frag-tc-green: limegreen;

    --frag-bh-green-2: lime;
    --frag-tc-green-2: darkgreen;

    --frag-bh-red: maroon;
    --frag-tc-red: crimson;

    --frag-bh-red-2: red;
    --frag-tc-red-2: maroon;

    --frag-bh-orange: darkorange;
    --frag-tc-orange: #920;

    --frag-bh-gold: palegoldenrod;
    --frag-tc-gold: darkgoldenrod;

    --frag-bh-purple: orchid;
    --frag-tc-purple: rebeccapurple;

    --frag-bh-pink: pink;
    --frag-tc-pink: mediumvioletred;

    --frag-bh-black: black;
    --frag-tc-black: gray;
}

.frag.illuminated, .frag.selected {
    background: var(--block-highlight);
    color: var(--text-color);
    box-shadow: var(--block-highlight) 0 0 0 4px;
    z-index: 1;
    transition-duration: 0.07s;
    transition-delay: 0s;
}

.frag {
    position: relative;
    transition-duration: 0.5s;
    transition-delay: 0.1s;
}
/*
.frag:not(.illuminated) {
    z-index: 1;
}*/

.mono {
    font-family: "Ubuntu Mono", "Consolas", monospace;
}

#frag-desc-box {
    position: sticky;
    background: var(--block-highlight);
    left: 0;
    right: 0;
    bottom: 0;
    height: auto;
    z-index: 2;
    border-top: 4px solid var(--text-color);
    color: var(--text-color);
    transition-duration: 0.2s;
    margin: auto -8px -8px;
    padding-bottom: 1px;
}

#frag-desc {
    max-width: 70ch;
    margin: 10px auto;
    padding-left: 20px;
    padding-right: 20px;
    font-family: "fallen_angel", "Ubuntu", "Verdana", "Arial", sans-serif;
}

#frag-desc::after {
    content: "submitted by: someone i love\A color: " var(--color-name);
    white-space: pre-wrap;
}

#frag-text::before {
    content: var(--fragment);
}

body.readable-font div#frag-desc {
    font-family: "Ubuntu", "Verdana", "Arial", sans-serif;
}

[data-fidx="00"] {
    --fragment: "I am not speaking to them - I am speaking to everything that has ever happened to them";
    --color-name: "miku blue";
    --block-highlight: #86cecb;
    --text-color: #137A7F;
}

[data-fidx="01"] {
    --fragment: "the bucket is aching";
    --color-name: "purple blue";
    --block-highlight: mediumpurple;
    --text-color: #1437BD;
}

[data-fidx="02"] {
    --fragment: "The internet is full of ghosts whom I miss very much";
    --color-name: "vivid red";
    --block-highlight: var(--frag-bh-red-2);
    --text-color: var(--frag-tc-red-2);
}

[data-fidx="03"] {
    --fragment: "where you're at at at least";
    --color-name: "#5BFF00";
    --block-highlight: #5BFF00;
    --text-color: darkgreen;
}

[data-fidx="04"] {
    --fragment: "a half-forgotten hope";
    --color-name: "navy blue";
    --block-highlight: navy;
    --text-color: cornflowerblue;
}

[data-fidx="05"] {
    --fragment: "Time, the repeating lattice";
    --color-name: "Hot pink";
    --block-highlight: #FF0EBE;
    --text-color: lightpink;
}

[data-fidx="06"] {
    --fragment: "Wild boy strangers in town";
    --color-name: "sunset orange";
    --block-highlight: orangered;
    --text-color: maroon;
}

[data-fidx="07"] {
    --fragment: "My beautiful son, Chainmail the Clown has passed away this morning";
    --color-name: "teal";
    --block-highlight: aquamarine;
    --text-color: teal;
}

[data-fidx="08"] {
    --fragment: "Nevermore the magnolia tree";
    --color-name: "black";
    --block-highlight: var(--frag-bh-black);
    --text-color: var(--frag-tc-black);
}

[data-fidx="09"] {
    --fragment: "To create is to play the role of the gods, and with each work of art, I become more powerful.";
    --color-name: "pink";
    --block-highlight: var(--frag-bh-pink);
    --text-color: var(--frag-tc-pink);
}

[data-fidx="0A"] {
    --fragment: "...a few possible selections...";
    --color-name: "?";
    --block-highlight: white;
    --text-color: black;
}

[data-fidx="0B"] {
    --fragment: "Have mercy, the toad cometh";
    --color-name: "bright red";
    --block-highlight: var(--frag-bh-red-2);
    --text-color: var(--frag-tc-red-2);
}

[data-fidx="0C"] {
    --fragment: "and the dragon took a bite from a slice of watermelon";
    --color-name: "red";
    --block-highlight: var(--frag-bh-red);
    --text-color: var(--frag-tc-red);
}

[data-fidx="0D"] {
    --fragment: "To die would be an awfully big adventure";
    --color-name: "pink";
    --block-highlight: var(--frag-bh-pink);
    --text-color: var(--frag-tc-pink);
}

[data-fidx="0E"] {
    --fragment: "Rinse with product prior to insertion by helicopter drop";
    --color-name: "blue";
    --block-highlight: var(--frag-bh-blue);
    --text-color: var(--frag-tc-blue);
}

[data-fidx="0F"] {
    --fragment: "Despite everything, it's still you.";
    --color-name: "yellow";
    --block-highlight: yellow;
    --text-color: darkgoldenrod;
}

[data-fidx="10"] {
    --fragment: "Headwear is illegal";
    --color-name: "Orange";
    --block-highlight: var(--frag-bh-orange);
    --text-color: var(--frag-tc-orange);
}

[data-fidx="11"] {
    --fragment: "Thank you what in us rackets glad what gladrackets us";
    --color-name: "green";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="12"] {
    --fragment: "inconsequentially, it ceased to be";
    --color-name: "#A389B9";
    --block-highlight: #A389B9;
    --text-color: indigo;
}

[data-fidx="13"] {
    --fragment: "Numinous velociraptors spring from";
    --color-name: "neon green";
    --block-highlight: var(--frag-bh-green-2);
    --text-color: var(--frag-tc-green-2);
}

[data-fidx="14"] {
    --fragment: "Wizard over an Empty Tomb";
    --color-name: "dark green";
    --block-highlight: #050;
    --text-color: #292;
}

[data-fidx="15"] {
    --fragment: "like a pustule";
    --color-name: "deep plum fleshy purple";
    --block-highlight: purple;
    --text-color: mediumpurple;
}

[data-fidx="16"] {
    --fragment: "Unfortunately, the pot of soup had other plans";
    --color-name: "#76a39b";
    --block-highlight: #76a39b;
    --text-color: darkgreen;
}

[data-fidx="17"] {
    --fragment: "Consistently inconsistent";
    --color-name: "purple";
    --block-highlight: var(--frag-bh-purple);
    --text-color: var(--frag-tc-purple);
}

[data-fidx="18"] {
    --fragment: "this is my submission";
    --color-name: "orange";
    --block-highlight: var(--frag-bh-orange);
    --text-color: var(--frag-tc-orange);
}

[data-fidx="19"] {
    --fragment: "counting grubs in hell";
    --color-name: "dark blue";
    --block-highlight: midnightblue;
    --text-color: royalblue;
}

[data-fidx="1A"] {
    --fragment: "There must be something I missed, hidden in the mist, swirling amidst the things I dismissed";
    --color-name: "Forest green";
    --block-highlight: forestgreen;
    --text-color: palegreen;
}

[data-fidx="1B"] {
    --fragment: "weary willow wisps weep wistfully with worried wisteria";
    --color-name: "#FF69B4";
    --block-highlight: var(--frag-bh-pink);
    --text-color: var(--frag-tc-pink);
}

[data-fidx="1C"] {
    --fragment: "we're all just rats";
    --color-name: "soft yellow";
    --block-highlight: khaki;
    --text-color: goldenrod;
}

[data-fidx="1D"] {
    --fragment: "but only apart could the twain be whole";
    --color-name: "gold and silver";
    --block-highlight: lightslategray;
    --text-color: gold;
}

[data-fidx="1E"] {
    --fragment: "Motion graphics subscription cancellation";
    --color-name: "gold";
    --block-highlight: var(--frag-bh-gold);
    --text-color: var(--frag-tc-gold);
}

[data-fidx="1F"] {
    --fragment: "Rustling rascal receding into the roses";
    --color-name: "red and black";
    --block-highlight: var(--frag-bh-black);
    --text-color: var(--frag-tc-red);
}

[data-fidx="20"] {
    --fragment: "Not sure what this is";
    --color-name: "green";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="21"] {
    --fragment: "carcass caress descending into that place now porous between gray matter and skull";
    --color-name: "kind of a greeny color";
    --block-highlight: darkgreen;
    --text-color: olivedrab;
}

[data-fidx="22"] {
    --fragment: "It's a good thing I'm not the same person in real life that I am in video games";
    --color-name: "Red";
    --block-highlight: var(--frag-bh-red);
    --text-color: var(--frag-tc-red);
}

[data-fidx="23"] {
    --fragment: "Detritus, gorilla, potion, pickle";
    --color-name: "burnt orange";
    --block-highlight: #920;
    --text-color: #EB6;
}

[data-fidx="24"] {
    --fragment: "We smile, we don't bluff.";
    --color-name: "Red";
    --block-highlight: var(--frag-bh-red);
    --text-color: var(--frag-tc-red);
}

[data-fidx="25"] {
    --fragment: "follows capillary action";
    --color-name: "peach";
    --block-highlight: #FFBF99;
    --text-color: #FF9168;
}

[data-fidx="26"] {
    --fragment: "Before I go, I left all of my treasure under the";
    --color-name: "purple";
    --block-highlight: var(--frag-bh-purple);
    --text-color: var(--frag-tc-purple);
}

[data-fidx="27"] {
    --fragment: "What is your dog's middle name?";
    --color-name: "golden";
    --block-highlight: var(--frag-bh-gold);
    --text-color: var(--frag-tc-gold);
}

[data-fidx="28"] {
    --fragment: "heat from fire, fire from heat";
    --color-name: "orange";
    --block-highlight: var(--frag-bh-orange);
    --text-color: var(--frag-tc-orange);
}

[data-fidx="29"] {
    --fragment: "The wills will will the whiles of the wise old willow when again winter warms into spring.";
    --color-name: "green";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="2A"] {
    --fragment: "the sweet spices of life and love, lavender, sassafras";
    --color-name: "Lavender";
    --block-highlight: #C9A0DC;
    --text-color: lavender;
}

[data-fidx="2B"] {
    --fragment: "In all reality";
    --color-name: "#245e21";
    --block-highlight: lightgreen;
    --text-color: #245e21;
}

[data-fidx="2C"] {
    --fragment: "Go lynx";
    --color-name: "light blue";
    --block-highlight: skyblue;
    --text-color: blue;
}

[data-fidx="2D"] {
    --fragment: "if you are eating a graveyard, you have a problem";
    --color-name: "Purple";
    --block-highlight: var(--frag-bh-purple);
    --text-color: var(--frag-tc-purple);
}

[data-fidx="2E"] {
    --fragment: "everything, you and me in black, dancing freely, our promise everlasting, to eternity";
    --color-name: "pastel dandelion on eigengrau";
    --block-highlight: #16161D;
    --text-color: #FDCB58;
}

[data-fidx="2F"] {
    --fragment: "A discombobulated gongoozler spotted a billabong while noshing on a doodlesack";
    --color-name: "turquoise";
    --block-highlight: turquoise;
    --text-color: blue;
}

[data-fidx="30"] {
    --fragment: "infinities in mosaic subsume joyous trembling. I";
    --color-name: "#E3D58C";
    --block-highlight: #E3D58C;
    --text-color: sienna;
}

[data-fidx="31"] {
    --fragment: "the deafening sound of freshly cut grass";
    --color-name: "#008b8b";
    --block-highlight: darkcyan;
    --text-color: lightcyan;
}

[data-fidx="32"] {
    --fragment: "FORM FOLLOWS FUNCTION";
    --color-name: "ridgy red";
    --block-highlight: var(--frag-bh-red-2);
    --text-color: var(--frag-tc-red-2);
}

[data-fidx="33"] {
    --fragment: "the zagging heights loomed";
    --color-name: "green";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="34"] {
    --fragment: "blue bird falls by cold winter moon";
    --color-name: "sage green";
    --block-highlight: #BCB88A;
    --text-color: seagreen;
}

[data-fidx="35"] {
    --fragment: "it rained earlier in the morning and i'm sinking slightly into the grass and i like that";
    --color-name: "darkish lavender";
    --block-highlight: #B57EDC;
    --text-color: #796878;
}

[data-fidx="36"] {
    --fragment: "Last night I stayed up late playing poker with Tarot cards. I got a full house and four people died.";
    --color-name: "green";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="37"] {
    --fragment: "don't be afraid of being lost";
    --color-name: "blue";
    --block-highlight: var(--frag-bh-blue);
    --text-color: var(--frag-tc-blue);
}

[data-fidx="38"] {
    --fragment: "but I never cared much about that anyway. If we’re all made of stardust, then";
    --color-name: "light cyan";
    --block-highlight: var(--frag-bh-cyan);
    --text-color: var(--frag-tc-cyan);
}

[data-fidx="39"] {
    --fragment: "Did you know that I’m made of";
    --color-name: "lime green";
    --block-highlight: var(--frag-bh-green-2);
    --text-color: var(--frag-tc-green-2);
}

[data-fidx="3A"] {
    --fragment: "iridescent madness boring into the depths of a shattered mind as if hungering for";
    --color-name: "purple";
    --block-highlight: var(--frag-bh-purple);
    --text-color: var(--frag-tc-purple);
}

[data-fidx="3B"] {
    --fragment: "What temerity!";
    --color-name: "red";
    --block-highlight: var(--frag-bh-red);
    --text-color: var(--frag-tc-red);
}

[data-fidx="3C"] {
    --fragment: "this is the earliest I've ever been late";
    --color-name: "avocado green";
    --block-highlight: #B2C248;
    --text-color: #568203;
}

[data-fidx="3D"] {
    --fragment: "I have brought the young king to his kingdom, and the old man to his home.";
    --color-name: "greem";
    --block-highlight: var(--frag-bh-green);
    --text-color: var(--frag-tc-green);
}

[data-fidx="3E"] {
    --fragment: "perambulated to the cheese grater";
    --color-name: "pomegranite";
    --block-highlight: #E52147;
    --text-color: #7D0140;
}

[data-fidx="3F"] {
    --fragment: "You can call me a quitter. But I'm calling it a coming of age";
    --color-name: "#ffcc00";
    --block-highlight: #FC0;
    --text-color: saddlebrown;
}

[data-fidx="40"] {
    --fragment: "it was once a tadpole";
    --color-name: "purple";
    --block-highlight: var(--frag-bh-purple);
    --text-color: var(--frag-tc-purple);
}

[data-fidx="41"] {
    --fragment: "boom! right away I had a different problem";
    --color-name: "molotov cocktail red";
    --block-highlight: var(--frag-bh-red-2);
    --text-color: var(--frag-tc-red-2);
}

[data-fidx="42"] {
    --fragment: "a blemish on a stainless slate";
    --color-name: "Aquamarine";
    --block-highlight: seagreen;
    --text-color: aquamarine;
}

[data-fidx="43"] {
    --fragment: "my center is faltering. my right is falling back. situation: excellent. i attack.";
    --color-name: "hot pink on black";
    --block-highlight: black;
    --text-color: #FF1493;
}

[data-fidx="44"] {
    --fragment: "The raven is its friend";
    --color-name: "white";
    --block-highlight: white;
    --text-color: darkslategray;
}