:root{
  --s1: #428AB9; /*0-20*/
  --s2: #4368BE; /*20-40*/
  --s3: #4545C0; /*40-60*/
  --s4: #6D48C3; /*60-80*/
  --s5: #944BC5; /*80-100*/
}

#animation-html{animation: s80 1.6s linear forwards; stroke: var(--s5);}
#animation-css{animation: s70 1.4s linear forwards; stroke: var(--s4);}
#animation-javascript{animation: s55 1.1s linear forwards; stroke: var(--s3);}
#animation-csharp{animation: s35 0.7s linear forwards; stroke: var(--s2);}
#animation-python{animation: s30 0.6s linear forwards; stroke: var(--s1);}

#animation-react{animation: s35 0.7s linear forwards; stroke: var(--s1);}
#animation-unity{animation: s20 0.4s linear forwards; stroke: var(--s2);}

#animation-mysql{animation: s40 0.8s linear forwards; stroke: var(--s3);}

#animation-vscode{animation: s40 0.8s linear forwards; stroke: var(--s3);}
#animation-photoshop{animation: s50 1s linear forwards; stroke: var(--s4);}
#animation-vegaspro{animation: s70 1.4s linear forwards; stroke: var(--s5);}


.skill-container{
  margin: 0 2em 1em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.skill-container i{
  transition: all 0.5s ease-out allow-discrete;
}

.skill{
  width: 140px;
  height: 140px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-icon{
  font-weight: 600;
  color: white;
  font-size: 30px;
  z-index: 1;
}

.skill-title{
text-align: center;
margin-top: 1em;
padding: 0 1em;
min-width: 80%;
border: 1px solid var(--txt-alt);
font-size: 1em;
transition: all 0.5s ease-out allow-discrete;
}

circle {
  fill: none;
  stroke: var(--txt-alt);
  stroke-width: 8px;
  stroke-dasharray: 377;
  stroke-dashoffset: 377;
}

.circlebg {
  stroke-dashoffset: 0;
}

svg {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(-90deg);
  z-index: 0;
}

.skill-container:hover i{
  transform: scale(1.2);
}



/* Updated formula: 377 - 377 x % (0.65 = 65%) */
@keyframes s100 {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes s95 {
  100% {
    stroke-dashoffset: 18.85;
  }
}
@keyframes s90 {
  100% {
    stroke-dashoffset: 37.7;
  }
}
@keyframes s85 {
  100% {
    stroke-dashoffset: 56.55;
  }
}
@keyframes s80 {
  100% {
    stroke-dashoffset: 75.4;
  }
}
@keyframes s75 {
  100% {
    stroke-dashoffset: 94.25;
  }
}
@keyframes s70 {
  100% {
    stroke-dashoffset: 113.1;
  }
}
@keyframes s65 {
  100% {
    stroke-dashoffset: 131.95;
  }
}
@keyframes s60 {
  100% {
    stroke-dashoffset: 150.8;
  }
}
@keyframes s55 {
  100% {
    stroke-dashoffset: 169.65;
  }
}
@keyframes s50 {
  100% {
    stroke-dashoffset: 188.5;
  }
}
@keyframes s45 {
  100% {
    stroke-dashoffset: 207.35;
  }
}
@keyframes s40 {
  100% {
    stroke-dashoffset: 226.2;
  }
}
@keyframes s35 {
  100% {
    stroke-dashoffset: 245.05;
  }
}
@keyframes s30 {
  100% {
    stroke-dashoffset: 263.9;
  }
}
@keyframes s25 {
  100% {
    stroke-dashoffset: 282.75;
  }
}
@keyframes s20 {
  100% {
    stroke-dashoffset: 301.6;
  }
}
@keyframes s15 {
  100% {
    stroke-dashoffset: 320.45;
  }
}
@keyframes s10 {
  100% {
    stroke-dashoffset: 339.3;
  }
}
@keyframes s5 {
  100% {
    stroke-dashoffset: 358.15;
  }
}