*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: fantasy;
}
body{
    background-color: rgba(187, 204, 238, 0.733);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;  
}
.skill{
    width: 160px;
    height: 160px;
    position: relative;
}
.outer-circle{
    width: 160px;
    height: 160px;
    border-radius: 50%;
   box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
                -6px -6px 10px -1px rgba(255,255,255,0.7),
                -0.5px -0.5px 0px rgba(255,255,255,1),
                0.5px 0.5px 0px rgba(0,0,0,0.15),
                0px 12px 10px -10px rgba(0,0,0,0.05);
    padding: 20px;
}
.inner-circle{
    width: 120px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
                inset -4px -4px 6px -1px rgba(255,255,255,0.7);
                transition: all 0.5s ease;           
}
#number{
    font-weight: 600;
    color: #333;
}
circle{
    fill: none;
    stroke: url(#GradientColor);
    stroke-width: 20px;
    stroke-dasharray: 472;
    stroke-dashoffset: 472; /*200 to animate the gradient color of circle */
    animation: circle 2s linear forwards; 
}
svg{
    position: absolute;
    top: 0;
    left: 0;
   
}
@keyframes circle {
    100%{
        stroke-dashoffset: 165; /* 472-472*0.65- as skill is 65%*/
    }  
}