body {
  margin:0;
  height:100%;
  background: #fff7fb;
  color; #1e1b1e;
  background-size: 100% 100%;
}

.center {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.center-translate {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) translateY(64px);
}
.contain {
  display:block;
  width:100%; height:100%;
  object-fit: contain;
}

.stretch {
  display:block;
  width:100%; height:100%;
}

.cover {
  display:block;
  width:100%; height:100%;
  object-fit: cover;
}

@media (prefers-color-scheme: dark) {
  body {
    margin:0;
    height:100%;
    background: #151216;
    color: #e8e0e5;
    background-size: 100% 100%;
  }
}

progress[value] {
  --w: 128px;
  --h: 8px;
  --color: linear-gradient(90deg,#661FFF,#FF1FB8) 0/var(--w);
  --background: transparent;

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  width: var(--w);
  height: var(--h);
  margin: 0 10px;
  border-radius: 10em;
  background: var(--background);
}
progress[value]::-webkit-progress-bar {
  border-radius: 10em;
  background: var(--background);
}
progress[value]::-webkit-progress-value {
  border-radius: 10em;
  background: var(--color);
  transition: all 1s ease;
}
progress[value]::-moz-progress-bar {
  border-radius: 10em;
  background: var(--color);
  transition: all 1s ease;
}