html, body {
        font-family: -apple-system, BlinkMacSystemFont, SF Pro Arial, Inter, Roboto, Segoe UI, Helvetica Neue, Shanggu Sans, ChiuKong Gothic CL, Source Han Sans K, Noto Sans CJK KR, PingFang HK, Chiron Hei HK, Source Han Sans HC, Noto Sans CJK HK, Microsoft JhengHei, ui-sans-serif, sans-serif;
        line-height: 1.2em;
}

.center-align {
        text-align: center;
}
.double-line-height {
        line-height: 2em;
}

a {
        text-decoration: none;
        color: #007FFF;
}

img.button {
        width: 150px
}
img.button-large {
        width: 260px
}

pre, code {
        font-family: Monaspace Neon, Jetbrains Mono, SF Mono, SFMono-Regular, ui-monospace, Consolas, Menlo, monospace;
}
pre {
        overflow: auto;
        white-space: pre;
        padding: 2em;
        line-height: 1.6em;
        border-radius: 0.3em;
}

@media(prefers-color-scheme: dark) {
        html, body {
                color: white;
                background: #121212;
        }
        a:hover {
                color: white;
        }
        pre {
                background-color: #222222;
        }
}
@media(prefers-color-scheme: light) {
        html, body {
                color: black;
                background: white;
        }
        a:hover {
                color: black;
        }
        pre {
                background-color: #eeeeee;
        }
}
@media(prefers-color-scheme: no-preference) {
        html, body {
                color: black;
                background: white;
        }
        a:hover {
                color: black;
        }
        pre {
                background-color: #eeeeee;
        }
}

@media (min-width: 1000px) {
        body {
                padding-left: 10%;
                padding-right: 10%;
        }
}
@media (min-width: 1900px) {
        body {
                padding-left: 20%;
                padding-right: 20%;
        }
}