#progressBar {
  width: 100%;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  margin-top: 10px;
}

#progress {
  height: 20px;
  background-color: #4caf50;
  width: 0%;
  transition: width 0.2s;
}

#info {
  margin-top: 5px;
}

@media (prefers-color-scheme: dark) {
  #progressBar {
    background-color: #1a1a1a;
    border: 1px solid #3a3a3a;
  }

  #progress {
    background-color: #16a34a;
  }
}


:root[data-theme="light"] #progressBar {
  background-color: #eee;
  border: none;
}

:root[data-theme="light"] #progress {
  background-color: #4caf50;
}

:root[data-theme="dark"] #progressBar {
  background-color: #1a1a1a;
  border: 1px solid #3a3a3a;
}

:root[data-theme="dark"] #progress {
  background-color: #16a34a;
}