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 {
    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%); */
}