.power-switch{--color-invert: #ffffff;--width: 150px;--height: 150px;position:relative;display:flex;justify-content:center;align-items:center;width:var(--width);height:var(--height)}.power-switch .button{width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative}.power-switch .button:after{content:"";width:100%;height:100%;position:absolute;background:radial-gradient(circle closest-side,var(--color-invert),transparent);filter:blur(20px);opacity:0;transition:opacity 1s ease,transform 1s ease;transform:perspective(1px) translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden}.power-switch .button .power-on,.power-switch .button .power-off{height:100%;width:100%;position:absolute;z-index:1;fill:none;stroke:var(--color-invert);stroke-width:8px;stroke-linecap:round;stroke-linejoin:round}.power-switch .button .power-on .line,.power-switch .button .power-off .line{opacity:.2}.power-switch .button .power-on .circle,.power-switch .button .power-off .circle{opacity:.2;transform:rotate(-58deg);transform-origin:center 80px;stroke-dasharray:220;stroke-dashoffset:40}.power-switch .button .power-on{filter:drop-shadow(0px 0px 6px rgba(255,255,255,.8))}.power-switch .button .power-on .line{opacity:0;transition:opacity .3s ease 1s}.power-switch .button .power-on .circle{opacity:1;stroke-dashoffset:220;transition:transform 0s ease,stroke-dashoffset 1s ease 0s}.power-switch input{position:absolute;height:100%;width:100%;z-index:2;cursor:pointer;opacity:0}.power-switch input:checked+.button:after{opacity:.15;transform:scale(2) perspective(1px) translateZ(0);-webkit-backface-visibility:hidden;backface-visibility:hidden;transition:opacity .5s ease,transform .5s ease}.power-switch input:checked+.button .power-on,.power-switch input:checked+.button .power-off{-webkit-animation:click-animation .3s ease forwards;animation:click-animation .3s ease forwards;transform:scale(1)}.power-switch input:checked+.button .power-on .line,.power-switch input:checked+.button .power-off .line{-webkit-animation:line-animation .8s ease-in forwards;animation:line-animation .8s ease-in forwards}.power-switch input:checked+.button .power-on .circle,.power-switch input:checked+.button .power-off .circle{transform:rotate(302deg)}.power-switch input:checked+.button .power-on .line{opacity:1;transition:opacity .05s ease-in .55s}.power-switch input:checked+.button .power-on .circle{transform:rotate(302deg);stroke-dashoffset:40;transition:transform .4s ease .2s,stroke-dashoffset .4s ease .2s}@-webkit-keyframes line-animation{0%{transform:translateY(0)}10%{transform:translateY(10px)}40%{transform:translateY(-25px)}60%{transform:translateY(-25px)}85%{transform:translateY(10px)}to{transform:translateY(0)}}@keyframes line-animation{0%{transform:translateY(0)}10%{transform:translateY(10px)}40%{transform:translateY(-25px)}60%{transform:translateY(-25px)}85%{transform:translateY(10px)}to{transform:translateY(0)}}@-webkit-keyframes click-animation{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}@keyframes click-animation{0%{transform:scale(1)}50%{transform:scale(.9)}to{transform:scale(1)}}body{background:#1b1a23;height:100vh;font:400 16px Poppins,sans-serif;display:flex;flex-direction:column;justify-content:center;align-items:center}body .socials{position:fixed;display:block;left:20px;bottom:20px}body .socials>a{display:block;width:30px;opacity:.2;transform:scale(var(--scale, .8));transition:transform .3s cubic-bezier(.38,-.12,.24,1.91)}body .socials>a:hover{--scale: 1}.wallpaper{position:absolute;width:100%;height:100%;top:0;left:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:opacity 3s;z-index:-999999}.fade-out{opacity:0}.fade-in{opacity:1}