header {
    margin-top: env(safe-area-inset-top);
}

@media (min-width: 1100px) {
    :root {
        --max-post-width: 38rem;
    }
}

footer {
    margin-bottom: env(safe-area-inset-bottom);
}

main:not(:has(footer)) {
    margin-bottom: env(safe-area-inset-bottom);
}

@media only screen and (max-width: 767px) {
    nav {
        justify-content: space-between;
    }
    header,
    footer {
        padding-left: var(--space-sm);
        padding-right: var(--space-sm);
    }
    .header-actions {
        gap: var(--space-xs);
    }
    footer > div {
        justify-content: flex-start;
    }
    .post, .posts-list {
        max-width: unset;
        width: 100% !important;
    }
}


@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]):not([data-theme="dark"]) {
        --bg: var(--dark-mode-bg);
        --color: var(--dark-mode-color);
        --theme-color: #5ebfff;
        --alert-color: orange;
        --post-bg: #1b1b1c;
        --post-border: rgba(255, 255, 255, .3);
        --normal-button-active-color: var(--post-border);
        --album-bg: var(--post-border);
        --album-bubbles: var(--color);
        --dialog-backdrop: rgba(0, 0, 0, .6);
        color-scheme: dark;
    }

    :root:not([data-theme="light"]):not([data-theme="dark"]) .doodle,
    :root:not([data-theme="light"]):not([data-theme="dark"]) .icon-button {
        filter: invert(.9);
    }
}

:root[data-theme="dark"] {
    --bg: var(--dark-mode-bg);
    --color: var(--dark-mode-color);
    --theme-color: #5ebfff;
    --alert-color: orange;
    --post-bg: #1b1b1c;
    --post-border: rgba(255, 255, 255, .3);
    --normal-button-active-color: var(--post-border);
    --album-bg: var(--post-border);
    --album-bubbles: var(--color);
    --dialog-backdrop: rgba(0, 0, 0, .6);
    color-scheme: dark;
}

:root[data-theme="dark"] .doodle,
:root[data-theme="dark"] .icon-button {
    filter: invert(.9);
}

:root[data-theme="light"] {
    --bg: white;
    --color: black;
    --theme-color: #076ad3;
    --alert-color: rgb(208, 92, 14);
    --post-bg: white;
    --post-border: lightgray;
    --normal-button-active-color: lightgray;
    --album-bg: var(--dark-mode-bg);
    --album-bubbles: var(--post-border);
    --dialog-backdrop: rgba(255, 255, 255, 0.7);
    color-scheme: light;
}

:root[data-theme="light"] .doodle,
:root[data-theme="light"] .icon-button {
    filter: none;
}