.theme-toggle-btn{--sun-color:#c8c8c8;--moon-color:#f61d2a;--ray-color:#c8c8c8;cursor:pointer;background:0 0;border:none;width:32px;height:32px;padding:0;transition:transform .3s cubic-bezier(.4,0,.2,1)}.theme-toggle-btn:hover{transform:scale(1.1)}.theme-icon{width:100%;height:100%;overflow:visible}.sun-wrapper{transform-origin:50%;transition:all .6s cubic-bezier(.4,0,.2,1)}.sun{fill:var(--sun-color);transform-origin:50%;transition:transform .6s cubic-bezier(.4,0,.2,1)}.sun-rays{transform-origin:50%;transition:transform .6s cubic-bezier(.4,0,.2,1)}.ray{fill:var(--ray-color);opacity:1;transition:opacity .3s cubic-bezier(.4,0,.2,1)}.moon-wrapper{opacity:0;transform-origin:50%;transition:all .6s cubic-bezier(.68,-.55,.27,1.55);transform:scale(.8)rotate(15deg)}.moon{fill:var(--moon-color);stroke:var(--moon-color);stroke-width:1.5px}.dark .sun-wrapper{opacity:0;pointer-events:none;transform:scale(.8)rotate(90deg)}.dark .sun{transform:scale(.6)}.dark .sun-rays{transform:rotate(45deg)scale(.8)}.dark .ray{opacity:0}.dark .moon-wrapper{opacity:1;transform:scale(1)rotate(20deg)}.theme-toggle-btn:hover .sun-wrapper{animation:8s linear infinite rotate}.theme-toggle-btn:hover .moon-wrapper{animation:2s ease-in-out infinite moonTilt}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes moonTilt{0%,to{transform:rotate(20deg)scale(1)}50%{transform:rotate(40deg)scale(1.05)}}