:root {
      --per_skill: 292.5;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /*body {
      background-color: #e3edf7;
      height: 100hv;
      display: flex;
      align-items: center;
      /* Vertical Alignment*/
      /*justify-content: center;
      /* Horizontal Alignment*/
    /*}*/

    .skills {
      width: 160px;
      height: 160px;
      position: relative;
    }

    .outer {
      height: 160px;
      width: 160px;
      padding: 20px;
      box-shadow: 6px 6px 10px -1px rgba(0, 0, 0, 0.15), -6px -6px 10px -1px rgba(255, 255, 255, 0.7);
      border-radius: 50%;
    }

    .inner {
      height: 120px;
      width: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      /*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, 1), 0.5px 0.5px 0px rgba(0, 0, 0, 0.15), 0px 12px 10px -10px rgba(0, 0, 0, 0.05);*/
      border-radius: 50%;
      background-color: #565A5B;
      color: #FFFFFF;
      font-family: Arial, Helvetica, sans-serif;
      font-weight: bold;
      font-size: 35px;
    }

    #Java {
      font-weight: 600;
      color: #555;
      font-size: 30px;
    }

    #HTML {
      font-weight: 600;
      color: #555;
      font-size: 30px;
    }

    .percent-0 {
      --per_skill: 450.0;
    }
    .percent-1 {
      --per_skill: 445.5;
    }
    .percent-2 {
      --per_skill: 441.0;
    }
    .percent-3 {
      --per_skill: 436.5;
    }
    .percent-4 {
      --per_skill: 432.0;
    }
    .percent-5 {
      --per_skill: 427.5;
    }
    .percent-6 {
      --per_skill: 423.0;
    }
    .percent-7 {
      --per_skill: 418.5;
    }
    .percent-8 {
      --per_skill: 414.0;
    }
    .percent-9 {
      --per_skill: 409.5;
    }
    .percent-10 {
      --per_skill: 405.0;
    }
    .percent-11 {
      --per_skill: 400.5;
    }
    .percent-12 {
      --per_skill: 396.0;
    }
    .percent-13 {
      --per_skill: 391.5;
    }
    .percent-14 {
      --per_skill: 387.0;
    }
    .percent-15 {
      --per_skill: 382.5;
    }
    .percent-16 {
      --per_skill: 378.0;
    }
    .percent-17 {
      --per_skill: 373.5;
    }
    .percent-18 {
      --per_skill: 369.0;
    }
    .percent-19 {
      --per_skill: 364.5;
    }
    .percent-20 {
      --per_skill: 360.0;
    }
    .percent-21 {
      --per_skill: 355.5;
    }
    .percent-22 {
      --per_skill: 351.0;
    }
    .percent-23 {
      --per_skill: 346.5;
    }
    .percent-24 {
      --per_skill: 342.0;
    }
    .percent-25 {
      --per_skill: 337.5;
    }
    .percent-26 {
      --per_skill: 333.0;
    }
    .percent-27 {
      --per_skill: 328.5;
    }
    .percent-28 {
      --per_skill: 324.0;
    }
    .percent-29 {
      --per_skill: 319.5;
    }
    .percent-30 {
      --per_skill: 315.0;
    }
    .percent-31 {
      --per_skill: 310.5;
    }
    .percent-32 {
      --per_skill: 306.0;
    }
    .percent-33 {
      --per_skill: 301.5;
    }
    .percent-34 {
      --per_skill: 297.0;
    }
    .percent-35 {
      --per_skill: 292.5;
    }
    .percent-36 {
      --per_skill: 288.0;
    }
    .percent-37 {
      --per_skill: 283.5;
    }
    .percent-38 {
      --per_skill: 279.0;
    }
    .percent-39 {
      --per_skill: 274.5;
    }
    .percent-40 {
      --per_skill: 270.0;
    }
    .percent-41 {
      --per_skill: 265.5;
    }
    .percent-42 {
      --per_skill: 261.0;
    }
    .percent-43 {
      --per_skill: 256.5;
    }
    .percent-44 {
      --per_skill: 252.0;
    }
    .percent-45 {
      --per_skill: 247.5;
    }
    .percent-46 {
      --per_skill: 243.0;
    }
    .percent-47 {
      --per_skill: 238.5;
    }
    .percent-48 {
      --per_skill: 234.0;
    }
    .percent-49 {
      --per_skill: 229.5;
    }
    .percent-50 {
      --per_skill: 225.0;
    }
    .percent-51 {
      --per_skill: 220.5;
    }
    .percent-52 {
      --per_skill: 216.0;
    }
    .percent-53 {
      --per_skill: 211.5;
    }
    .percent-54 {
      --per_skill: 207.0;
    }
    .percent-55 {
      --per_skill: 202.5;
    }
    .percent-56 {
      --per_skill: 198.0;
    }
    .percent-57 {
      --per_skill: 193.5;
    }
    .percent-58 {
      --per_skill: 189.0;
    }
    .percent-59 {
      --per_skill: 184.5;
    }
    .percent-60 {
      --per_skill: 180.0;
    }
    .percent-61 {
      --per_skill: 175.5;
    }
    .percent-62 {
      --per_skill: 171.0;
    }
    .percent-63 {
      --per_skill: 166.5;
    }
    .percent-64 {
      --per_skill: 162.0;
    }
    .percent-65 {
      --per_skill: 157.5;
    }
    .percent-66 {
      --per_skill: 153.0;
    }
    .percent-67 {
      --per_skill: 148.5;
    }
    .percent-68 {
      --per_skill: 144.0;
    }
    .percent-69 {
      --per_skill: 139.5;
    }
    .percent-70 {
      --per_skill: 135.0;
    }
    .percent-71 {
      --per_skill: 130.5;
    }
    .percent-72 {
      --per_skill: 126.0;
    }
    .percent-73 {
      --per_skill: 121.5;
    }
    .percent-74 {
      --per_skill: 117.0;
    }
    .percent-75 {
      --per_skill: 112.5;
    }
    .percent-76 {
      --per_skill: 108.0;
    }
    .percent-77 {
      --per_skill: 103.5;
    }
    .percent-78 {
      --per_skill: 99.0;
    }
    .percent-79 {
      --per_skill: 94.5;
    }
    .percent-80 {
      --per_skill: 90.0;
    }
    .percent-81 {
      --per_skill: 85.5;
    }
    .percent-82 {
      --per_skill: 81.0;
    }
    .percent-83 {
      --per_skill: 76.5;
    }
    .percent-84 {
      --per_skill: 72.0;
    }
    .percent-85 {
      --per_skill: 67.5;
    }
    .percent-86 {
      --per_skill: 63.0;
    }
    .percent-87 {
      --per_skill: 58.5;
    }
    .percent-88 {
      --per_skill: 54.0;
    }
    .percent-89 {
      --per_skill: 49.5;
    }
    .percent-90 {
      --per_skill: 45.0;
    }
    .percent-91 {
      --per_skill: 40.5;
    }
    .percent-92 {
      --per_skill: 36.0;
    }
    .percent-93 {
      --per_skill: 31.5;
    }
    .percent-94 {
      --per_skill: 27.0;
    }
    .percent-95 {
      --per_skill: 22.5;
    }
    .percent-96 {
      --per_skill: 18.0;
    }
    .percent-97 {
      --per_skill: 13.5;
    }
    .percent-98 {
      --per_skill: 9.0;
    }
    .percent-99 {
      --per_skill: 4.5;
    }
    .percent-100 {
      --per_skill: 0.0;
    }

    .una_skill {
      position: relative;
      margin-top: 20px;
      /*margin-left: 20px;*/
    }

    .una_skill h3 {
      text-align: center;
    }

    svg {
      position: absolute;
      top: 0;
      left: 0;
    }

    @keyframes anim {
      100% {
        stroke-dashoffset: var(--per_skill);
      }
    }

    circle {
      fill: none;
      stroke: url(#GradientColor);
      stroke-width: 20px;
      stroke-dasharray: 450;
      stroke-dashoffset: 450;
      animation: anim 2s linear forwards;
    }