:root { 
    color-scheme: dark light; 
}

:root {
    --color-bg: #060606;
    --color-text: #fff;
    --color-link: var(--color-text);
    --touch-target: 48px;
    --half-touch-target: calc(var(--touch-target) / 2);
}

header,
header:hover {
    transition-duration: 300ms;
}

header {
    border-block-end: 1px solid var(--color-text);
}

header:hover {
    background-color: rgba(6, 6, 6, 0.75);
    border-block-end: 1px solid var(--color-bg);
}

nav,
footer {
    height: max(10dvh, var(--touch-target));
}

nav,
footer,
main {
    padding-inline: var(--half-touch-target);
}

main {
    height: 90dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

footer {
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
}

h2 {
    font-size: max(1.5rem, min(4.5dvw, 2.5rem));
}

img[src="media/logo@64.png"] {
    height: 80%;
    object-fit: cover;
}

nav li {
    font-size: 120%;
}

@media (min-width: 768px) {
    nav,
    footer,
    main {
        padding-inline: var(--touch-target);
    }

    footer {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    small[right] ul {
        /* small[rightcenter ul { */
        display: flex;
    }

    small[right] li+li {
        /* small[rightcenter li+li { */
        margin-inline-start: var(--half-touch-target);
    }
}