.switch-theme{--main-animation-length:.5s;--secondary-animation-length:.7s;width:32px;height:32px;position:relative}.moon-switch{transition:transform var(--main-animation-length)ease-in-out,color var(--main-animation-length)ease-in-out,opacity var(--main-animation-length)ease-in-out;opacity:0;position:absolute;top:8px;left:8px}.moon-switch.out{animation:moon-out var(--main-animation-length)ease-in-out;transform:scale(0)}.moon-switch.active{opacity:1;animation:moon var(--main-animation-length)ease-in-out}.sun-switch{transition:transform var(--main-animation-length)ease-in-out,opacity var(--main-animation-length)ease-in-out;opacity:0;position:absolute;top:8px;left:8px}.sun-switch.out{animation:sun-out var(--main-animation-length)ease-in-out}.sun-switch.active{opacity:1;animation:sun var(--main-animation-length)ease-in-out;-webkit-animation:sun var(--main-animation-length)ease-in-out}@keyframes sun-out{0%{transform:scale(1)}50%{transform:scale(.5)}to{transform:scale(0)}}@keyframes moon-out{0%{transform:rotate(0)scale(1)}50%{transform:rotate(-60deg)scale(.5)}to{transform:rotate(-60deg)scale(0)}}@keyframes moon{0%{transform:rotate(-60deg)}to{transform:rotate(0)}}@keyframes sun{0%{transform:rotate(60deg)}to{transform:rotate(0)}}