:root {
    --fontsize: 14pt;
    --footersize: calc(var(--fontsize)*0.8);
    
    --dark-col: rgb(39, 33, 80);
    --light-col: rgb(248, 242, 209);
    --element-bg: rgba(163, 134, 180, 20%);

    --bgcol: var(--dark-col);
    --fgcol: var(--light-col);
    --linkcol: hsl(from var(--fgcol) h s calc(l - 30));

    @media (prefers-color-scheme: light) {
        --bgcol: var(--light-col);
        --fgcol: var(--dark-col);
        --linkcol: hsl(from var(--fgcol) h s calc(l + 30));
    }

    @media (width <= 800px) {
        --fontsize: 3vw;
    }
}

body {
    background-color: var(--bgcol);
    color: var(--fgcol);

    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: var(--fontsize);

    display: grid;
    justify-content: center;
    min-width: 80%;    
    grid-template:
            "a a" auto
            "b c" auto
            "d c" auto
            "e c" auto / 20% 60%;

    @media (width <= 800px) {
        grid-template:
            "a" auto
            "b" auto
            "c" auto
            "d" auto / 95%;
    }
}

.section {
    border: 2px solid var(--fgcol);
    background-color: var(--element-bg);
    padding: 10px;
    border-radius: 10px;
    margin: 10px;
}

a:not(.x31) {
    color: var(--linkcol);
    background-color: rgb(from var(--element-bg) r g b / 20%);
    &:hover {
        background-color: rgb(from var(--element-bg) r g b / 30%);
    }
    border-radius: 0.2lh;
}

hr {
    border: 1px solid var(--fgcol);
}

header {
    grid-area: a;

    margin-left: 20px;
    margin-right: 20px;

    h1 {
        margin-bottom: 0px;
    }
}

nav {
    grid-area: b;
}

content {
    grid-area: c;
}

footer {
    padding: 0% 5%;
    grid-area: d;
    text-align: center;
    font-size: var(--footersize);
}

.x31-box {
    text-align: center;

    display: inline-flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    align-content: center;
    /* */
}

a.x31 {
    display: inline;
    img {
        vertical-align: bottom;
    }
}
img.x31 {
    margin: 2px;
}