.switch,.circle{-webkit-transition:all 300ms linear;transition:all 300ms linear}.switch{width:80px;height:4px;border-radius:27px;background-image:linear-gradient(298deg,var(--red),var(--yellow));position:fixed;right:50px;top:75px;display:block;margin:0 auto;text-align:center;opacity:1;z-index:33333;transition:all 300ms linear}.circle{cursor:pointer;position:absolute;top:50%;transform:translateY(-50%);left:-5px;width:40px;height:40px;border-radius:50%;background:var(--black-blue-light-3);box-shadow:0 4px 4px rgb(26 53 71 / .25),0 0 0 1px rgb(26 53 71 / .07);animation:border-transform 10s linear infinite alternate forwards}.circle:hover{box-shadow:0 8px 8px rgb(26 53 71 / .25),0 0 0 1px rgb(26 53 71 / .07)}.circle:before{position:absolute;font-family:'unicons';content:'\eac1';top:0;left:0;z-index:2;font-size:20px;line-height:40px;text-align:center;width:100%;height:40px;opacity:1;color:var(--grey);-webkit-transition:all 300ms linear;transition:all 300ms linear}.circle:after{position:absolute;font-family:'unicons';content:'\eb8f';top:0;left:0;z-index:2;font-size:20px;line-height:40px;text-align:center;width:100%;height:40px;color:var(--yellow);opacity:0;-webkit-transition:all 300ms linear;transition:all 300ms linear}.switched .circle{left:45px;box-shadow:0 4px 4px rgb(26 53 71 / .25),0 0 0 1px rgb(26 53 71 / .07);background:var(--black-blue)}.switched .circle:hover{box-shadow:0 8px 8px rgb(26 53 71 / .25),0 0 0 1px rgb(26 53 71 / .07)}.switched .circle:before{opacity:0}.switched .circle:after{opacity:1}