cr anastasia

-- FONTS --

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

@font-face {
font-family:'fenotype';
src: url(https://dl.dropbox.com/s/klo6yfrf62916qp/02.10FEN.TTF);
}

-- MAIN CONTAINER --

box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
width: 65%;
height: 8em;
overflow: auto;

-- NAME --

font-family:'fenotype';
position: absolute;
right: 3em;
bottom: 7.5em;
text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;

-- BUTTONS --

border: 1px solid #261a19;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
font-family: windows;

-- INFO --
background: rgba(255,255,255,0.5);
border-radius: .5em;
padding: 5px;

-- HIGHLIGHT / MARK --

font-family:'fenotype';
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
padding-left: 5px;
padding-right: 5px;
border-radius: 20px;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 20%), inset -13px 0px 6px -10px rgb(66 66 66 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 38%);
border: 1px solid #261a19;
margin-right: .25em;

-- MUSIC --

<head>
<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>

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

</head>

<style type="text/css">

@font-face {
font-family: 'music';
src: url(https://cdn.glitch.me/9bbfdfb3-4bfa-4c39-8743-5621c8b9df21/LL_RECOR.TTF);
}

@font-face {
font-family: Pixelated MS Sans Serif;
src:url(ms_sans_serif.woff) format("woff");
src:url(ms_sans_serif.woff2) format("woff2");
}

/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
display:flex;
background: #C2C2C2;
padding: .2em;
border: 3px solid;
border-style: inset;
margin: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
width:auto;
}

#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;
font-family: 'music';
}

.playy, .pausee {font-family: 'music'; font-size: .75em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; } /* color of play & pause buttons */

.pausee {display:none;}

.sonata {
margin-left:0.4em;
font-family: Pixelated MS Sans Serif;
font-size:0.625em;
color:#000; /* color of music note symbol */
}

.labeltext {
margin-left:0.5em;
position: relative;
bottom:0.1em;
font-size:14px;/* color of song title */
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy">d</div>
<div class="pausee">k</div>
</div>
<div class="sonata">MP3 </div>
<div class="labeltext"><img src="https://64.media.tumblr.com/tumblr_ll7wpyHlj71qi6qow.gif"> <span style="font-family: 'music'; font-size: 1.1em; color: #F38BC8; -webkit-text-stroke: 0.5px #000; margin-top: -0.2em; margin-bottom: 0.1em; ">o</span></div>
</div><!--end music player-->

<audio id="tune" src="https://drive.google.com/uc?export=download&id=1_NHDLb9goEYZk8G7uWKY812j2JNqgpMu"></audio>
</body>

-- CD --

<style>
lol {
}

.img1 { /* cd image u can change the size too */
width: 5em;
height: 5em;
position: absolute;
right: -1em;
bottom: 4em;
z-index: 800;
-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);
}
}
.img1:hover { /* this makes the cd stop spinning when hovering! */
-webkit-animation: pop 0.3s ease;
}
</style>
<body>
<div id="lol"><img class="img1" src="https://cdn.discordapp.com/attachments/822589056256311328/890714753780031488/image0.png" width="auto" height="45px"></div>