I get to love you - Misceláneo V2

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"/>
<div class="msc2">
  <div class="msct">
  <div class="msct1"></div>
  <div class="msctbc1">
    <div class="mscticon1">14:59 <span class="fa fa-location-arrow"></span> </div>
    <div class="msctbar"></div>
    <div class="mscticon2">
      <span class="fa fa-signal"></span>
      <span class="fa fa-wifi"></span>
      <span class="fa fa-battery-three-quarters"></span></div>
  </div>
  <div class="mscalb">
      <div class="mscalbum1"></div>
      <div class="msonauco">
        <div class="mscasong">I Get to Love You</div>
        <div class="mscauthor">Ruelle</div>
      </div>
    </div>
  <p>A continuación</p>
  <div class="mscplaylis1">

    <div class="mscplaylis2">
      <div class="mscplaylis3">
      <div class="mscpkayal" style="background:url('http://placehold.it/45x45')"></div>
      <div class="msonauco1">
        <div class="mscpkayal2">Canción 1</div>
        <div class="mscpkayal3">Cantante 1</div>
      </div>
    </div>
      <div class="mscplaylis3">
      <div class="mscpkayal" style="background:url('http://placehold.it/45x45')"></div>
      <div class="msonauco1">
        <div class="mscpkayal2">Canción 2</div>
        <div class="mscpkayal3">Cantante 2</div>
      </div>
    </div>
      <div class="mscplaylis3">
      <div class="mscpkayal" style="background:url('http://placehold.it/45x45')"></div>
      <div class="msonauco1">
        <div class="mscpkayal2">Canción 3</div>
        <div class="mscpkayal3">Cantante 3</div>
      </div>
    </div>
      <div class="mscplaylis3">
      <div class="mscpkayal" style="background:url('http://placehold.it/45x45')"></div>
      <div class="msonauco1">
        <div class="mscpkayal2">Canción 4</div>
        <div class="mscpkayal3">Cantante 4</div>
      </div>
    </div>
      <div class="mscplaylis3">
      <div class="mscpkayal" style="background:url('http://placehold.it/45x45')"></div>
      <div class="msonauco1">
        <div class="mscpkayal2">Canción 5</div>
        <div class="mscpkayal3">Cantante 5</div>
      </div>
    </div>
    </div>

    </div>
  </div>

  <div class="msctbc4">
    <div class="mscmba"><div class="mscmba2"></div></div>
    <div class="mscmnum">
      <div class="mscmnum1">0:16</div>
      <div class="mscmnum2">-2:45</div>
    </div>
  </div>
  <div class="msctbpla4">
    <span class="fa fa-backward"></span>
    <span class="fa fa-play"></span>
    <span class="fa fa-forward"></span>
  </div>
  <div class="msctbly2">
    <span class="fa fa-quote-right"></span>
    <span class="fa fa-list"></span>
  </div>

</div>
<div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div>

<style>
.msc2{--color1: #000; --color2:#FFF; --colorbarra: #AAA; --imgfondo:url('https://i.imgur.com/6kpeuWU.jpg'); --imgalbum1:url('https://i.imgur.com/L6eUVcy.jpg'); --barratiempo:15%;}
.msc2{width: 290px; height: 500px; padding: 5px; border-radius: 20px; background: var(--color1); margin: 0 auto; }
.msc2 p{font-family:'Calibri'; font-size: 15px; color: var(--color1); position: absolute; margin-top: 115px; margin-left: 20px;}
.msct{width: 290px; height: 500px; border-radius: 20px; background: var(--color1); margin: 0 auto;}
.msct1{width: 290px; height: 500px; border-radius: 20px; filter: blur(3px);background: var(--imgfondo) center center; position: absolute;} .msctbc1{position: absolute; display: flex; margin-left: 10px;}
.mscticon1{width: 60px; font-family:'Calibri'; font-size: 15px; color: var(--color1); line-height: 30px;}
.msctbar{width: 150px; height: 30px; background: #000; border-radius: 0px 0px 20px 20px;}
.mscticon2{width: 65px; font-family:'Calibri'; font-size: 15px; color: var(--color1); line-height: 30px;}
.mscalb{position: absolute; display: flex; margin-top: 45px; margin-left: 15px;}
.mscalbum1{width: 60px; height: 60px; background:var(--imgalbum1); border: 1px solid var(--colorbarra);}
.msonauco{ margin-left: 7px; margin-top: 7px;}
.mscasong{font-family:'Calibri'; font-size: 20px; color: var(--color1);}
.mscauthor{font-family:'Calibri'; font-size: 15px; color: var(--color1);}
.mscplaylis1{width: 230px; height: 190px; padding: 15px; position: absolute; margin-top: 135px; margin-left: 18px; background: var(--color2); opacity: 0.7;}
.mscplaylis2{width: 210px; max-height: 170px; background: var(--color2); padding: 10px;overflow: auto;}
.mscplaylis3{width: 200px; display: flex; margin-top:2px;}
.mscpkayal{width: 45px; height: 45px; border: 1px solid var(--colorbarra);}
.msonauco1{ margin-left: 7px; margin-top: 7px;}
.mscpkayal2{font-family:'Calibri'; font-size: 15px; color: var(--color1);}
.mscpkayal3{font-family:'Calibri'; font-size: 10px; color: var(--color1);}
.msctbc4{position: absolute; margin-top: -130px; margin-left: 20px;}
.mscmba{width: 255px; height: 4px; background: var(--color1);}
.mscmba2{width: var(--barratiempo); height: 4px; background: var(--colorbarra);}
.mscmnum{font-family:'Calibri'; font-size: 15px; color: var(--color1); display: flex;} .mscmnum1{width: 220px;}
.msctbpla4{position: absolute; margin-top: -110px; margin-left: 60px; color: var(--color1); font-size: 30px; }
.msctbpla4 span{padding: 15px;}
.msctbly2{position: absolute; margin-top: -45px; margin-left: -20px; color: var(--color1); font-size: 15px;}
.msctbly2 span{padding-left: 100px; }
#myscr{font-family: 'Century Gothic'; font-size: 11px; text-align: center; color: #2C4769; margin: 0 auto; margin-top: 1px;}
#myscr a{color: #21 ;text-decoration: none;}</style>