@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/montserrat/Montserrat-VariableFont_wght.ttf) format('woff2');
}

@font-face {
    font-family: 'Montserrat';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(/static/montserrat/Montserrat-Italic-VariableFont_wght.ttf) format('woff2');
}

html {
    background-color: #121212;
    background-image: url(/static/img/background.svg);
    color: #999999;
    font-family: 'Montserrat', sans-serif;
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    height: 100%;
}

header {
    color: #ababab;
    display: flex;
    flex-direction: row;
    width: 100%;

    h1 {
        background-color: #222222;
        letter-spacing: 0.15ch;
        margin: 0;
        padding: 0.25em;
        min-height: 3rem;
        display: flex;
        align-items: center;
        width: 100%;
        box-sizing: border-box;
    }

    div {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-items: start;
    }

    img {
        background-color: #222222;
        padding: 1em;
        aspect-ratio: 1/1;
        min-height: 100%;
        box-sizing: border-box;
    }

    svg {
        height: 3em;
        aspect-ratio: 1 / 1;
    }
}

main {
    flex-grow: 1;
}

@media (max-width: 400px) {
    html {
        font-size: 0.7em;
    }
}

@media (min-width: 3000px) {
    html {
        font-size: 2em;
    }
}

button,
input,
textarea {
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background-color: inherit;
}

button {
    border: 2px outset #666;
}

input,
textarea,
button:active {
    border: 2px inset #666;
}

textarea {
    height: 30em;
}

input[type=time] {
    width: fit-content;
}

h2 {
    margin: 0;
    padding: 0 0 0.5em 0;
    text-align: end;
}

a {
    color: #666666;
    font-style: italic;
    cursor: not-allowed;
}

a[href] {
    color: #ababab;
    font-style: normal;
    text-decoration: 1px underline dotted;
    cursor: pointer;
}

.struct-centered {
    max-width: 40em;
    margin: 2em auto;
}

.struct-big {
    margin: 2em;
}

.struct-flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    margin: 2em;
    gap: 2em;
    justify-content: center;

    >* {
        flex-basis: 0;
        flex-grow: 0;
        flex-shrink: 0;
    }
}

.struct-raised {
    background-color: #222222;
    padding: 0 2em;
}

.struct-left::before {
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    left: -2em;
    top: 0;
    border-left: 1em solid transparent;
    border-top: 1em solid transparent;
    border-right: 1em solid #222222;
    border-bottom: 1em solid #222222;
}

.struct-left {
    position: relative;
    display: block;
    height: 2em;
    margin-left: 2em;
    background-color: #222222;
}

.struct-right::before {
    position: absolute;
    content: "";
    height: 0;
    width: 0;
    right: -2em;
    top: 0;
    border-left: 1em solid #222222;
    border-top: 1em solid #222222;
    border-right: 1em solid transparent;
    border-bottom: 1em solid transparent;
}

.struct-right {
    position: relative;
    display: block;
    height: 2em;
    margin-right: 2em;
    background-color: #222222;
}

form {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.5em;
    width: 95%;

    label {
        text-align: end;
        font-size: inherit;
    }

    button[type=submit],
    textarea {
        grid-column: 1 / span 2;
    }
}