:root {
    --bg-color: #535353;
    --mg-color: #c6c6c6;
    --fg-color: #eeeeee;
    --pesterlog-border-color: #555555;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
}

header {
    position: relative;
    background-color: var(--fg-color);
    border-bottom: .5rem solid var(--mg-color);
    max-width: 1000px;
    width: 100%;
    height: min-content;
    box-sizing: content-box;

    a,
    a #banner {
        display: block;
        width: 100%;
    }

    #banner {
        aspect-ratio: 5;
    }

    #logo_wrapper {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1;

        display: flex;
        flex-direction: row;
        align-items: center;

        pointer-events: none;

        img {
            height: 85%;
            width: auto;
        }

        &.left {
            margin-left: 4%;
        }

        &.right {
            margin-right: 4%;
            justify-content: right;
        }

        &.center {
            justify-content: center;
        }
    }
}

body {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100vh;

    display: flex;
    flex-direction: column;

    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
}

#wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-grow: 1;
    width: 100%;
    overflow-y: auto;

    background-color: var(--bg-color);
}

noscript {
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    padding: .5rem;
    background-color: goldenrod;
    color: black;
}

nav {
    font-size: .625rem;
    font-weight: 700;
    padding: .25rem 0;
    color: White;

    span a,
    span a:visited {
        color: var(--link-color) !important;
    }

    span:nth-child(1) {
        --link-color: White;
    }

    span:nth-child(2) {
        --link-color: DeepSkyBlue;
    }

    span:nth-child(3) {
        --link-color: Lime;
    }

    span:nth-child(4) {
        --link-color: Orange;
    }
}

main {
    display: flex;
    flex-direction: row;
    justify-content: center;
    max-width: 1000px;
    width: 100%;
    background-color: var(--mg-color);
}

article {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 650px;
    max-width: 650px;

    background-color: var(--fg-color);

    font-family: 'Courier New', Courier, monospace;
    font-weight: 700;

    padding: 1rem 0;
    margin: .5rem 0 1.5rem 0;

    h1 {
        font-size: 1.75rem;
        margin: 0 2rem;
    }

    img,
    video {
        width: 100%;
        height: auto;
    }

    p {
        margin: .5rem 1.5rem 0 1.5rem;
        margin-top: .5rem;
    }
}

.pesterlog {
    font-size: .875em;
    margin: 0 1.5rem;
    padding: .125rem;
    border: dashed var(--pesterlog-border-color) 1px;

    .pesterlog_inner {
        margin: .75rem 2rem;
        text-align: left;
        display: none;
    }

    &[open] .pesterlog_inner {
        display: block;
    }

    p {
        margin: 0;
    }
}

#next_page_link,
#suggest_link {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 1.5rem;
    font-weight: 400;
    text-align: left;

    margin: 1rem 1.5rem;
}

#suggest_link {
    background-color: var(--mg-color);
    margin: 0;
    padding: 1rem 1.5rem;
}

#controls {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1rem;

    margin: 0 1.5rem;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: .625rem;
    text-align: left;
}

#log_wrapper {
    padding: 0 .5rem;
    text-align: left;

    b {
        display: block;
        font-size: .75rem;
        font-weight: 700;
    }
}

#toggle_log_order {
    font-size: .625rem;
}

#log,
#toggle_log_order {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: left;
}

h2,
h3 {
    margin: 0;
}

dialog#settings_modal {
    h3 {
        margin: 0;
        margin-bottom: 1rem;
    }

    div {
        text-align: left;
    }

    button {
        margin-top: 1rem;
    }
}

dialog::backdrop {
    background-color: #00000055;
}

#ad {
    img {
        max-width: 100%;
        height: auto;
    }

    p {
        font-size: .75rem;
        color: white;
        opacity: .5;
        margin: 0;
    }
}

footer {
    background-color: var(--fg-color);
    border-top: .5rem solid var(--mg-color);
    margin-top: 1rem;
    max-width: 1000px;
    width: 100%;

    p {
        margin: .5rem 1.5rem;
        text-align: left;
        font-size: .75rem;
    }
}

.credits {
    p {
        margin-top: 0;
        margin-bottom: 1rem;
    }

    h2:not(p + h2):not(:first-child),
    h3:not(p + h3):not(h2 + h3):not(:first-child) {
        margin-top: 1rem;
    }
}


/* DARK MODE SETTINGS */
:root[data-theme=dark] {
    --bg-color: #080808;
    --mg-color: #222222;
    --fg-color: #3a3a3a;
    --pesterlog-border-color: #a1a1a1;

    body {
        color: white;
    }

    a {
        color: rgb(131, 189, 255);

        :visited {
            color: rgb(193, 129, 230);
        }
    }

    dialog#settings_modal {
        background-color: var(--fg-color);
        border-color: white;
        color: white;
    }
}

/* Apply dark mode styling if it's needed can't be applied via JS */
@media (scripting: none) and (prefers-color-scheme: dark) {
    :root {
        --bg-color: #080808;
        --mg-color: #222222;
        --fg-color: #3a3a3a;
        --pesterlog-border-color: #a1a1a1;

        body {
            color: white;
        }

        a {
            color: rgb(131, 189, 255);

            :visited {
                color: rgb(193, 129, 230);
            }
        }

        dialog#settings_modal {
            background-color: var(--fg-color);
            border-color: white;
            color: white;
        }
    }
}