/* splash */
.splash{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
  width:100vw;
  margin:0rem;
  padding:0rem;
  font-family:system-ui;
  background-color:#fff;
  background:linear-gradient(#fff 0%,#def 100%);
  transition:all 0.3s ease 0s;
}
.splash span{
  position:absolute;
  margin:-2rem 0rem 0rem;
  font-size:0.75rem;
  color:#777;
  animation:fade 2.3s infinite 0s;
  transition:all 0.3s ease 0s;
}
@keyframes fade{
  0%{opacity:1;padding-left:0rem;font-size:0.7rem;color:#777;}
  50%{opacity:0.3;padding-left:0.2rem;font-size:0.75rem;color:#37b;}
  100%{opacity:1;padding-left:0rem;font-size:0.7rem;color:#777;}
}
/* progress */
.progress-bar{
  --color:#37b; /* the progress color */
  --background: lightgrey; /* the background color */
  -webkit-appearance:none;
  -moz-appearance:none;
  appearance:none;
  border:none;
  width:12.5rem;
  height:0.5rem;
  margin:0rem 0.625rem;
  border-radius:10em;
  background:var(--background);
  overflow:hidden;
}
.progress-bar .progress{
  border-radius:10em;
  background:var(--color);
  width:0%;
  height:0.5rem;
}
.progress-bar .progress:not([value]){
  width:12%;
  animation:listening 1.7s infinite 0s;
}
.progress-bar .progress[value]{
  width:calc(attr(value number,0) / attr(max number,100) * 12.5rem);
}
@keyframes listening{
  0%{margin-left:-10%;}
  50%{margin-left:98%;}
  100%{margin-left:-10%;}
}