@import url('./font/stylesheet.css');

body,html{
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: #121212;
    background: linear-gradient(180deg, #575350 0%, #121212 100%);
}

body{
    font-family: 'Circular Std';
    font-weight: 100;
    color: white;
    min-height: 100vh;
}
.bg-vector{
    background-image: url('Vector.svg');
    background-position: right 50%;
    background-repeat: no-repeat;
    background-size: auto 90vh;
}
@media screen and (max-width: 680px) {
    .bg-vector{
        background-position: left 50%;
        background-size: 100vw auto;
    }
}
.bg-rainbow{
    background: linear-gradient(90deg, #2A3180 0%, #138DCE 37%, #FEEB17 72%, #C01818 100%);
}


/* PLAYER AUDIO */
/**/
#myProgress {
    width: 100%;
    background: linear-gradient(90deg, #2A3180 0%, #138DCE 37%, #FEEB17 72%, #C01818 100%);
    cursor: pointer;
    border-radius: 10px;
  }
  #myBar {
    width: 0%;
    height: 5px;
    background-color: #ffffff;
    border-radius: 10px;
  }
  
  .btn-action{
    cursor: pointer;
  }
  .btn-ctn, .infos-ctn{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .infos-ctn > div {
   color: rgb(209 213 219);
  }