body {
    opacity: 0;
    transition: opacity .5s, background-color .5s;
}

body.ready {
    /* FOUC fix */
    opacity: 1;
}

@media (prefers-color-scheme: dark) {
    /* FOUC fix */
    body:not(.ready) {
        background-color: black;
    }
}

#dark-mode-toggle {
    position: absolute;
    top: calc(var(--bs-gutter-x) * -1);
    transform: translateY(-50%);
    right: calc(var(--bs-gutter-x) * .5);
    z-index: 2;
    --dark-mode-toggle-light-icon: url('img/fa-sun.svg');
    --dark-mode-toggle-dark-icon: url('img/fa-moon.svg');
    --dark-mode-toggle-system-icon: url('img/fa-yin-yang.svg');
    /* reverse the icons to indicate auto state instead */
    /* --dark-mode-toggle-remember-icon-checked: url('img/unchecked.svg'); */
    /* --dark-mode-toggle-remember-icon-unchecked: url('img/checked.svg'); */
    /* --dark-mode-toggle-remember-filter: invert(100%); */
}

#dark-mode-toggle::part(permanentLabel) {
    text-transform: capitalize;
}

.py-6 {
    padding-top: 4rem !important;
    padding-bottom: 4rem !important;
}

.full-height-minus-padding {
    min-height: calc(100vh - 4em * 2);
}