*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --h-size: 80ch;
    --spacing: 0.5rem;
    --animation-duration: 200ms;
}

body {
    max-width: calc(var(--h-size) + 2 * var(--spacing));
    margin: 1rem auto;
    padding-inline: var(--spacing);
    font-family: Helvetica, system-ui, sans-serif;
    line-height: 1.5;
}

#header, #footer {
    background-image: url('/static/cjd.jpg');
    background-repeat: no-repeat;
    background-size: contain;
    padding: .5em;
}

#header {
    background-position: left;
    text-align: left;
    padding-left: 5em;
}

#footer {
    background-position: right;
    text-align: right;
    padding-right: 5em;
}

gal-lery {
    --_thumb-width: 5rem;

    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--_thumb-width), 1fr));
    gap: var(--spacing);
    padding: var(--spacing);
    align-items: center;

    img {
        width: 100%;
        box-shadow: 7px 8px 20px 1px #aaaaaa;
        border: 1px solid black;
    }

    @media (prefers-reduced-motion: no-preference), (hover: hover) {
        a {
            position: relative;
            transition: scale var(--animation-duration) ease;

            &:hover {
                scale: 2.5;
                z-index: 1;
            }
        }
    }
}

.link {
    text-decoration: none;
}

.link:hover {
    text-decoration: underline;
}

textarea {
    width: 100%;
}

#item {
  border: 1px solid black;
}

#item img {
    max-width: 100%;
}