@font-face {
    font-family: "Fira Sans";
    src: url("/fonts/FiraSans-Regular.woff2") format("woff2"),
    url("/fonts/FiraSans-Bold.woff2") format("woff2"),
    url("/fonts/FiraSans-Italic.woff2") format("woff2");
    font-display: swap;
}
@font-face {
    font-family: "Noto Serif";
    src: url("/fonts/NotoSerif-Regular.woff2") format("woff2");
    font-display: swap;
}

:root {
    /* Scale font size with smaller side length of viewport, which changes depending on orientation) */
    font-size: clamp(14px, 2.25vmin, 20px);
    
    --f-default: "Fira Sans", "Times New Roman", serif;
    --f-alt: "Noto Serif", "Times New Roman", serif; /* used for quotes; italic only */
    --f-monospace: "JetBrains Mono", "Noto Sans Mono", monospace;
    
    /* Shadow in light mode, glow in dark mode */
    --c-mid-gray: #7f7f7f;
    --c-mark: #f386197f;
    
    /* Base color for color generator: #2c767d */
    --c-bg: #eeeeee;
    --c-bg-alt: #e9e9e9;
    --c-block-highlight: #ffffff;
    --c-fg: #000000;
    --c-accent: #2c767d;
    --c-triadic-1: #9b3692;
    --c-triadic-2: #767d2c;
    
    --e-ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
    @media (prefers-color-scheme: dark) {
        /* Base color for color generator: #68c2ca */
        --c-bg: #222222;
        --c-bg-alt: #272727;
        --c-block-highlight: #000000;
        --c-fg: #ffffff;
        --c-accent: #68c2ca;
        --c-triadic-1: #d586ce;
        --c-triadic-2: #c2ca68;
    }

    /* Catch edge case for 4K screens */
    @media (min-width: 2160px), (min-height: 2160px)  {
        font-size: 28px;
    }
}

.inline {
    display: inline;
}

.upside-down {
    transform: rotate(180deg);
}

.large {
    scale: 1.5;
}
.transform-from-left {
    transform-origin: left;
}
.transform-from-right {
    transform-origin: right;
}

h1 {
    background-color: var(--c-block-highlight);
    font-family: var(--f-monospace);
    font-size: 1.6em; /* scale up inherited font size from root */
    line-height: 1em; /* so that multi-line h1-eadings don't take up too much vertical space */
    padding: 0.25em 0.5em;
    margin: 1rem auto; /* for margins, the rem unit makes the layout more consistent */
    border: thick double var(--c-bg); /* width | style | color */
}

h2 {
    font-size: 1.4em; /* perfectly between blockquote and h1 */
}

button {
    background-color: var(--c-bg);
    color: var(--c-fg);
    font-family: var(--f-default);
    text-decoration: none;
    margin: 0 1em;
    padding: 0.1em 0.2em;
    border: medium outset var(--c-block-highlight);
    box-shadow: 2px 2px 2px 2px var(--c-mid-gray);
    transition: all 20ms var(--e-ease-out-cubic) 0s;
    a {
        color: var(--c-fg);
        text-decoration: none;
    }
    &:not(:disabled):hover {
        background-color: var(--c-bg-alt);
    }
    &:not(:disabled):active { /* button "sinks in" when clicked/pressed */
        transform: translate(2px, 2px);
        box-shadow: 0 0 2px 2px var(--c-mid-gray);
        transition: all 20ms var(--e-ease-out-cubic) 0s;
    }
}

body {
    /* attachment type, image, starting position, horizontal & vertical scale. repeat type is default. slash is for seperating different atrributes with the same data type */
    background: fixed repeating-conic-gradient(from 22.5deg, var(--c-bg) 0deg 45deg, var(--c-bg-alt) 45deg 90deg) top left / 25vw 25vw;
    color: var(--c-fg);
    font-family: var(--f-default);
    margin: 2rem 5vw; /* Small left & right margins by default to prioritize mobile devices. Resilient web design! */
    img.responsive-image { /* width never scales to larger than original image */
        max-width: min(200px, 50vw);
        height: auto;
    }
    header {
        text-align: center;
        h1#header-logo { /* apply variations to only the logo */
            font-size: 2.5em;
        }
        nav#header-nav {
            margin: 1rem;
            padding: 0;
            button {
                font-size: 1.4em;
                &:disabled { /* button is disabled when it links to current page */
                    border: medium dashed var(--c-fg);
                    box-shadow: none;
                }
                &:not(:last-child) {
                    margin-right: 0.5rem;
                }
            }
        }
    }
    main {
        div#main-article-dates {
            font-style: italic;
            text-indent: 0;
            margin-left: 2rem; /* align left border with that of blockquotes */
            padding-left: 1rem;
            border-left: thick dotted var(--c-fg);
        }
        nav#table-of-contents {
            background-color: var(--c-block-highlight);
            position: sticky;
            top: 2rem;
        }
        p {
            text-indent: 2em;
        }
        p, li, th, tr, td {
            line-height: 1.25em;
            text-align: justify;
        }
        mark {
            background-color: var(--c-mark);
            color: inherit;
        }
        code {
            font-family: var(--f-monospace);
        }
        a {
            color: var(--c-accent);
            text-decoration-thickness: 0.1em;
            &:visited {
                color: var(--c-triadic-1);
            }
            &:active {
                color: var(--c-triadic-2)
            }
        }
    }
    footer {
        h1#footer-signature {
            text-align: right;
            margin: 1.5em auto;
            padding: 0.5em 20% 0.5em 0; /* put signature in a relatively typical signature location */
        }
    }
    /* if resolution is between 360p and 720p; includes large phones and small tablets */
    @media (min-width: 640px) {
        margin: 2rem 10vw;
        background-size: 16.67vw 16.67vw;
    }
    /* if resolution is 720p or higher; includes large tablets and common computers */
    @media (min-width: 1280px) {
        margin: 2rem 15vw;
        background-size: 12.5vw 12.5vw;
    }
}

blockquote {
    background-image: linear-gradient(
        to bottom right, var(--c-block-highlight) 0 10%, var(--c-bg) 50%, var(--c-block-highlight) 90% 100%
    );
    font-family: var(--f-alt);
    font-style: italic;
    font-size: 1.2em; /* perfectly between paragraph and h2 */
    text-align: left;
    border-width: thick;
    border-style: none solid;
    border-color: var(--c-block-highlight);
    border-radius: 0 1.5em;
    margin: 2rem;
    padding: 1rem;
    div.blockquote-attribution {
        text-align: right;
        &::before {
            content: "— "; /* this is an em dash */
        }
    }
    /* from tablet width upwards, indent first line of paragraphs but not poems */
    @media (min-width: 640px) {
        &:not(.poem) {
            text-indent: 2em;
        }
    }
    /* from laptop width upwards, compress quote towards center */
    @media (min-width: 1280px) {
        margin: 2rem 4rem;
    }
}

table {
    border-collapse: collapse;
    margin: 1em;
    th, td {
        text-align: left;
        border: medium solid var(--c-fg);
        padding: 0.5em;
        &.table-inverted-cell {
            background-color: var(--c-fg);
            color: var(--c-bg);
        }
    }
}