wonyo ju mp cr dollcrds ani & music

---MUSIC PLAYER---
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500;800&display=swap" rel="stylesheet">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-------MUSIC PLAYER BY GLENTHEMES------->
<script src="//static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position:relative;
top:10px;
left:0px;
display:flex;
z-index:99;
}
#glenplayer02 a {text-decoration:none;}

#glenplayer02 > div {
align-self:center;
-webkit-align-self:center;
}

.music-controls {
user-select:none;
-webkit-user-select:none;
width:13px;
font-size:18px;
cursor:pointer;
}

.playy, .pausee {color:#FFF; text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;} /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left:10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:14px;
color:#FFF;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0; /* color of music note symbol */
}

.labeltext {
margin-left:0px;
position: relative;
bottom:10px;
font-family: 'M PLUS Rounded 1c', sans-serif;
font-size:14px;
color:#FFF;
font-weight: bold;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;/* color of song title */
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">►</div>
<div class="pausee">♬</div>
</div>
<div class="sonata"> <marquee> now playing ... "Accendio" by IVE </marquee> </div>
<div class="labeltext"></div>
</div><!--end music player-->

<audio id="tune" src="https://dl.dropbox.com/scl/fi/frank4l2c6j6uww0vruxm/02-Accendio.mp3?rlkey=lpo2r3jhtubly46mxkx7nzul9&st=92ok2z4a&dl=0.mp3""audio"></audio>
</body>

<div class="labeltext"> </div>

---ANIMATION---
<style>
#container03, #image02, #container04, #image03, #container05, #image04 {
-webkit-animation: slide-in-elliptic-right-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-elliptic-right-fwd 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
/* ----------------------------------------------
* Generated by Animista on 2024-7-17 21:11:18
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: @cssanimista
* ---------------------------------------------- */

/**
* ----------------------------------------
* animation slide-in-elliptic-right-fwd
* ----------------------------------------
*/
@-webkit-keyframes slide-in-elliptic-right-fwd {
0% {
-webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
transform: translateX(800px) rotateY(-30deg) scale(0);
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: -1800px 50%;
transform-origin: -1800px 50%;
opacity: 1;
}
}
@keyframes slide-in-elliptic-right-fwd {
0% {
-webkit-transform: translateX(800px) rotateY(-30deg) scale(0);
transform: translateX(800px) rotateY(-30deg) scale(0);
-webkit-transform-origin: -100% 50%;
transform-origin: -100% 50%;
opacity: 0;
}
100% {
-webkit-transform: translateX(0) rotateY(0) scale(1);
transform: translateX(0) rotateY(0) scale(1);
-webkit-transform-origin: -1800px 50%;
transform-origin: -1800px 50%;
opacity: 1;
}
}
</style>