:root {
    --accent: teal;

    --bg: white;
    --fg: black;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #222;
        --fg: #EEE;
        color-scheme: dark;
    }

    img.ico {
        filter: invert(1);
    }
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.unset {
    all: unset;
}

body {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    width: 100dvw;
    overflow: clip;

    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

header {  
    flex: 0 0;
    background-color: color-mix(in srgb, var(--bg) 25%, var(--accent));
    padding: 5px 30px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;

    & h1 {
        font-size: 1.3em;
    }
}

.scrollbox {
    width: 100%;
    flex: 1 1;
    overflow: scroll;
}

main {
    min-height: calc(100dvh - 1.3em - 20px);
    padding: 15px 30px;
}

footer {
    background-color: color-mix(in srgb, var(--bg) 75%, var(--fg));
    width: 100%;

    & ul {
        display: flex;
        justify-content: center;
        align-items: center;
        list-style: none;

        & li {
            font-size: 0.9em;
        }

        & li:not(:last-child)::after {
            content: "•";
            margin-inline: 10px;
        }
    }
}

.searchForm {
    display: flex;
    justify-content: center;
    align-items: center;

    background-color: var(--bg);
    border-radius: 5px;
    padding-inline: 5px;

    gap: 5px;

    &>input {
        all:unset;
    }

    &>button {
        all:unset;
        height: 1.2em;
        aspect-ratio: 1;

        &>img {
            height: 1.2em;
            aspect-ratio: 1;
        }
    }
}