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