/*
 * Copyright 2026 Jaakko Keränen <jk@skyjake.fi>
 * License: CC BY 4.0 -- https://creativecommons.org/licenses/by/4.0/
 */

body {
    font-family: Roboto, sans-serif;
    font-weight: 400;
    font-size: 15pt;
    line-height: 140%;
    padding-left: 1em;
    padding-right: 1em;
    margin-top: 2em;
    margin-bottom: 2em;
}

h1 {
    font-size: 200%;
    font-weight: 700;
    line-height: 120%;
    margin-top: 1ex;
}

h2 {
    font-size: 167%;
    font-weight: 400;
    line-height: 120%;
    padding-top: 0.75ex;
}

h3 {
    font-size: 133%;
    font-weight: 700;
    margin-left: 1.1em;
    margin-bottom: 1ex;;
}

a {
    text-decoration: none;
    font-weight: 600;
}

p, ul {
    margin-left: 1.5em;
}

p, ul li {
    margin-top: 0;
    margin-bottom: 0;
}

p, ul li, blockquote {
    text-align: justify;
    hyphens: auto;
}

p {
    margin-bottom: 1em;
}

p:empty {
    margin-top: 20pt;
    margin-bottom: 20pt;
}

p.lede {
    font-size: 120%;
    margin-left: 1.25em;
    line-height: 140%;
}

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 3em;
}
ul li {
    margin-top: 5pt;
    margin-bottom: 5pt;
}
ul li::before {
    content: "•";
    color: #aaffff;
    font-weight: bold;
    display: inline-block;
    width: 1.1em;
    margin-left: -1.1em;
}

blockquote {
    margin-left: 2.25em;
    margin-right: 1.25em;
    font-style: italic;
    font-weight: 300;
    padding-left: 0.75em;
    border-left: 1px solid #597f7d;
}

pre {
    font-family: "Fira Mono", monospace;
    font-size: 75%;
    margin-left: 2em;
    max-width: 100%;
    overflow: auto;
    border: solid;
}

img {
    max-width: 100%;
}

/* Colors */

html, body { background: #181714; color: #fff687; }
p.lede { color: #f9f5c3; }
blockquote { color: #aaffff; }
pre { color: #aaffff; }
h1 { color: #e5fbfb; }
h2 { color: #c8f7f7; }
h3 { color: #aaf3f3; }
.gemini-link .link-icon { color: #00c0ff; }
a, .gemini-link a { color: #fffcd2; }
a:hover, .gemini-link a:hover { color: #00c0ff; text-decoration: underline; }
.web-link .link-icon { color: #ffc000; }
.web-link a { color: #fffcd2; }
.web-link a:hover { color: #ffc000; }
.site-icon, .site-title { color: #806000; }
#original { color: #806000; }
#original a { color: #a07410; }

@media (prefers-color-scheme: light) {
    html, body { background: #fff; color: rgb(26, 24, 0); }
    p.lede { color: rgb(102, 95, 0); }
    blockquote { color: #008080; }
    pre { color: #008080; }
    h1 { color: rgb(160, 130, 0); }
    h2 { color: rgb(76, 122, 51); }
    h3 { color: rgb(0, 102, 102); }
    ul li::before { color: #008080; }
    .gemini-link .link-icon { color: rgb(10, 110, 130); }
    a, .gemini-link a { color: rgb(26, 24, 0); }
    a:hover, .gemini-link a:hover { color: rgb(24, 118, 137); }
    .web-link .link-icon { color: rgb(210, 120, 10); }
    .web-link a { color: rgb(63, 60, 19); }
    .web-link a:hover { color: rgb(210, 120, 10); }
    .site-icon, .site-title { color: #db1; }
    #original { color: #806000; }
    #original a { color: #a07410; }
}

/* Responsivity */

@media only screen and (min-width: 1200px) {
        #banner { display: block; }
        h1 { padding-top: 1ex; }
}

@media only screen and (max-width: 1199px) {
        #banner {
                display: block;
                position: static;
                margin: auto;
                max-width: 37em;
                margin-bottom: 2em;
        }
        #banner .site-icon, #banner .site-title {
                display: inline-block;
        }
        #banner .site-icon {
                font-size: 200%;
                padding-top: 0.5ex;
        }
	.site-icon, .site-title { color: #ffc000; }

        @media (prefers-color-scheme: light) {
            .site-icon, .site-title { color: #db1; }
        }
}

@media only screen and (max-width: 499px) and (orientation: portrait) {
        body {
                font-size: 12pt; -webkit-text-size-adjust: 100%;
                padding-left: 0.5em; padding-right: 0.5em;
        }
}
@media only screen and (orientation: landscape) and (max-width: 850px) {
        body {
                font-size: 12pt; -webkit-text-size-adjust: 100%;
                padding-left: 0.5em; padding-right: 0.5em;
        }
}