.sun-and-moon> :is(.moon, .sun, .sun-beams) {
    transform-origin: center;
}
.sun-and-moon> :is(.moon, .sun) {
    fill: var(--bs-light);/*var(--icon-fill);*/
}
.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon> :is(.moon, .sun) {
    fill: var(--icon-fill-hover);
}
.theme-toggle:is(:hover, :focus-visible)>.sun-and-moon>.sun {
    fill: var(--bs-secondary);
}
.sun-and-moon>.sun-beams {
    stroke: var(--bs-light);/*var(--icon-fill);*/
    stroke-width: 2px;
}
.theme-toggle:is(:hover, :focus-visible) .sun-and-moon>.sun-beams {
    stroke: var(--bs-secondary);/*var(--icon-fill-hover);*/
}
[data-bs-theme="dark"] .sun-and-moon>.sun {
    transform: scale(1.75);
}
[data-bs-theme="dark"] .sun-and-moon>.sun-beams {
    opacity: 0;
}
[data-bs-theme="dark"] .sun-and-moon>.moon>circle {
    transform: translateX(-7px);
}

@supports (cx: 1) {
    [data-bs-theme="dark"] .sun-and-moon>.moon>circle {
        cx: 17;
        transform: translateX(0);
    }
}

@media (prefers-reduced-motion: no-preference) {
    .sun-and-moon>.sun {
        transition: transform .5s var(--ease-elastic-3);
    }
    .sun-and-moon>.sun-beams {
        transition: transform .5s var(--ease-elastic-4), opacity .5s var(--ease-3);
    }
    .sun-and-moon .moon>circle {
        transition: transform .25s var(--ease-out-5);
    }
    @supports (cx: 1) {
        .sun-and-moon .moon>circle {
            transition: cx .25s var(--ease-out-5);
        }
    }
    [data-bs-theme="dark"] .sun-and-moon>.sun {
        transition-timing-function: var(--ease-3);
        transition-duration: .25s;
        transform: scale(1.75);
    }
    [data-bs-theme="dark"] .sun-and-moon>.sun-beams {
        transition-duration: .15s;
        transform: rotateZ(-25deg);
    }
    [data-bs-theme="dark"] .sun-and-moon>.moon>circle {
        transition-duration: .5s;
        transition-delay: .25s;
    }

    /* Theme colors switch */
    [data-bs-theme="light"] body {
        color: var(--bs-dark) !important;
        background: var(--bs-gray-200) !important;
    }
    [data-bs-theme="light"] a {
        color: var(--bs-dark) !important;
    }
    [data-bs-theme="light"] .hide-light {
        display: none !important;
    }
    [data-bs-theme="light"] .bg-dark,
    [data-bs-theme="light"] .text-bg-dark {
        background-color: var(--bs-gray-200) !important;
    }
    [data-bs-theme="light"] .bg-black {
        background-color: var(--bs-white) !important;
    }
    [data-bs-theme="light"] .bg-header,
    [data-bs-theme="light"] .bg-footer {
        background-color: var(--bs-gray-300) !important;
    }
    [data-bs-theme="light"] .img-border-light {
        border-color: #D2D2D2 !important;
    }
    [data-bs-theme="light"] .bg-subfield {
        background-color: #F8F8F8 !important;
        border-color: #D2D2D2 !important;
    }
    [data-bs-theme="light"] .bg-secondary {
        background-color: var(--bs-card-cap-bg) !important;
    }
    [data-bs-theme="light"] .card-header {
        color: var(--bs-gray-700) !important;
    }
    [data-bs-theme="light"] .text-light,
    [data-bs-theme="light"] .text-secondary,
    [data-bs-theme="light"] .header-text-font,
    [data-bs-theme="light"] .color-subline,
    [data-bs-theme="light"] .sub-menu li,
    [data-bs-theme="light"] .offcanvas-body a,
    [data-bs-theme="light"] .social-icons-light {
        color: var(--bs-gray-700) !important;
    }
    [data-bs-theme="light"] .link-secondary {
        color: rgba(var(--bs-dark-rgb)) !important;
    }
    [data-bs-theme="light"] .color-title {
        color: var(--bs-gray-600) !important;
    }
    [data-bs-theme="light"] .header-text-font {
        color: var(--bs-gray-900) !important;
    }
    [data-bs-theme="light"] .border-secondary {
        border-color: var(--bs-gray-400) !important;
    }
    [data-bs-theme="light"] .carousel-control-next {
        background: var(--bs-gray-300);
    }
    [data-bs-theme="light"] #tag-cloud .tag-cloud-link {
        background: var(--bs-gray-400) !important;
        color: var(--bs-black) !important;
    }
}


/*
@media (prefers-color-scheme: light) {
    .bg-dark {
        background-color: var(--bs-tertiary-bg-light) !important;
    }
    .bg-black {
        color: var(--bs-primary-text-emphasis);
        background-color: var(--bs-secondary-bg-light) !important;
    }
    .bg-secondary {
        background-color: darkseagreen !important;
    }
}*/