.thumbnails-div {
    --nails-display: flex;
    display: var(--nails-display); /* Thumbnails start as showing */
}

header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

header img {
    height: 4em;
}

main .nav-line {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

footer nav {
    font-size: larger;
}

@media screen and (max-width: 800px) {
    header {
        margin-bottom: clamp(0.2em, 0.2em + 2.5 * (800px - 100vw), 3.9em)
    }

    header img {
        position: absolute;
        bottom: clamp(-3.5em, -2.5 * (800px - 100vw), 0.2em);
        width: min(9.6em + 0.85 * (800px - 100vw), 55%);
    }

    header img.left {
        left: -1em;
    }

    header img.right {
        right: -1em;
    }

    main .nav-line a.nav-button {
        font-size: max(1em, 1.2em - 0.05 * (800px - 100vw));
        margin: 0 max(0.1em, 0.5em - 0.05 * (800px - 100vw));
    }

    main .nav-line button {
        margin: auto max(0.1em, 1em - 0.05 * (800px - 100vw));
    }
}

@media screen and (max-width: 570px) {
    main .nav-line .random-button {
        display: block;
        height: 3em;
        text-align: center;
    }

    main .nav-line a.random-button svg.ui {
        margin-bottom: -0.3em;
        max-height: 2em;
    }

}

@media screen and (max-width: 500px) {
    main .nav-line .home-button {
        display: block;
        height: 3em;
        text-align: center;
    }

    main .nav-line .home-button svg.ui {
        margin-bottom: -0.3em;
        max-height: 2em;
    }

    main .nav-line a.home-button span.button-text {
        font-size: inherit;
        position: static;
    }
}