/* Copyright (C) 2025 Samuel Fiedler */

/* styles */
html {
    height: 100%;
}

body {
    color: var(--textColor);
    background-color: var(--bgColor);
    display: grid;
    grid-template-columns: var(--gridColumns);
    height: var(--bodyHeight);
    margin: 0px;
    padding: 0.5em var(--bodyLeftRightPadding);

    & > * {
        background-color: var(--overlayColor);
        border: 1px solid var(--borderColor);
        border-radius: 0.5em;
        height: var(--partHeight);
        margin: 0.5em;
        padding: 1em;
        overflow: scroll;
    }
}

a {
    color: var(--linkBaseColor);

    &:hover {
        color: var(--linkHoverColor);
    }
}

blockquote {
    background-color: var(--specialBgColor);
    margin: 0px;
    padding: 0.5em;
    padding-left: 2.5em;
    border-left: 0.5em solid var(--quoteBorderColor);
}

pre {
    background-color: var(--specialBgColor);
    padding: 0.5em;
    font-size: 1em;
}

p {
    margin: 0px;
    padding: 0px;
    min-height: 1em;
}

h1, h2, h3, blockquote, pre, ul {
    margin: 0.25em 0em;
}

/* media queries */
@media print {
    :root {
        --textColor: #000000 !important;
        --bgColor: #ffffff !important;
        --borderColor: #ffffff !important;
        --bodyLeftRightPadding: 0px;
        --gridColumns: 1fr;
        --partHeight: auto;
        --bodyHeight: auto;
    }

    nav {
        display: none !important;
    }
}

@media screen and (min-width: 100em) {
    :root {
        --bodyLeftRightPadding: 16%;
        --gridColumns: 1fr 3fr;
        --partHeight: calc(100% - 2em - 2px);
        --bodyHeight: calc(100% - 2em);
    }
}

@media screen and (min-width: 80em) and (max-width: 100em) {
    :root {
        --bodyLeftRightPadding: 0.5em;
        --gridColumns: 1fr 3fr;
        --partHeight: calc(100% - 2em - 2px);
        --bodyHeight: calc(100% - 2em);
    }
}

@media screen and (max-width: 80em) {
    :root {
        --bodyLeftRightPadding: 0.5em;
        --gridColumns: 1fr;
        --partHeight: auto;
        --bodyHeight: auto;
    }
}

@media all and (prefers-color-scheme: light) {
    :root {
        --textColor: #000000;
        --bgColor: #ffffff;
        --borderColor: #8888aa;
        --linkBaseColor: #0000ff;
        --linkHoverColor: #0088ff;
        --overlayColor: #ddddff88;
        --specialBgColor: #bbbbdddd;
        --quoteBorderColor: #7777aa;
    }
}

@media all and (prefers-color-scheme: dark) {
    :root {
        --textColor: #ffffff;
        --bgColor: #000000;
        --borderColor: #77779988;
        --linkBaseColor: #ffdd00;
        --linkHoverColor: #ff8800;
        --overlayColor: #22224488;
        --specialBgColor: #444466;
        --quoteBorderColor: #7777aa;
    }
}