/*
stylesiteooooo.css
---------
 
Par ooooo
*/



body
{
background-image: repeating-linear-gradient(red, yellow 10%, white 20%);
color: black;
font-size: 1em;

}


#play-pause-button{
  font-size: 50px;
  cursor: pointer;
}



.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50%;
}




.audio-player {
  height: 100px;
  width: 100px;
  background: #444;
  position: center;
  opacity: 0.05;
  box-shadow: 0 0 20px 0 #000a;
  font-family: arial;
  color: white;
  font-size: 0.75em;
  overflow: hidden;
  display: grid;
  grid-template-rows: 6px auto;
}


.audio-player .timeline .progress {
  background: coral;
  width: 0%;
  height: 100%;
  transition: 0.25s;
}


.audio-player .controls {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 20px;
}
.audio-player .controls > * {
  display: flex;
  justify-content: center;
  align-items: center;
}