/* Trying some random HTML and CSS functionalities */
* {
  font-family: sans-serif;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-family: monospace;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}

hr {
  border: 0.5px solid #c4c4c4;
  margin-top: 10px;
  margin-bottom: 20px;
  width: 90%;
  max-width: 600px;
  margin-left: 5px;
}

#wrapper95 {
  background-color: #c0c0c0;
  width: -moz-fit-content;
  height: -moz-fit-content;
  width: fit-content;
  height: fit-content;
  padding: 25px;
}

.button95 {
  font-family: "MS Sans Serif";
  font-size: 16px;
  background: #c0c0c0;
  box-shadow: -2px -2px 1px #0f0f0f inset, 2px 2px 1px #f0f0f0 inset;
  cursor: pointer;

  border: none;
  width: auto;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
  padding-left: 20px;
  padding-right: 20px;
}

.button95:focus {
  outline: 1.5px dotted black;
  outline-offset: -7px;
}

.button95:active {
  outline: none;
  box-shadow: 2px 2px 1px #0f0f0f inset, -2px -2px 1px #f0f0f0 inset;
}


/* This is HTML's Progress bar, the animated background is now working!
(need to animate the main progress bar, and every sub-element inherits, so the gradient looks weird when it's small) */
/* TODO: Possible fix is redrawing the gradient based on the size of the progress bar!!! */
/* The background either shrinks relative to the progress (now) or lags (with calc as width).
I assume there's no way to fix given how HTML treats Progress elements */
progress[value] {
  appearance: none;

  height: 30px;
  width: 87vw;
  max-width: 600px;

  animation: movingGradient 3s linear infinite;
}

progress[value]::-webkit-progress-inner-element {
  background-position: inherit;
}

progress[value]::-webkit-progress-bar {
  background-color: #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) inset;
  background-position: inherit;
}

progress[value]::-webkit-progress-value {
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(255, 255, 255, 0.5) inset;

  background: linear-gradient(
    to left,
    #05b024 15%,
    #6fe074 40%,
    #05b024 50%,
    #05b024 65%,
    #6fe074 90%,
    #05b024 100%
  );
  background-size: /* calc(2*87vw) */ 200% 100%;

  background-position: inherit;

  /* -webkit-animation animation: movingGradient 1500ms linear infinite; */
  /* Old animation was here! Hence not working */
}

/* The entire progress bar, used to change the overall border */
/* progress::-webkit-progress-inner-element {
    border: 3px solid #d1d1d1;
    border-radius: 6px;
} */


/* My progress bar, just divs and lots of love :3 */
.container-bar {
  height: 30px;
  width: 87vw;
  max-width: 600px;
  overflow: hidden;

  background-color: #e6e6e6;
  border-radius: 5px;
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25) inset;
}

.progress-bar {
  height: 30px;
  width: 0;

  overflow: hidden;
  border-radius: 5px;
}

.animation-bar {
  height: 30px;
  width: 87vw;
  max-width: 600px;

  box-shadow: 0 2px 6px rgba(255, 255, 255, 0.5) inset;

  background: linear-gradient(
    to left,
    #05b024 15%,
    #6fe074 40%,
    #05b024 50%,
    #05b024 65%,
    #6fe074 90%,
    #05b024 100% /* Original dimensions: 30%, 80%, 100% */
  );
  background-size: 200% 100%;

  animation: movingGradient 1500ms linear infinite;
}

/* Animation */
@keyframes movingGradient {
  0% {
    background-position: right bottom;
  }
  100% {
    background-position: left bottom;
  }
}