/* From Uiverse.io by RiccardoRapelli */
.sj-theme.switch {position:relative;display:inline-block;width:60px;height:34px}
.sj-theme.switch #theme-toggle {opacity:0;width:0;height:0}
.sj-theme .slider {position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#2196f3;-webkit-transition:.4s;transition:.4s;z-index:0;overflow:hidden}
.sj-theme .sun-moon {position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:yellow;-webkit-transition:.4s;transition:.4s}
.sj-theme #theme-toggle:checked + .slider {background-color:black}
.sj-theme #theme-toggle:focus + .slider {box-shadow:0 0 1px #2196f3}
.sj-theme #theme-toggle:checked + .slider .sun-moon {-webkit-transform:translateX(26px);-ms-transform:translateX(26px);transform:translateX(26px);background-color:white;-webkit-animation:rotate-center .6s ease-in-out both;animation:rotate-center .6s ease-in-out both}
.sj-theme .moon-dot {opacity:0;transition:.4s;fill:gray}
.sj-theme #theme-toggle:checked + .slider .sun-moon .moon-dot {opacity:1}
.sj-theme .slider.round {border-radius:34px}
.sj-theme .slider.round .sun-moon {border-radius:50%}
.sj-theme #moon-dot-1 {left:10px;top:3px;position:absolute;width:6px;height:6px;z-index:4}
.sj-theme #moon-dot-2 {left:2px;top:10px;position:absolute;width:10px;height:10px;z-index:4}
.sj-theme #moon-dot-3 {left:16px;top:18px;position:absolute;width:3px;height:3px;z-index:4}
.sj-theme #light-ray-1 {left:-8px;top:-8px;position:absolute;width:43px;height:43px;z-index:-1;fill:white;opacity:10%}
.sj-theme #light-ray-2 {left:-50%;top:-50%;position:absolute;width:55px;height:55px;z-index:-1;fill:white;opacity:10%}
.sj-theme #light-ray-3 {left:-18px;top:-18px;position:absolute;width:60px;height:60px;z-index:-1;fill:white;opacity:10%}
.sj-theme .cloud-light {position:absolute;fill:#eee;animation-name:cloud-move;animation-duration:6s;animation-iteration-count:infinite}
.sj-theme .cloud-dark {position:absolute;fill:#ccc;animation-name:cloud-move;animation-duration:6s;animation-iteration-count:infinite;animation-delay:1s}
.sj-theme #cloud-1 {left:30px;top:15px;width:40px}
.sj-theme #cloud-2 {left:44px;top:10px;width:20px}
.sj-theme #cloud-3 {left:18px;top:24px;width:30px}
.sj-theme #cloud-4 {left:36px;top:18px;width:40px}
.sj-theme #cloud-5 {left:48px;top:14px;width:20px}
.sj-theme #cloud-6 {left:22px;top:26px;width:30px}
@keyframes cloud-move {
0% {transform:translateX(0px)}
40% {transform:translateX(4px)}
80% {transform:translateX(-4px)}
100% {transform:translateX(0px)}
}
.sj-theme .stars {transform:translateY(-32px);opacity:0;transition:.4s}
.sj-theme .star {fill:white;position:absolute;-webkit-transition:.4s;transition:.4s;animation-name:star-twinkle;animation-duration:2s;animation-iteration-count:infinite}
.sj-theme #theme-toggle:checked + .slider .stars {-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1}
.sj-theme #star-1 {width:20px;top:2px;left:3px;animation-delay:.3s}
.sj-theme #star-2 {width:6px;top:16px;left:3px}
.sj-theme #star-3 {width:12px;top:20px;left:10px;animation-delay:.6s}
.sj-theme #star-4 {width:18px;top:0px;left:18px;animation-delay:1.3s}
@keyframes star-twinkle {
0% {transform:scale(1)}
40% {transform:scale(1.2)}
80% {transform:scale(.8)}
100% {transform:scale(1)}
}

.sj-theme{flex:none;direction:ltr;vertical-align:middle}
.sj-theme #theme-toggle:focus-visible + .slider{outline:3px solid var(--sj-text);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.sj-theme *, .sj-theme *::before{animation:none!important;transition:none!important}}