.skill1{
    width: 200px;
    height:200px;
 /*   background:blue;*/
    position: relative;
    margin-left:20px;
    margin-top: 50px;
    text-align: center;
    
}
.outer1{
    height: 230px;
    width: 230px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    padding: 54px;
    /*
    box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
    -6px -6px 10px -1px rgba(255,255,255,0.7)
*/
    }

.inner1{
    height: 120px;
    width: 120px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid white;
   /* box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
    inset 4px 4px 6px -1px rgba(255,255,255,0.7),
    -0.5px -0.5px 0px rgba(255,255,255,0.1),
    -0.5px -0.5px 0px rgba(0,0,0,0.15),
    0px 12px 10px -10px rgba(0,0,0,0.05);
*/
}
.number1{
    font-weight: 600px;
    
}
#circle1 {
    fill: none;
    stroke:#A020F0;
    stroke-width: 57px;
    stroke-dasharray:541;
    stroke-dashoffset:541;
    animation: anima 6s linear forwards;
     
}
#svg1{
    position:absolute ;
    top: 0;
    left: 0;
}



@keyframes anima {
    100%{
        stroke-dashoffset: 60;
    }
}

/* Responsivo   */

@media screen and (max-width:768px) {

    .skill1{
        width: 200px;
        height:200px;
        position: absolute;
        margin-left: -210px;
        margin-top: 30px;
        
        
    }  
   

   .outer1{    
        height: 230px;
        width: 230px;
        border-radius: 50%;
        border: 1px solid black;
        border: 1px solid rgba(255,255,255,0.7);
        padding: 53px;             
       /* box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
        -6px -6px 10px -1px rgba(255,255,255,0.7)
        
   }*/
          
    .inner1{
        height: 120px;
        width: 120px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid white;
        box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),
        inset 4px 4px 6px -1px rgba(255,255,255,0.7),
        -0.5px -0.5px 0px rgba(255,255,255,0.1),
        -0.5px -0.5px 0px rgba(0,0,0,0.15),
        0px 12px 10px -10px rgba(0,0,0,0.05);
    
    }

      
   }
    .number1{
        font-weight: 600px;
        
    }
    #circle1 {
        fill: none;
        stroke:#A020F0;
        stroke-width: 56px;
        stroke-dasharray:425;
        stroke-dashoffset:425;
        animation: anima 6s linear forwards;
         
    }
   #svg1{
        position:absolute ;
        top: 0px;
        left: 0px;
    }    

    
    
    @keyframes anima {
        100%{
            stroke-dashoffset: 47;
        }
    }
    
  
   }