.img{position:relative;border-radius:50%;padding:15px;width:100px;height:100px;display:flex;justify-content:center;align-items:center;flex-direction:column;cursor:pointer}.icon:after,.icon:before{content:"";border-radius:25%;position:absolute;width:100%;height:100%;left:0;top:0;transition:all .2s linear}.icon:hover:before{border-radius:50%;border-left:6px solid;border-right:6px solid;transform:skewX(20deg);color:#fff}.icon:hover:after{border-radius:50%;border-top:6px solid;border-bottom:6px solid;transform:skewY(-20deg);color:#fff}.icon2:after,.icon2:before{content:"";border-radius:25%;box-shadow:0 0 0 4px var(--zinc-300);position:absolute;width:100%;height:100%;left:0;top:0}@keyframes rodarI{0%{transform:skewX(0)}50%{transform:rotate(-180deg)}to{transform:rotate(0)}}@keyframes rodar{0%{transform:rotate(0)}50%{transform:rotate(180deg)}to{transform:rotate(0)}}.icon2:before{animation:rodar 2s linear infinite}.icon2:after{animation:rodarI 2s linear infinite}.planet{display:block;background:#000;margin:25px auto;border-radius:50%;position:relative}.planet:before{box-shadow:0 0 5px 1px var(--zinc-300) inset}.planet:after,.planet:before{content:"";border-radius:50%;position:absolute;width:100%;height:100%;left:0;top:0}.planet:after{border-left:5px solid var(--indigo);border-bottom:5px solid var(--indigo);transform:skewX(50deg)}