body{ display:flex;  }

body{padding:0; margin:0; box-sizing:border-box;font-family: 'Work Sans', sans-serif; text-align:center}
body *{box-sizing:border-box}



header{ background: #444;   color:#aaa; padding:20px; position:fixed; top: 0;left: 0;right: 0;margin:auto}


.box-header{ background: #06AD51; overflow:hidden;color:#fff; padding:15px 5px; border-radius: 10px 10px 0 0}
h1{margin:0; font-weight:400; font-size:20px; line-height:1em; }
.center-box{ padding:10px; border:3px solid #ccc; width: 400px; max-width:90%; border-radius:20px; box-shadow:0 0 20px rgba(0, 0, 0, .2); text-align:center; height: auto; position:fixed; top: 50%; transform: translateY(-50%); left: 0;right: 0;margin:auto; font-size:20px; color:#444; font-weight:400; background: #fff; z-index:999}
.box-img { width: 120px; height: 120px; border-radius:50%; border:solid 3px green; margin:20px 0 } 
.box-img + p{margin-top:0; }
p{line-height:1.2em; font-size:16px}
footer{ position:fixed; bottom: 0; left: 0;right: 0; margin:auto; background: #ddd; font-size:13px; color:#999;padding:10px 20px;}

#track{max-width:100%}
#showtime{display:none}
#showtime.act{display:block}

.btn{ width: 100%; line-height:2.4em; color:#fff; background: #2E7D32; border-radius:10px; animation: pulse 1s infinite; background:linear-gradient(#66BB6A,#2E7D32); display:inline-block; cursor:pointer; text-decoration:none}


@keyframes pulse{
  0%{transform: scale(1)}
  50%{transform: scale(1.03)}
}






.aplayer{ height: 80px; width: 80px;  auto; aspect-ratio:1/1; border-radius:50%; position:relative; background: #EF6C00; color:#fff; display:inline-block}

.aplayer-btn-play{ height: 100%; width: 100%; background:; color:#fff; display:flex; justify-content:center; cursor:pointer; border-radius:50%}

.aplayer-btn-play svg{ width: 50%;}
.icon-pause, .aplayer-playing .icon-play{display:none}
.aplayer-playing .icon-pause{display:block}
.icon-play{margin-left:10%}


.aplayer.aplayer-playing{background: #66BB6A;}
.aplayer:not(.aplayer-playing){animation: aplayerpulse 3s infinite;}
.aplayer:hover{animation: none;}

.aplayer.aplayer-playing:after{content:''; width: 100%; height: 100%; border:4px solid; border-color:#fff transparent transparent transparent; position:absolute; left: 0; top: 0; border-radius:50%; box-sizing:border-box; animation:linear aplayerplay 1s infinite; opacity:.5; pointer-events:none}



@keyframes aplayerplay{
  
  0%{ transform:rotate(0)}
  
   100%{transform:rotate(360deg)}

  
}

@keyframes aplayerpulse{
  
  0%{ transform:scale(1); box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .0001),0 0 0px rgba(0, 0, 0, .4)}
  10%{transform:scale(.9); box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .05),0 0 30px rgba(0, 0, 0, .4)}
  20%{transform:scale(1) ; box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .0001),0 0 0px rgba(0, 0, 0, .4)}
  
  
    30%{ transform:scale(1);box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .0001),0 0 0px rgba(0, 0, 0, .4)}
  40%{transform:scale(.9); box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .05), 0 0 30px rgba(0, 0, 0, .4)}
  50%{transform:scale(1); box-shadow:inset 0 0 0 200px rgba(0, 0, 0, .0001),0 0 0px rgba(0, 0, 0, .4)}
 

}