:root {
    --color-background: white;
    --color-background-mute: hsl(0, 0%, 90%);
    --color-background-mute2: hsl(0, 0%, 80%);
    --color-footer: hsl(0, 0%, 15%, 90%);
    --color-border: rgba(60, 60, 60, 0.2);
    --color-border-accent: hsla(45, 50%, 40%, 0.92);
    --color-accent: hsl(45, 100%, 31%);
    --color-text: black;

    background-image: linear-gradient(var(--color-footer)),
        url("/images/site-background.png");
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-background: hsl(0, 0%, 15%);
        --color-background-mute: hsl(0, 0%, 30%);
        --color-background-mute2: hsl(0, 0%, 40%);
        --color-footer: hsl(0, 0%, 5%, 90%);
        --color-border: rgba(195, 195, 195, 0.2);
        --color-accent: hsl(45, 80%, 46%);
        --color-text: hsl(0, 0%, 90%);
    }
}

body {
    margin: 0 auto;
    color: var(--color-text);
    background-color: var(--color-background);
    font-family:
        'Segoe UI',
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        'Fira Sans',
        'Droid Sans',
        'Helvetica Neue',
        sans-serif;
}

header#header {
    border-bottom: 1px solid var(--color-border);
    width: 100%;
}

#logo {
    display: flex;
    place-items: center;
    margin: auto;
    max-width: 1280px;
    text-decoration: none;
}

main {
    max-width: 1080px;
    padding: 0 2em;
    margin: auto;
}

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

a:hover {
    text-decoration: underline;
}

a.plainlink {
    color: inherit;
    text-decoration: underline;
}

a.button {
    padding: 0.5em;
    border: 1px solid var(--color-border);
}

a.button:hover {
    text-decoration: none;
    border-color: var(--color-border-accent);
}

.tag {
    background-color: var(--color-background-mute);
    color: var(--color-text);
    padding: 0.1em 0.5em;
    margin-right: 0.5em;
    cursor: default;
}

.tag:hover {
    background-color: var(--color-background-mute2);
}

#image-preview {
    z-index: 1;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(0, 0%, 0%, 0.7);
    cursor: zoom-out;
}

#image-preview img {
    position: fixed;
    top: 50%;
    left: 50%;
    max-width: 90%;
    max-height: 90%;
    transform: translate(-50%, -50%);
    animation: fadein 0.25s;
}

@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}