:root {
    --color-bg: #292B30;
    --color-fg: #DDDDDD;
    --color-accent: #33353B;
    --ff-main: "JetBrains Mono";

    font-family: var(--ff-main);
}

html {
    width: 100vw;
    height: 100vh;
}

body {
    width: 100%;
    height: 100%;

    margin: 0;

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

input, button {
    background-color: var(--color-accent);
    color: var(--color-fg);
}

#body {
    display: flex;
    position: fixed;
    height: 100%;
}

#grid-header {
    display: flex;
    position: relative;
    z-index: 100;

    justify-content: space-between;
    align-items: center;

    padding: 1em;
    background-color: var(--color-bg);

    border-bottom: 2px solid #000;

    #grid-logo {
        height: 4em;
        content: url("https://files.wediaklup.de/logos/kreditinstitut.svg");
    }

    #login-form {
    }
}

#grid-sidebar {
    width: 10vw;
    height: 100%;

    z-index: 100;

    flex-shrink: 0;

    padding-top: 1em;
    box-sizing: border-box;

    box-shadow: 2px 0 10px #080808;

    a {
        display: block;
        color: var(--color-fg);
        text-decoration: none;
        margin-bottom: 1em;
        padding-block: 1em;
        padding-inline: 1em;
    }

    a:hover {
        background-color: var(--color-accent);
    }
}

#grid-content {
    --left-padding: 2em;

    position: relative;
    z-index: -10;

    padding-left: var(--left-padding);

    #content-header {
        position: relative;
        left: calc(-1 * var(--left-padding));

        width: 100%;

        margin-bottom: var(--left-padding);
        padding-left: var(--left-padding);
        padding-block: 0.5em;

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

        box-shadow: 4px 2px 10px #080808;

        h1 { margin: 0; }
    }
}

table.credit-form {
    th {
        text-align: left;
    }

    input {
        font-size: 3em;
        text-align: center;
        width: 1em;
    }

    input {
        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
        appearance: textfield;
        -moz-appearance: textfield;
    }
}

@media (max-width: 1000px) {
    #grid-logo {
        content: url("https://files.wediaklup.de/logos/lesser-kreditinstitut.svg");
    }
}