xn--dq8h crd codes

hi! please let me know if i'm missing an embed here; i'll add it immediately. credit biogger99 when remaking this carrd!

---- alba font ----
@font-face {
font-family: ALBA;
src: url(https://dl.dropbox.com/s/0l4qryezh7ac9ls/ALBA____.TTF);
}

---- container border ----
-webkit-filter: drop-shadow(0px 0px 2px #FFA4D6);
border: 2px solid white;
border-radius: 10px 10px 10px 10px;

---- for about / guidelines ----
font-family: ALBA;
-webkit-text-stroke: 0.5px #FFA4D6;
-webkit-filter: drop-shadow(0px 0px 1px #fff);
background-image: radial-gradient( #ffd1eb 20%, #ffd1eb 20% , transparent 60%);

---- for white container (info containers) ----
background: rgba(255, 255, 255, 0.9);
border-radius: 10px 10px 10px 10px;
height:13.4em;
margin-bottom: 1.1em;
position: absolute;
left: 1em;
bottom:-1em;
z-index:500;

---- for text (info w/ color background) ----
width: 95%;
margin: auto;
padding: .5em;
background: #ffd1eb;
box-shadow: 0 0 0.3em 0.3em #ffd1eb;
border-radius: 5px;

---- for ⊠ ----
font-size:1.5em;
position:relative;
bottom:0.1em;
-webkit-text-stroke: 0.1px #FFA4D6;
color: white;

---- for header texts (about me/things to know about) ----
position:absolute;
left: 0.5em;
top: 0.6em;
z-index:100;
font-family: ALBA;
font-size: 1.7em;
-webkit-text-stroke: 0.5px #FF95CD;
-webkit-filter: drop-shadow(0px 0px 1px #FF95CD);
background: none;

---- music player ----
<head>
<script src="https://kit.fontawesome.com/8119dfca45.js" crossorigin="anonymous"></script>
</head>

<style>
#music-player {
display: flex;
align-items: center;
justify-content: center;
}
#music-player {
height: 1.425em;
width: 1.425em;
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(255,209,235,1) 100%);
-webkit-filter: drop-shadow(0px 0px 1.5px #FF95CD);
position: absolute;
bottom:0.5em;
left:0.5em;
z-index: 100;
-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="fas fa-headphones"style="font-size:.7em; color:#fff;-webkit-text-stroke: 0.5px #ffd1eb;"></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>