body {
  font-family: -apple-system, system-ui, Helvetica, Arial, sans-serif;
  margin: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; 
  background-image: url('https://salve.gratis/uploads/slideshow/cvtwjeh27ntoY5W_1712275531.jpg');
}


progress {
  opacity: 0;
}

.progress-element {

  width: 100%;
  margin: 0 0 10px;
}

.progress-container {
  position: relative;
  background: #eee;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
}

.progress-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: turquoise;
}

.progress-element--html .progress-container::before {
  animation: progress-html 1s ease-in forwards;
}

.progress-element--css .progress-container::before {
  animation: progress-css 1s ease-in forwards;
}

.progress-element--javascript .progress-container::before {
  animation: progress-javascript 1s ease-in forwards;
}

.progress-label {
  position: relative;
}

@property --num {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
.progress-label::after {
  counter-reset: num var(--num);
  content: counter(num) "%";
  position: absolute;
  top: 0;
  right: 0;
}

.progress-element--html .progress-label::after {
  animation: progress-text-html 1s ease-in forwards;
}

.progress-element--css .progress-label::after {
  animation: progress-text-css 1s ease-in forwards;
}

.progress-element--javascript .progress-label::after {
  animation: progress-text-javascript 1s ease-in forwards;
}

@keyframes progress-html {
  to {
    width: 100%;
  }
}
@keyframes progress-css {
  to {
    width: 80%;
  }
}
@keyframes progress-javascript {
  to {
    width: 65%;
  }
}
@keyframes progress-text-html {
  to {
    --num: 100;
  }
}
@keyframes progress-text-css {
  to {
    --num: 80;
  }
}
@keyframes progress-text-javascript {
  to {
    --num: 65;
  }
}

.header .header-content {

    margin-top: -200px !important;
}