:root,
html[data-theme="simple"] {
    --flag-display: default;
    --php-display: none;

    --text: #1a1a1a;
    --link: #00e;
    --link-visted: #a00;
    --link-hover-bg: #ffff0070;

    --bg-base: #eee;
    --ui-bg: var(--bg-base);
    --bg-pattern: var(--bg-base);
    --main-border: none;
    --content-border: 1px solid #ccc;
    --nav-link: var(--text);
    --nav-hover: #999;
    --secondary-text-opacity: 0.6;

    --thick-border: 3px solid #ccc;

    --tooltip-target-color: #1c8bf2;
    --tooltip-target-style: dotted;
    --popup-color: var(--text);
    --popup-bg: var(--ui-bg);

    --audio-bg: hsl(50, 100%, 60%);
    --audio-hover-bg: hsl(40, 100%, 60%);

    --font: -apple-system, BlinkMacSystemFont, avenir next, avenir, sans-serif;
    /* fs = fieldset */
    --fs-legend-style: normal;
    --fs-legend-weight: bold;
}

html[data-theme="retro"] {
    overscroll-behavior: none;
  
    --flag-display: none;
    --php-display: default;

    --text: #000;
    --link: #00e;
    --link-visted: #551a8b;
    --link-hover-bg: none;

    --bg-base: #d6d0c9;
    --ui-bg: var(--bg-base);
    --bg-pattern: #000;
    --main-border: 4px ridge grey;
    --content-border: 2px groove #bfb9b2;
    --nav-link: var(--text);
    --nav-hover: #777;
    --secondary-text-opacity: 0.6;

    --thick-border: 4px groove #bfb9b2;

    --tooltip-target-color: #377;
    --tooltip-target-style: dashed;
    --popup-color: var(--text);
    --popup-bg: var(--ui-bg);

    --audio-bg: hsl(60, 100%, 50%);
    --audio-hover-bg: hsl(50, 100%, 50%);

    --font: serif;
    --fs-legend-style: italic;
    --fs-legend-weight: normal;
}

body {
    background-color: var(--bg-base);
    background-image:
        repeating-linear-gradient(
            45deg,
            var(--bg-pattern) 25%,
            transparent 25%,
            transparent 75%,
            var(--bg-pattern) 75%,
            var(--bg-pattern)
        ),
        repeating-linear-gradient(
            45deg,
            var(--bg-pattern) 25%,
            var(--bg-base) 25%,
            var(--bg-base) 75%,
            var(--bg-pattern) 75%,
            var(--bg-pattern)
        );
    background-position:
        0 0,
        2px 2px;
    background-size: 4px 4px;

    font-family: var(--font);
    line-height: 1.5;
    color: var(--text);
    height: 100vh;
}

.sidebar {
    border-left: var(--main-border);
    background-color: var(--ui-bg);
    box-sizing: border-box;
    display: flex;
    align-items: center;

    a {
        color: var(--nav-link);
        text-decoration: none;
    }
    a:hover {
        color: var(--nav-hover);
    }
}

#banner {
    border-top: var(--main-border);
    img {
        max-height: 100%;
        aspect-ratio: 283 / 153;
        margin: 0 auto;
    }
    #flag {
        display: var(--flag-display);
        width: 100%;
    }
    #php {
        display: var(--php-display);
        width: 80%;
    }
}

#navigation {
    justify-content: space-evenly;

    a {
        display: block;
        text-align: center;
        width: 75px;
    }
    a::before {
        content: "[";
    }
    a::after {
        content: "]";
    }
    #current::before {
        content: ">";
    }
    #current::after {
        content: "<";
    }
}

#footer {
    border-bottom: var(--main-border);
    flex-direction: column;
    justify-content: space-around;
    a {
        padding: 5px;
    }
    a::before {
        content: "[ ";
    }
    a::after {
        content: " ]";
    }
    #theme-toggle:hover {
        cursor: pointer;
    }
}

#content {
    background-color: var(--ui-bg);
    padding: 20px 40px;
    border: var(--main-border);
    box-sizing: border-box;

    a {
        color: var(--link);
    }
    a:hover {
        background-color: var(--link-hover-bg);
    }
    a:visited {
        color: var(--link-visted);
    }

    blockquote {
        font-style: italic;
        opacity: var(--secondary-text-opacity);
        border-left: var(--thick-border);
        padding: 0.5em 10px;
    }

    details {
        summary {
            opacity: var(--secondary-text-opacity);
        }
        summary:hover {
            cursor: pointer;
        }
    }

    fieldset {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
        /*display: inline;*/
        break-inside: avoid;
        border: var(--content-border);

        legend {
            font-style: var(--fs-legend-style);
            font-weight: var(--fs-legend-weight);
        }
        /* nested legends */
        fieldset {
            legend {
                font-size: 0.8em;
            }
        }
        ul {
            margin: 0;
        }
    }

    figure {
        img {
            width: 100%;
        }
        figcaption {
            opacity: var(--secondary-text-opacity);
            font-size: 0.8em;
        }
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
        line-height: 1.2;
    }

    hr {
        border: none;
        border-top: var(--content-border);
    }

    table,
    th,
    td {
        border: var(--content-border);
    }

    .image-container {
        display: flex;
        justify-content: center;
    }
    .image {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    .audio-clip {
        background-color: var(--audio-bg);
        cursor: pointer;
    }
    .audio-clip:hover {
        background-color: var(--audio-hover-bg);
    }

    .popover-target {
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
    }

    .popup {
        background: var(--popup-bg);
        color: var(--popup-color);
        padding: 5px;
        max-width: 60vw;
        max-height: 60vh;
        img {
            max-width: 100%;
            max-height: 50vh;
        }
        border: var(--thick-border);
    }

    /* these are not very traditional tooltips */
    /* i plan to use them primarily for showing images */
    /* the content is show in the middle of the screen,
        to prevent it moving outside of the viewport*/
    .tooltip-target {
        text-decoration: underline;
        text-decoration-style: var(--tooltip-target-style);
        text-underline-offset: 2px;
        color: var(--tooltip-target-color);
    }
    .tooltip-content {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 1000;
        img {
            max-width: 50vw;
            max-height: 50vh;
        }
    }
    .tooltip-target:hover {
        cursor: pointer;
    }
    .tooltip-target:hover .tooltip-content,
    .tooltip-target:focus .tooltip-content {
        display: block;
    }
}

/* mobile only */
@media (max-width: 650px) {
    .sidebar {
        border-right: var(--main-border);
    }
    #banner {
        padding-top: 10px;
    }
    #navigation {
        flex-direction: row;

        a::before,
        a::after {
            position: relative;
        }
        a::before {
            left: -5px;
        }
        a::after {
            right: -5px;
        }
    }
}

/* desktop only */
@media (min-width: 650px) {
    #navigation {
        flex-direction: column;
        a::before,
        a::after {
            position: absolute;
        }
        a::before {
            left: 15px;
        }
        a::after {
            right: 15px;
        }
        span {
            #subcurrent {
                font-size: 0.8em;
            }
            #subcurrent::before {
                content: ">";
                left: 20px;
            }
            #subcurrent::after {
                content: "<";
                right: 20px;
            }
        }
    }

    .split {
        columns: 2;
    }
}