: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));
    }
}

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 a" auto
        "b c c" auto
        "d d d" auto / 25% 25% 25%;
}

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

a {
    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;
}

header {
    grid-area: a;
}

sidebar {
    grid-area: b;
}

content {
    grid-area: c;
}

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