@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');

@font-face {
    font-family: "Select Mono Italic";
    src: 
        url("/res/font/SelectMono-Italic.otf") format("opentype"),
        url("/res/font/SelectMono-Italic.woff") format("woff")
}

:root {
    color-scheme: light;
    --bg: rgb(241, 241, 237);
    --bg-image: none;
    --primary: black;
    --link-color: #fe5d0c;
}
:root.night {
    color-scheme: dark;
    --bg: black;
    --primary: #ededed;
    --link-color: rgb(255, 225, 0);
    --bg-image: url("/res/bg.png");
}
html {
    background-color: var(--bg);
    background-image: var(--bg-image);
    background-size: 100vw 100vh;
    background-attachment: fixed;
    color: var(--primary);
    margin: 0;
    font-family: serif;
}
[lang=ko] {
    font-size: .9em;
    font-family: sans-serif;
}
body {
    max-width: 70em;
    margin: auto;
    padding: 3em;
    box-sizing: border-box;
    text-align: justify;
    line-height: 1.3em;
}
@media (max-width: 500px) {
    html {
        font-size: 17px;
    }
    body {
        padding: 2em;
    }
}

*::selection {
    background: var(--primary);
    color: var(--bg);
}

.pixel {
    image-rendering: pixelated;
}

li {
    padding-left: 1ch;
    list-style-position: outside;
}
ul {
    padding-left: 1.5em;
}
ul li {
    list-style-type: "— ";
}

figure {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
    border: 1px dotted var(--primary);
    padding: .5em;
}
img {
    max-width: 100%;
}

em {
    font-style: normal;
}
em,
details summary,
h1, h2, h3, h4, h5, h6 {
    font-family: 'Select Mono Italic';
    font-size: .8em;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    margin: 0;
    margin-bottom: 1rem;
}

details {
    margin-bottom: 1em;
}
details summary {
    list-style-type: "> \00a0";
}
details[open] summary {
    list-style-type: ". \00a0";
}
details summary {
    cursor: pointer;
    border-bottom: 1px dotted var(--primary);
}

hr {
    border: none;
    border-bottom: 1px dotted var(--primary);
}

a {
    color: var(--link-color);
}