@font-face {
    font-family: "main";
    src: url("hack-regular-subset.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "main";
    src: url("hack-italic-subset.woff2") format("woff2");
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "main";
    src: url("hack-bold-subset.woff2") format("woff2");
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "main";
    src: url("hack-bolditalic-subset.woff2") format("woff2");
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@media (prefers-color-scheme: dark)
{
    :root
    {
        --color-bg: black;
        --color-fg: white;
        --color-fg-muted: #999;
        --color-accent: yellow;
    }
}

@media (prefers-color-scheme: light)
{
    :root
    {
        --color-bg: white;
        --color-fg: black;
        --color-fg-muted: #444;
        --color-accent: blue;
    }
}

:root
{
    --space1: 0.5rem;
    --space2: 1rem;
    --space4: 2rem;
}

*
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html
{
    background-color: var(--color-bg);
}

body
{
    color: var(--color-fg);
    max-width: 1024px;
    font-family: "main", system-ui, sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    margin: var(--space2) auto;
}

a
{
    color: var(--color-accent);
    text-decoration: underline;
}

a:focus,
a:active
{
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

ol,
ul
{
    list-style: none;
    list-style-position: inside;
    display: flex;
    gap: var(--space2);
    flex-wrap: wrap;
}

table
{
    border-collapse: collapse;
    border-spacing: 0;
}

b,
strong
{
    font-weight: bold;
}

i,
em
{
    font-style: italic;
}

img
{
    vertical-align: middle;
}

h1
{
    font-size: 2rem;
    font-weight: bold;
}

h2
{
    font-size: 1.5rem;
    font-weight: bold;
}

h3
{
    font-size: 1.2rem;
    font-weight: bold;
}

header,
section,
footer
{
    padding: var(--space4);
}

header p
{
    color: var(--color-fg-muted);
}

nav
{
    display: flex;
    padding: 0 var(--space4);
    gap: var(--space2);
}

main
{
    display: grid;
}

section
{
    display: grid;
    gap: var(--space2);
}

section > *:not(h2)
{
    padding-left: var(--space4);
}

figure
{
    border-radius: 0.2rem;
    background: var(--color-fg);
    color: var(--color-bg);
    padding: var(--space1);
    line-height: 1;
}

figcaption
{
    padding-top: var(--space1);
}

figure img
{
    width: 100%;
}

.pics-list
{
    display: grid;
    gap: var(--space2);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.pic
{
    transition: transform .2s;
}

.pic:hover
{
    transform: translateY(-0.4rem);
}

.pic a
{
    text-decoration: none;
}

.toys
{
    display: grid;
    gap: var(--space4);
}

.toys .links
{
    line-height: 2;
}

.tags
{
    list-style: none;
    gap: var(--space1);
    color: var(--color-fg-muted);
}

.tag
{
    background-color: var(--color-fg);
    color: var(--color-bg);
    border-radius: 0.2rem;
    font-size: 0.9rem;
    padding: 0.2rem var(--space2);
}