@property --progress-value {
    syntax: "<integer>";
    inherits: false;
    initial-value: 0;
  }
  @-webkit-keyframes html-progress {
    to {
      --progress-value: 85;
    }
  }
  @keyframes html-progress {
    to {
      --progress-value: 85;
    }
  }
  @-webkit-keyframes css-progress {
    to {
      --progress-value: 80;
    }
  }
  @keyframes css-progress {
    to {
      --progress-value: 80;
    }
  }
  @-webkit-keyframes responsive-progress {
      to {
        --progress-value: 90;
      }
    }
    @keyframes responsive-progress {
      to {
        --progress-value: 90;
      }
    }
  @-webkit-keyframes js-progress {
    to {
      --progress-value: 65;
    }
  }
  @keyframes js-progress {
    to {
      --progress-value: 65;
    }
  }
  .progress-bar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    /* to center the percentage value */
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .progress-bar::before {
    counter-reset: percentage var(--progress-value);
    content: counter(percentage) "%";
  }
  
  .html {
    background: radial-gradient(closest-side, #515151 79%, transparent 80% 100% ,white), conic-gradient( orange calc(var(--progress-value) * 1%), rgb(248, 248, 200) 0);
    -webkit-animation: html-progress 6s ease-in 1 forwards;
            animation: html-progress 6s ease-in 1 forwards;
  }
  
  .html::before {
    -webkit-animation: html-progress 6s ease-in 1 forwards;
            animation: html-progress 6s ease-in 1 forwards;
  }
  
  .css {
    background: radial-gradient(closest-side, #515151 79%, transparent 80% 100%, white 0), conic-gradient(orange calc(var(--progress-value) * 1%), rgb(248, 248, 200) 0);
    -webkit-animation: css-progress 6s ease-in 1 forwards;
            animation: css-progress 6s ease-in 1 forwards;
  }
  
  .css::before {
    -webkit-animation: css-progress 6s ease-in 1 forwards;
            animation: css-progress 6s ease-in 1 forwards;
  }
  .responsive {
      background: radial-gradient(closest-side, #515151 79%, transparent 80% 100%, white 0), conic-gradient(orange calc(var(--progress-value) * 1%), rgb(248, 248, 200) 0);
      -webkit-animation: responsive-progress 6s ease-in 1 forwards;
              animation: responsive-progress 6s ease-in 1 forwards;
    }
    
    .responsive::before {
      -webkit-animation: responsive-progress 6s ease-in 1 forwards;
              animation: responsive-progress 6s ease-in 1 forwards;
    }
    
  .js {
    background: radial-gradient(closest-side, #515151 79%, transparent 80% 100%, white 0), conic-gradient(orange calc(var(--progress-value) * 1%), rgb(248, 248, 200) 0);
    -webkit-animation: js-progress 6s ease-in 1 forwards;
            animation: js-progress 6s ease-in 1 forwards;
  }
  
  .js::before {
    -webkit-animation: js-progress 6s ease-in 1 forwards;
            animation: js-progress 6s ease-in 1 forwards;
  }
  
  body {
    /* font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif; */
    /* margin: 30px auto; */
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    animation: name duration timing-function delay iteration-count direction fill-mode;
    /* max-width: 600px; */
  }
  
  /* h2 {
    text-align: center;
  }
  
  progress {
    visibility: hidden;
    width: 0;
    height: 0;
  }
  .progress-bar-container{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 20px 0px;
  }
  .skills{
      display: flex;
      justify-content: center;
      align-items: center;
  } */