*{margin: 0px;padding: 0px; box-sizing: border-box; font-family:sans-serif;}

body{
    
    height: 100vh;
    background-color: black;
    align-items: left;
    justify-content: center;
    display: flex;
    padding: 10px;
    
  /*  border: 2px solid rosybrown;*/

    /* Font text */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 50px;
    font-weight: bold;
    color: white;
}


.skill{
    width: 200px;
    height:200px;
    position: absolute;
    margin-left: -600px;
    float: inherit;
    
}
.outer{
    height: 300px;
    width: 300px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.7);
    padding: 50px;
  /*  box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
    -6px -6px 10px -1px rgba(255,255,255,0.7)*/
}

.inner{
    height: 200px;
    width: 200px;
    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);
*/
}
#number{
    font-weight: 600px;
    
}
   circle{
    fill: none;
    stroke:#4CFF4C;
    stroke-width: 52px;
    stroke-dasharray: 780;
    stroke-dashoffset: 780;
    animation: anim 3s linear forwards;
    stroke-linecap: butt; /* Garante que não haja pontas afiadas */
}
    svg{
    position: absolute;
    top: 0px;
    left: 0px;
}
@keyframes anim {
    100%{
        stroke-dashoffset:273;
    }
}
#disp{
    margin-left: 25px;
    margin-top: 80px;
    float: left;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
}
#perf{
    margin-left: 550px;
    margin-top: -25px;
    float: left;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
}

#quali{
    margin-left: 1040px;
    margin-top: -35px;
    font-family:Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;  
    float: left;  
    
}
p{
    font-size: 25px;
}

/* Style dashboard performance.*/

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

    .skill{
        width: 200px;
        height:200px;
        position: absolute;
        margin-left: -146px;
        margin-top: 0px;
        
        
    }
  
    
    .inner{
        height: 200px;
        width: 200px;
        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);
    */
    }

   .outer{    
        height: 300px;
        width: 300px;
        border-radius: 50%;
        border: 1px solid rgba(255,255,255,0.7);
        padding: 51px;             
     /*   box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),
        -6px -6px 10px -1px rgba(255,255,255,0.7)
     */   
   }
   #number{
    font-weight: 600px;
    
}
    circle{
    fill: none;
    stroke:#4CFF4C;
    stroke-width: 54px;
    stroke-dasharray: 1047;
    stroke-dashoffset: 1047;
    animation: anim 3s linear forwards;
    
}
    svg{
    position: absolute;
    top: 0px;
    left:0px;
}

 #disp{
    margin-left: -230px;
    margin-top: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
}
 #perf{
    margin-left: 50px;
    margin-top: 300px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
}

 #quali{
    margin-left: 320px;
    margin-top: -30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 30px;
    font-weight: bold;
}



@keyframes anim {
    100%{
        stroke-dashoffset: 366;
    }

        }
}