/*--- Fonts ---*/

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-regular.ttf') format('ttf'), url('../fonts/spacemono-regular.woff2') format('woff2');
    font-style: normal;
}

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-italic.ttf') format('ttf'), url('../fonts/spacemono-italic.woff2') format('woff2');
    font-style: italic;
}

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-bold.ttf') format('ttf'), url('../fonts/spacemono-bold.woff2') format('woff2');
    font-style: normal;
    font-weight: bold;
}

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/spacemono-bolditalic.ttf') format('ttf'), url('../fonts/spacemono-bolditalic.woff2') format('woff2');
    font-style: italic;
    font-weight: bold;
}

/*--- Variables ---*/

:root {
    --code: oklch(0.6588 0.2275 165);
    --code-dim: oklch(0.6588 0.2275 165 / 50%);
    --code-dark: oklch(0.6588 0.2275 165 / 10%);
}

/*--- Mood ---*/

sarcasm {
    display: inline-block;
    transform: scale(-1, 1);
}

/*--- Code ---*/

.article-view .article .article-body code,
.article-view .article .article-body pre {
    color: var(--code);
    font-family: 'Space Mono';
}

.article-view .article .article-body pre {
    background: var(--code-dark);
    padding: 1.5rem;
    border-radius: 1rem;
    margin: 0;
    font-size: 2rem;
    overflow-x: scroll;
    overflow-y: hidden;
}

/*--- Poetry ---*/

.article-view .article .article-body .stanza {
    flex: 100%;
}

.article-view .article .article-body .stanza p {
    text-indent: 1em hanging each-line;
}

.article-view .article .article-body .stanza.full p {
    text-indent: unset;
}

.article-view .article .article-body .stanza tab {
    margin-left: 1em;
}

.article-view .article .article-body .whisper {
    opacity: 0.35;
}

/*--- Footer ---*/

.article-view .article .article-body scene,
.article-view .article .article-body music,
.article-view .article .article-body zen {
    display: block;
    font-size: 1rem;
    font-weight: 500;
}

.article-view .article .article-body scene {
    width: auto;
}

.article-view .article .article-body scene::after {
    content: '\2022';
    display: inline;
    margin: 0 0.5rem;
}

.article-view .article .article-body music {
    display: flex;
    flex-wrap: wrap;
    flex: 1 1;
}

.article-view .article .article-body music song,
.article-view .article .article-body music album,
.article-view .article .article-body music artist {
    display: block;
}

.article-view .article .article-body music album,
.article-view .article .article-body music artist {
    margin-left: 0.5rem;
}

.article-view .article .article-body music song::before {
    content: '\266b';
    display: inline;
    margin-right: 0.5rem;
}

.article-view .article .article-body music album::before,
.article-view .article .article-body music artist::before {
    content: '\002f';
    display: inline;
    margin-right: 0.5rem;
}

.article-view .article .article-body zen {
    flex: 1 1;
}

.article-view .article .article-body zen::before {
    content: '\2638';
    display: inline;
    margin-right: 0.5rem;
    font-feature-settings: 'calt', 'dlig', 'cv05';
}

/*--- Small Screen Size ---*/

@media screen and (max-width:800px) {

    .article-view .article .article-body pre {
        font-size: 1.25rem;
    }

    .article-view .article .article-body music song,
    .article-view .article .article-body music album,
    .article-view .article .article-body music artist {
        flex: 100%;
    }

}