body {
    > :is(header, footer) {
        background-color: #232323;
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
        display: flex;
        align-items: center;
        gap: 1rem;
        height: 55px;
        padding: 0 1rem;

        &:empty {
            display: none;
        }
    }    

    > header {
        top: 0;
        border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    }

    > footer {
        bottom: 0;
        border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
    }

    > main {
        position: relative;
        max-width: 512px;
        margin: auto;
        padding: calc(1rem + 55px) 1rem;
    }

    &:has(> header:empty) > main {
        padding-top: 1rem;
    }

    &:has(> footer:empty) > main {
        padding-bottom: 1rem;
    }
}

a {
    text-decoration: none;
}

h1 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
}

input {
    color: var(--bs-body-color);
}

label.required::after {
    color: var(--bs-danger);
    content: " *";
}

svg {
    cursor: pointer;
}

.error {
    color: var(--bs-danger);
    margin: .25rem 0;
}

::placeholder {
    user-select: none;
}

::selection {
    background: var(--bs-primary);
    color: var(--bs-body-bg);
}

::-webkit-calendar-picker-indicator {
    display: none;
}

::-webkit-scrollbar {
    width: 0;
}