cr lovijun - standard

haiii if you have any questions about this pastebin / carrd you can send me a dm @ crrdcore or send me a retrospring @ soobinzz!! as always all positions have been made to fit my personal devices so you may have to edit them to fit your devices! and when you rm this carrd pls credit lovijun!!

--- CODES ---
<style>
@font-face {
font-family: dreams;
src: url(https://dl.dropbox.com/s/i9lg3nchwvgi6p3/dream.ttf);
}

#container01 >.wrapper {
width: 11.5em;
height: 16.5em;
border-radius: 20px 20px 80px 80px;
z-index: 2;
}

#container02 >.wrapper {
width: 10em;
height: 15.5em;
border-radius: 20px 20px 80px 80px;
position: absolute;
bottom: 0.5em;
left: 5.7em;
z-index: 2;
}

#container03 >.wrapper {
width: 9em;
height: 14em;
border-radius: 20px 20px 80px 80px;
position: absolute;
bottom: 1.4em;
left: 6.23em;
z-index: 2;
}

#image01 {
border-radius: 20px 20px 80px 80px;
overflow: hidden;
}

#container04 >.wrapper {
width: 1.7em;
height: 3.5em;
border-radius: 15px 15px 0 0;
position: absolute;
bottom: 16.2em;
left: 13.5em;
z-index: 1;
}

#container05 >.wrapper {
width: 1.3em;
height: 2.8em;
border-radius: 15px 15px 0 0;
position: absolute;
bottom: 16.4em;
left: 13.7em;
z-index: 1;
}

#container06 >.wrapper {
width: 7.8em;
height: 12.6em;
border-radius: 20px 20px 80px 80px;
position: absolute;
bottom: 2.2em;
left: 6.8em;
z-index: 2;
}

#text01 {
position: relative;
left: 0.1em;
}

@media only screen and (max-width: 600px) {
#text01 {
position: relative;
left: 0.1em;
}
}

#text02 {
width: 3.3em;
border: 1px solid #969696;
border-radius: 0 8px 8px 8px;
padding: 2px;
position: relative;
left: 0.4em;
}

#text03 {
width: 7.5em;
}

@media only screen and (max-width: 600px) {
#text03 {
width: 7.5em;
}
}

#text04 {
width: 6.6em;
height: 5em;
border: 1px solid #969696;
border-radius: 8px 0 8px 8px;
padding: 2px;
position: relative;
left: -2.3em;
overflow-y: scroll;
}

@media only screen and (max-width: 600px) {
#text04 {
width: 6.6em;
}
}

#text05 {
width: 7.5em;
position: absolute;
right: 0.2em;
}

@media only screen and (max-width: 600px) {
#text04 {
width: 7.5em;
}
}

#text06 mark {
font-family: dreams;
}
</style>

--- MUSIC PLAYER ---
<head>
<script src="https://kit.fontawesome.com/1953b7c367.js" crossorigin="anonymous"></script>
</head>

<style>
#music-player {
display: flex;
align-items: center;
justify-content: center;
}
#music-player {
height: 1.55em;
width: 1.55em;
font-size: 1.5em;
padding: 0.125em;
border-radius: 50%;
border: 1px solid #fff;
background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(171,189,255,1) 100%);
-webkit-filter: drop-shadow(0px 0px 1.5px #969696);
position: absolute;
bottom: 12em;
left: 3em;
z-index: 40;
-webkit-animation: spin 2s linear infinite;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite;
}
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}

} @-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform:rotate(360deg);
}
}
#music-player:hover {
-webkit-animation: pop 0.3s ease;
}
</style>

<div id="music-player"><i class="fa-solid fa-headphones"style="font-size:0.8em; color:#fff;-webkit-text-stroke: 0.5px #969696;"></i></div>
<audio id="audio" src="https://dl.dropbox.com/s/l2impfql42ku4fu/iz%20one%20dreamlike.mp3?dl=0"></audio>

<script>
document.getElementById("music-player").onclick = function() {
var audio = document.getElementById("audio");
if (audio.paused) audio.play();
else audio.pause();
};
</script>