custom HTML Audio Player in Blogger website

<div class="HTML_Audio_player"> <div class="Audio_Player_image"><img src="https://i1.sndcdn.com/avatars-000279088807-w6845m-t200x200.jpg" style="border-radius: 60px;" /></div> <div class="player-content"> <div class="player-info"> <a class="song-name" href="https://youtu.be/BWdZjZV6bEk" target="_blank">Kontinuum - Aware [NCS Release]</a> <a class="artist" href="#">NCS SONGS</a> </div> <div class="k2_audio_player"> <audio controls style="width: 80%;"> <source src="https://drive.google.com/uc?export=download&id=1r_TZWVoEhAKUGI4MzrLvpoQGgfo8s_On" type="audio/mpeg"/> </audio> </div> </div> </div> <style> .HTML_Audio_player { z-index:10; background: linear-gradient(135deg,#f4f8ff 0,#f4f8ff 49%,#e5efff 49%,#e9e8f2 100%); color: inherit; min-height:120px; max-height:150px; display:flex; box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px; flex-direction:row;padding: 20px 10px 20px;} .Audio_Player_image { width:150px; display: flex; justify-content: center; } .player-content { flex-grow:1; display:flex; flex-direction:column;} .player-info { flex-grow:1; display:flex; flex-direction:column; justify-content:center; padding-left:10px;} .song-name { font-size:18px; font-weight:600; } .k2_audio_player { display:flex;} audio { flex-grow:1; height:40px; } audio::-webkit-media-controls-play-button { background-color: #B1D4E0; border-radius: 50%;} audio::-webkit-media-controls-play-button:hover { background-color: rgba(177,212,224, .7);} audio::-webkit-media-controls-panel { background: #e9e8f2;} .Audio_Player_image img:hover{animation:rotating 3s linear infinite} @keyframes rotating{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} </style>