File: app/src/style.css

:root {
    --fontPre: XR, monospace;
    --borderSize: 0.0625rem;
    --headerHeight: calc(3.7rem + var(--borderSize));
    --fontSizeNormal: 16px;
    --fontSizeSubNormal: 0.9375rem;
    --fontSizeSmall: 0.8125rem;
    --marginEl: 0.25rem;
    --marginElRelative: 0.25em;
    --borderRadiusBox: 0.375rem;
    --dumpFontSize: 0.90625rem;
    --dumpText: #ecf0f1;
    --dumpBackground: hsl(210, 49%, 15%);
    --traceFontSize: 0.8125em;
    --traceBackgroundOdd: hsl(210, 29%, 29%);
    --traceBackgroundEven: hsl(210, 29%, 24%);
    --colorAlert: #fe0000;
    --colorRemove: #fe0000;
    --colorCopy: #2ecc71;
    --colorExport: #8e44ad;
    --iconResume: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcGxheSI+PHBvbHlnb24gcG9pbnRzPSI1IDMgMTkgMTIgNSAyMSA1IDMiPjwvcG9seWdvbj48L3N2Zz4=);
    --iconStop: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc3F1YXJlIj48cmVjdCB4PSIzIiB5PSIzIiB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHJ4PSIyIiByeT0iMiI+PC9yZWN0Pjwvc3ZnPg==);
    --iconClear: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMjQgMjQiIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgY2xhc3M9ImZlYXRoZXIgZmVhdGhlci1kZWxldGUiPjxwYXRoIGQ9Ik0yMSA0SDhsLTcgOCA3IDhoMTNhMiAyIDAgMCAwIDItMlY2YTIgMiAwIDAgMC0yLTJ6Ij48L3BhdGg+PGxpbmUgeDE9IjE4IiB5MT0iOSIgeDI9IjEyIiB5Mj0iMTUiPjwvbGluZT48bGluZSB4MT0iMTIiIHkxPSI5IiB4Mj0iMTgiIHkyPSIxNSI+PC9saW5lPjwvc3ZnPg==);
    --iconPause: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcGF1c2UiPjxyZWN0IHg9IjYiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+PHJlY3QgeD0iMTQiIHk9IjQiIHdpZHRoPSI0IiBoZWlnaHQ9IjE2Ij48L3JlY3Q+PC9zdmc+);
    --iconRemove: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItdHJhc2giPjxwb2x5bGluZSBwb2ludHM9IjMgNiA1IDYgMjEgNiI+PC9wb2x5bGluZT48cGF0aCBkPSJNMTkgNnYxNGEyIDIgMCAwIDEtMiAySDdhMiAyIDAgMCAxLTItMlY2bTMgMFY0YTIgMiAwIDAgMSAyLTJoNGEyIDIgMCAwIDEgMiAydjIiPjwvcGF0aD48L3N2Zz4=);
    --iconCopy: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY29weSI+PHJlY3QgeD0iOSIgeT0iOSIgd2lkdGg9IjEzIiBoZWlnaHQ9IjEzIiByeD0iMiIgcnk9IjIiPjwvcmVjdD48cGF0aCBkPSJNNSAxNUg0YTIgMiAwIDAgMS0yLTJWNGEyIDIgMCAwIDEgMi0yaDlhMiAyIDAgMCAxIDIgMnYxIj48L3BhdGg+PC9zdmc+);
    --iconShare: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc2hhcmUtMiI+PGNpcmNsZSBjeD0iMTgiIGN5PSI1IiByPSIzIj48L2NpcmNsZT48Y2lyY2xlIGN4PSI2IiBjeT0iMTIiIHI9IjMiPjwvY2lyY2xlPjxjaXJjbGUgY3g9IjE4IiBjeT0iMTkiIHI9IjMiPjwvY2lyY2xlPjxsaW5lIHgxPSI4LjU5IiB5MT0iMTMuNTEiIHgyPSIxNS40MiIgeTI9IjE3LjQ5Ij48L2xpbmU+PGxpbmUgeDE9IjE1LjQxIiB5MT0iNi41MSIgeDI9IjguNTkiIHkyPSIxMC40OSI+PC9saW5lPjwvc3ZnPg==);
    --iconExport: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItc2hhcmUiPjxwYXRoIGQ9Ik00IDEydjhhMiAyIDAgMCAwIDIgMmgxMmEyIDIgMCAwIDAgMi0ydi04Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iMTYgNiAxMiAyIDggNiI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIyIiB4Mj0iMTIiIHkyPSIxNSI+PC9saW5lPjwvc3ZnPg==);
    --iconCheck: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItY2hlY2siPjxwb2x5bGluZSBwb2ludHM9IjIwIDYgOSAxNyA0IDEyIj48L3BvbHlsaW5lPjwvc3ZnPg==);
}

@media (prefers-color-scheme: light) {
    :root {
        --bodyBackground: #FFF;
        --bodyText: #24292f;
        --headerBackground: rgba(var(--colorShadeRGB), .2);
        --colorShadeRGB: 189, 195, 199;
        --buttonTopicText: #24292f;
        --buttonBackground: rgba(var(--colorShadeRGB), .4);
        --dumpText: var(--bodyText);
        --dumpBackground: hsl(210deg 29% 96%);
        --traceBackgroundOdd: var(--dumpBackground);
        --traceBackgroundEven: hsl(210deg 29% 93%);
        --buttonBoderColor: rgb(27 31 36 / 15%);
        --buttonActiveBorderColor: rgb(27 31 36 / 15%);
        --buttonActiveBackgroundColor: rgb(45, 164, 78);
        --buttonActiveColor: #FFF;
        --buttonColor: #24292f;
        --buttonColorDisabled: rgba(36, 41, 47, .6);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --bodyBackground: #010409;
        --bodyText: #c9d1d9;
        --headerBackground: rgba(var(--colorShadeRGB), .2);
        --colorShadeRGB: 65, 74, 88;
        --buttonTopicText: #c9d1d9;
        --buttonBackground: rgba(var(--colorShadeRGB), .4);
        --dumpText: #020202;
        --dumpBackground: #132537;
        --dumpText: var(--bodyText);
        --dumpBackground: hsl(207, 20%, 11%);
        --traceBackgroundOdd: var(--dumpBackground);
        --traceBackgroundEven: hsl(207, 20%, 8%);
        --buttonBorderColor: rgb(240 246 252 / 10%);
        --buttonActiveBorderColor: rgb(27 31 36 / 15%);
        --buttonActiveBackgroundColor: rgb(35, 134, 54);
        --buttonActiveColor: #FFF;
        --buttonColor: #c9d1d9;
        --buttonColorDisabled: rgba(201, 209, 217, .6);
    }
}

@font-face {
    font-family: "XR";
    src: local("Fira Code Regular"),
        url('fonts/firacode/firacode-regular.woff') format('woff');
}

@-webkit-keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

* {
    box-sizing: border-box;
}

html {
    font-size: var(--fontSizeNormal);
    font-family: sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

body {
    background: var(--bodyBackground);
    color: var(--bodyText);
    padding-top: var(--headerHeight);
    line-height: normal;
}

button:not([disabled]) {
    cursor: pointer;
}

pre, .pre {
    padding: 1rem;
    font-family: var(--fontPre);
    line-height: normal;
    overflow: auto;
    word-wrap: break-word;
    white-space: pre-wrap;
    display: block;
    margin: 0;
    word-break: break-all;
}

header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    background: var(--headerBackground);
    -webkit-backdrop-filter: blur(0.1rem);
    backdrop-filter: blur(0.75rem);
    padding: 0.875rem 1.75rem;
    height: var(--headerHeight);
    grid-template-columns: auto auto 1fr;
    align-items: flex-start;
    display: grid;
    z-index: 1;
    justify-content: center;
    align-content: center;
    justify-items: end;
}

header>div {
    display: inline-block;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.header-title {
    font-weight: bold;
    font-size: 1.5rem;
    outline: 0;
    margin-right: 1rem;
    min-width: 3rem;
}

.header-filter>span {
    margin-bottom: 0;
}

.message {
    border-bottom: var(--borderSize) solid rgba(var(--colorShadeRGB), .25);
}

.buttons {
    font-size: 0;
}

.icon, .button {
    border: 0;
    margin: 0;
    display: inline-block;
    height: 1em;
    position: relative;
    margin: 0 0.1em;
    background: none;
    outline: 0;
    padding: 0 0.1em;
}

.button {
    cursor: pointer;
}

.header-buttons .button {
    font-size: 1.4rem;
    opacity: .25;
}

.button-badge {
    font-size: 0.4em;
    position: absolute;
    top: -0.75em;
    left: -0.75em;
    background: var(--colorAlert);
    color: #FFF;
    border-radius: 100em;
    padding: 0.215em 0.5em;
    z-index: 1;
    line-height: normal;
}

.button-badge:empty {
    display: none;
}

.icon:after, .button:after {
    width: 1em;
    height: 1em;
    display: inline-block;
    content: '';
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--buttonColor);
}

.header-buttons .button:hover {
    opacity: 1;
}

.header-buttons .button.button--active {
    opacity: 1;
}

.button.button--active {
    cursor: default;
}

.button--resume:after {
    -webkit-mask-image: var(--iconResume);
    mask-image: var(--iconResume);
}

.button--stop:after {
    -webkit-mask-image: var(--iconStop);
    mask-image: var(--iconStop);
}

.button--clear:after {
    -webkit-mask-image: var(--iconClear);
    mask-image: var(--iconClear);
}

.button--pause:after {
    -webkit-mask-image: var(--iconPause);
    mask-image: var(--iconPause);
}

.button--copy:hover:after {
    background-color: var(--colorCopy);
}

.button--copy:hover:active:after, .body-context-display:hover:active:after {
    -webkit-mask-image: var(--iconCheck);
    mask-image: var(--iconCheck);
}

.button--copy:after {
    -webkit-mask-image: var(--iconCopy);
    mask-image: var(--iconCopy);
}

.button--export:hover:after {
    background-color: var(--colorExport);
}

.button--export:hover:active:after {
    -webkit-mask-image: var(--iconCheck);
    mask-image: var(--iconCheck);
}

.button--export:after {
    -webkit-mask-image: var(--iconExport);
    mask-image: var(--iconExport);
}

.button--remove:hover:after {
    background-color: var(--colorRemove);
}

.button--remove:hover:active:after {
    -webkit-mask-image: var(--iconCheck);
    mask-image: var(--iconCheck);
}

.button--remove:after {
    -webkit-mask-image: var(--iconRemove);
    mask-image: var(--iconRemove);
}

.header-buttons .button--active:after {
    opacity: 1;
}

.message:only-child {
    border-bottom-color: transparent;
}

.message {
    padding: 0.875rem;
    grid-template-columns: auto auto 1fr;
    align-items: flex-start;
    display: grid;
    -webkit-animation: slideDown 250ms ease-in-out;
    animation: slideDown 250ms ease-in-out;
    position: relative;
    transition: all 500ms ease-in-out;
}

.message--while-pause {
    display: none;
}

.message>div {
    padding: 0.875rem;
}

.message-buttons {
    display: flex;
    justify-content: space-between;
}

.message-buttons .button {
    padding: 0 0.25em;
    font-size: 1rem;
    opacity: 0.5;
}

.message-buttons .button:hover {
    opacity: 1;
}

.message-buttons--pause {
    font-size: 0;
    display: none;
    margin-bottom: var(--marginEl);
}

.message.message--pause .message-buttons--pause {
    display: block;
}

.message-buttons--pause>button {
    border: 0;
    height: auto;
    font-size: var(--fontSizeSubNormal);
    background: rgba(var(--colorShadeRGB), .2);
    padding: var(--fontSizeSmall) calc(1.5 * var(--fontSizeSmall));
    margin: 0;
    display: inline-flex;
    color: var(--buttonColor);
}

.message-buttons--pause>button:disabled {
    color: var(--buttonColorDisabled);
}

.message-buttons--pause>button:disabled .icon:after {
    background-color: var(--buttonColorDisabled);
}

.message-buttons--pause>button:hover:not([disabled]) {
    background: rgba(var(--colorShadeRGB), .4);
}

.message-buttons--pause>button:first-child {
    border-top-left-radius: 2rem;
    border-bottom-left-radius: 2rem;
    margin-right: calc(2 * var(--borderSize));
}

.message-buttons--pause>button:last-child {
    border-top-right-radius: 2rem;
    border-bottom-right-radius: 2rem;
}

.message-buttons--pause .icon:after {
    margin-right: var(--marginEl);
    cursor: inherit;
}

.message-buttons--pause>button:not([disabled]) .button--continue:after {
    background-color: var(--colorCopy);
}

.message-buttons--pause>button:not([disabled]) .button--stop:after {
    background-color: var(--colorRemove);
}

.body-raw>pre {
    margin: 0;
}

.message--status .message-sidebar {
    display: none;
}

.message-sidebar {
    width: 7rem;
    top: var(--headerHeight);
    font-size: 1.4rem;
    position: -webkit-sticky;
    position: sticky;
}

.message--loading .message-sidebar {
    position: static;
}

.message--removing {
    opacity: 0;
    transform: translateX(-100%);
}

.message--copying {
    background-color: #fff8c5;
}

.body-filters .filter-button {
    margin-bottom: var(--marginEl);
}

.topic, .emote {
    display: inline-block;
}

.topic {
    font-size: var(--fontSizeSubNormal);
    background: var(--buttonBackground);
    padding: calc(var(--fontSizeSmall)/2) var(--fontSizeSmall);
    border-radius: var(--marginEl);
    margin-right: var(--marginEl);
}

.topic:hover {
    border-color: rgba(var(--colorShadeRGB), 1);
}

.body-context {
    font-size: var(--fontSizeSmall);
}

.body-context {
    opacity: 0.5;
}

.body-context-display {
    cursor: pointer;
    position: relative;
}

.body-context-display:hover {
    text-decoration: none;
}

.body-context-display:hover:after {
    margin-left: 0.1em;
    width: 0.9em;
    height: 0.9em;
    display: inline-block;
    content: '';
    -webkit-mask: var(--iconCopy) no-repeat 50% 50%;
    mask: var(--iconCopy) no-repeat 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    background-color: var(--bodyText);
}

.body-context-display:active {
    opacity: 1;
}

.hide-if-empty:empty {
    display: none;
}

.cursor-pointer {
    cursor: pointer;
}

.user-select-none {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.user-select-all {
    -webkit-touch-callout: all;
    -webkit-user-select: all;
    -moz-user-select: all;
    -ms-user-select: all;
    user-select: all;
}

.body-raw .hr {
    display: block;
    height: 1px;
    color: transparent;
    background: transparent;
    margin-bottom: -1px;
}

.backtrace .hr>span {
    opacity: 0;
    line-height: 0;
}

.hide {
    width: 0;
    height: 0;
    opacity: 0;
}

.dump, .backtrace {
    border-radius: var(--borderRadiusBox);
    word-break: break-word;
    display: block;
    border: none;
    text-align: left;
}

.dump {
    font-size: var(--dumpFontSize);
    margin-bottom: var(--marginEl);
    white-space: pre-wrap;
    color: var(--dumpText);
    background: var(--dumpBackground);
}

.dump>pre {
    margin: 0;
}

.backtrace {
    font-size: var(--traceFontSize);
    margin-bottom: var(--marginEl);
    overflow: hidden;
    border-radius: var(--borderRadiusBox);
    display: flex;
    flex-direction: column;
}

pre+.backtrace {
    margin-top: var(--marginEl);
}

.pre--stack-entry {
    border: 0;
    color: var(--dumpText);
    background: var(--traceBackgroundOdd);
}

.pre--stack-entry.entry--even {
    background: var(--traceBackgroundEven);
}

.throwable {
    border-bottom: var(--borderSize) solid rgba(var(--colorShadeRGB), .25);
    margin-bottom: var(--marginEl);
}

.throwable-item:first-child {
    font-size: 1em;
    border: none;
}

.throwable-item {
    font-size: 0.875em;
    border-top: var(--borderSize) solid rgba(var(--colorShadeRGB), .25);
    padding: var(--marginElRelative) 0;
}

.throwable-title {
    margin: 0;
}

.throwable-item:not(:first-child) .throwable-title:before {
    content: '\00a0?';
    transform: scaleX(-1);
    display: inline-block;
}

.throwable-code:empty {
    display: none;
}

.throwable-code:before {
    content: "[Code ";
}

.throwable-code:after {
    content: "]";
}

.throwable-code {
    margin-top: 0.5em;
}

.throwable-message, .throwable-backtrace {
    margin-top: 1em;
}

.splash {
    text-align: center;
    padding: 2rem;
    width: 22rem;
    margin: 0 auto;
}

.splash>div {
    margin: 1rem;
}

.body--splash .splash {
    opacity: 0;
    transition: opacity 600ms ease-in-out;
    transition-delay: 200ms;
}

.body--splash-in .splash {
    opacity: 1;
}

.body--splash .splash-logo {
    opacity: 0;
    transform: scale(30);
    transition: transform 600ms ease-in-out;
}

.body--splash-in .splash-logo {
    opacity: 1;
    transform: scale(1);
}

.splash-logo {
    z-index: 1;
    position: relative;
}

.splash-logo a {
    display: inline-block;
    cursor: pointer;
}

.splash-logo img {
    width: 6rem;
    height: 6rem;
    display: inline-block;
    z-index: 1;
}

.splash-welcome {
    font-size: 2rem;
    font-weight: bold;
}

.splash-version {
    color: var(--buttonTopicText);
}

.splash-version a {
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.splash-keys {
    text-align: left;
    font-size: var(--fontSizeSubNormal);
    border-top: var(--borderSize) solid rgba(var(--colorShadeRGB), .25);
}

.splash-key {
    margin: var(--marginEl);
    position: relative;
    padding-left: 3em;
    margin: 1em 0;
}

.splash-key kbd {
    font-size: 1em;
    font-weight: 600;
    font-family: XR;
    background: var(--dumpBackground);
    color: var(--dumpText);
    padding: 0.5em 0.75em;
    display: inline-block;
    border: var(--borderSize) solid rgba(var(--colorShadeRGB), .50);
    border-radius: var(--borderRadiusBox);
    margin-right: 0.75rem;
    position: absolute;
    left: 0;
    top: 0;
    box-shadow: 0.125em 0.125em 0.375em rgba(var(--colorShadeRGB), .40);
}

.splash-key:hover kbd {
    left: 0.15em;
    top: 0.15em;
    box-shadow: none;
}

.splash-key-title {
    font-weight: bold;
}

.splash-key-description {
    opacity: 0.5;
    padding-left: 1.25em;
    position: relative;
    cursor: default;
}

.splash-key:hover .splash-key-description {
    opacity: 0.7;
}

.splash-key-description:after {
    left: 0;
    top: .125em;
    position: absolute;
}

body.body--splash {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 0;
    overflow: hidden;
}

body.body--splash header {
    display: none;
}

body:not(.body--splash) .splash {
    display: none;
}