@property --angle{syntax: "<angle>"; initial-value: 0deg; inherits: false;}*{--animation-time: 1.3s}.si-container{width:100px;height:100px;border-radius:50px;background-color:var(--skill-item-border);padding:2px;display:flex;justify-content:center;align-items:center;position:relative}.si-container .si-content{width:100%;height:100%;border-radius:50%;background-color:var(--black);display:flex;justify-content:center;align-items:center}.si-container .si-content .skill-icon{width:60px;height:60px}.si-container .si-content .skill-icon path{fill:var(--white);transition:fill .5s ease-out}.si-container:hover{background-image:conic-gradient(var(--primary-green) var(--angle),transparent 2%);animation:spin var(--animation-time) ease-out forwards}.si-container .si-content .skill-icon{width:40px;height:40px}.si-container:hover .si-content .skill-icon path{fill:var(--primary-green)}.si-container:not(:hover){background-image:conic-gradient(var(--primary-green) var(--angle),transparent 0%);animation:spinBack var(--animation-time) ease-out forwards}.si-container .tooltip{position:absolute;top:auto;bottom:0;left:auto;right:auto;margin-bottom:-30px;background-color:var(--primary-green);color:var(--black);font-size:10px;padding:2px 15px;border-radius:3px;opacity:0;transition:opacity .3s ease-in}.si-container .tooltip:before{content:"";border-top:6px solid transparent;border-right:8px solid var(--primary-green);border-bottom:6px solid transparent;margin-bottom:20px;position:absolute;top:0;left:0;right:auto;margin-left:45%;margin-top:-8px;align-self:center;transform:rotate(90deg)}.si-container:hover .tooltip{opacity:1}@keyframes spin{0%{--angle: 0deg}to{--angle: 360deg}}@keyframes spinBack{0%{--angle: var(--angle)}to{--angle: 0deg}}@media screen and (max-width: 550px){.si-container{width:90px;height:90px;border-radius:50px}}