/*--- 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%);
}

/*--- 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 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 {
flex: 1 1;
}

.article-view .article .article-body music::before {
content: '\266b';
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;
}