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

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) {
    main, footer {
        text-align: center;
    }
    nav {
        justify-content: space-between;
    }
    main > div {
        text-align: left;
    }
    footer > div {
        justify-content: center;
    }
    .post, .posts-list {
        max-width: unset;
        width: 100% !important;
    }
}

@media only screen and (max-width: 500px) {
    .index-button::after {
        content: "";
    }
}

@media only screen and (max-width: 430px) {
    .new-post-button::after {
        content: " post"
    }
}

@media only screen and (max-width: 350px) {
    .new-post-button::after {
        content: ""
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --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);
    }

    .doodle, .icon-button {
        filter: invert(.9);
    }
}