I get to love you - Misceláneo V1

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.13.0/css/all.css"/>
<div class="msc">
  <div class="msct">
  <div class="msct1"></div>
  <div class="msctbc">
    <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="mscalbum"></div>
  <div class="msctbc2">
    <div class="mscasong">I Get to Love You</div>
    <div class="mscauthor">Ruelle</div>
    <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="msctbpla3">
    <span class="fa fa-backward"></span>
    <span class="fa fa-play"></span>
    <span class="fa fa-forward"></span>
  </div>
  <div class="msctbly">
    <span class="fa fa-quote-right"></span>
    <span class="fa fa-random"></span>
    <div class="msclyr1"><div class="msclyr2">
TEXTO AQUI
    </div></div>
  </div>

</div>
</div>
<div id="myscr"><a href="https://mystiqueworkshop.tumblr.com/">MYSTIQUE</a></div><style>
.msc{--color1: #000; --color2:#FFF; --colorbarra: #AAA; --imgfondo:url('https://i.imgur.com/6kpeuWU.jpg'); --imgalbum:url('https://i.imgur.com/lF8uLTn.jpg'); --barratiempo:15%;}
.msc{width: 290px; height: 500px; padding: 5px; border-radius: 20px; background: var(--color1); margin: 0 auto; }
.msct{width: 290px; height: 500px; border-radius: 20px; background: var(--color1); margin: 0 auto;}
.msct1{width: 290px; height: 500px; border-radius: 20px; filter: blur(1px);background: var(--imgfondo) center center; position: absolute;}
.msctbc{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;}
.mscalbum{width: 170px; height: 170px; background:var(--imgalbum); position: absolute; margin-top: 80px; margin-left: 60px; border: 1px solid var(--colorbarra);}

.msctbc2{position: absolute; margin-top: 280px; margin-left: 20px; }
.mscasong{font-family:'Calibri'; font-size: 20px; color: var(--color1);}
.mscauthor{font-family:'Calibri'; font-size: 15px; color: var(--color1);}
.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;}
.msctbpla3{position: absolute; margin-top: 350px; margin-left: 60px; color: var(--color1); font-size: 30px; }
.msctbpla3 span{padding: 15px; }
.msctbly{position: absolute; margin-top: 450px; margin-left: -20px; color: var(--color1); font-size: 15px;}
.msctbly span{padding-left: 100px; }
.msclyr1{width: 200px; height: 300px; padding: 25px; background: var(--color1); font-size: 12px; color: var(--color2); position: absolute; margin-top: -400px; margin-left:45px; opacity: 0; font-family:'Calibri';transition: all 1s ease-in-out;}
.msclyr2{width: 190px; height: 300px; padding: 5px; overflow: auto; margin: 0 auto;}
.msctbly:hover .msclyr1{opacity:1;transition: all 1s ease-in-out;}
#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>