html, body
{
    font-family: Helvetica, sans-serif;
    color: #313131;
    display: grid;
    margin: auto;
}

footer
{
    padding: 18px;
    font-size: small;
    text-align: center;
}

h1, h2, h3
{
    font-weight: normal;
}

a
{
    color: inherit;
}

hr
{
    width: 100%;
    border: 0;
    height: 1px;
    background: #313131;
}

.grid, .boxes
{
    display: grid;
    gap: 12px;
}

.grid
{
    max-width: 800px;
}

/* .boxes
{
    grid-template-columns: repeat(auto-fill, minmax(280px, auto));
} */

.box, .panel
{
    background-color: #F5F5F5;
    padding: 18px;

    img, iframe
    {
        padding: 12px 0;
        max-width: 100%
    };
}

.top
{
    display: grid;
    grid-template-columns: 1fr auto;
}

.navi
{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, auto));

}

.sticky
{
    position: sticky;
    top: 0;
    background-color: aquamarine;
}

.slider
{
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    font-size: xx-small;

    img
    {
        height: min(600px, max(60vh, 60vw));
        max-width: min(600px, 74vw);
        object-fit: cover;
        scroll-snap-align: center;
        aspect-ratio: 1/1;
    }

    img:active
    {
        object-fit: contain;
    }
}

.middle
{
    vertical-align: middle;
}

.hide, :not(:checked) + .enabled
{
    display: none !important;
}

.margin-after
{
    margin-bottom: 48px;
}