html {
    --sidebar-width: 200px;
    --font-size-base: 18px;
    font-size: var(--font-size-base);
}

.grid {
    min-height: 100vh;
    display: grid;
    grid-template-rows: minmax(max(102px, 19vh), min(19vh, 200px)) 1fr 125px;
    grid-template-columns: calc(var(--sidebar-width) + 30px) 1fr;
    grid-template-areas: "head head" "nav main" ". foot";
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    line-height: 1.5em;
}

.bordered {
    padding: 15px 45px;
    background-color: oklch(0.2782 0.094667 142.4953 / 0.75);
    backdrop-filter: blur(10px);
    border: 10px ridge rgb(148, 183, 148);
}

.fullwidth {
    width: 100%
}

.textblock {
    p {
        text-align: justify;
    }

    p+p {
        margin-top: 0.5em;
    }
}

p,
li,
br,
hr {
    font-family: "Times New Roman", Times, serif;
}

a:link {
    color: oklch(0.8739 0.094667 142.4953);
}

a:visited {
    color: oklch(0.8739 0.094667 200.3);
}

a:active {
    color: oklch(0.7107 0.094667 142.4953);
}

li {
    margin-left: 4ch;
}

h1 {
    font-size: calc(var(--font-size-base) * 1.618 * 1.618);
}

h2 {
    font-size: calc(var(--font-size-base) * 1.618);
}

hr {
    margin-block: 1em;
}

h1,
h2 {
    font-family: "Comic Sans MS", Arial, sans-serif;
}

body {
    background-color: black;
    color: white;
    background-image: url("/images/background1.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/*@media screen and not (prefers-reduced-motion) {
    body {
        background-attachment: fixed;
        background-image: url("/images/gridscan.gif");
        background-size: 64px;
    }
}*/

div.background {
    position: fixed;
    width: 125%;
    height: 125%;
    left: 12.5%;
    top: 0px;
    background-image: url("/images/grassblock.png");
    background-position: 50% 15%;
    background-size: 100%;
    point-events: none;
}

.header {
    width: max-content;
    margin-bottom: 10px;
    margin-left: 20px;
    margin-right: calc(var(--sidebar-width) / 2);
    white-space: nowrap;
}

.header .header-image {
    height: 100%;
    max-height: 150px;
    vertical-align: top;
    aspect-ratio: 1;
    margin-right: 1em;
}

.header span {
    font-size: calc(var(--font-size-base) * 1.618 * 1.618);
    font-family: "Comic Sans MS", Arial, sans-serif;
    vertical-align: bottom;
}

.footer {
    width: fit-content;
    margin: auto 0px 0px auto;
}

main {
    margin-right: calc(var(--sidebar-width) / 2);
    min-width: 320px;
    max-width: 125ch;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    gap: 10px;
}

main>article.secret-article {
    margin-top: 1000px;
}

@media screen and (max-width: 720px) {
    @media screen and (max-height: 300px) {
        .bordered {
            border-width: 5px;
        }
    }

    h1 {
        font-size: 30px;
    }

    h2 {
        font-size: 30px;
    }

    p,
    br {
        font-size: 18px;
    }

    main {
        margin-left: 20px;
        margin-right: 20px;
    }

    .header {
        height: fit-content;
        margin-right: 20px;
    }

    .header .header-image {
        height: 50px;
        min-height: unset;
    }

    .grid {
        grid-template-rows: minmax(102px, calc(19vh)) min-content 1fr 125px;
        grid-template-columns: 1fr;
        grid-template-areas: "head" "nav" "main" "foot";
    }
}