cr soracrds embeds

-- TITLE --
<link rel="stylesheet" href="https://unpkg.com/98.css">
<div class="window" style="box-shadow:inset -1px -0px #0a0a0a,inset 1px 1px #fff,inset -2px -0px #E8E8E8,inset 2px 2px #E8E8E8;">
<div class="title-bar" style="background: linear-gradient(90deg, #1400FF, #fff);">
<div class="title-bar-text" style="color: #fff;">
ai hoshino
</div>
<div class="title-bar-controls">
<button aria-label="Minimize">
</button><button aria-label="Maximize">
</button><button aria-label="Close">
</button></div></div></div>

-- IMPORTANT --

body {
font-size: 1em !important; }

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

@font-face {
font-family:'kosmos';
src: url(https://dl.dropbox.com/s/olyigvm99jgmn8h/PLANK___.TTF);
}

-- GLOW TEXT --
@keyframes glow {
0% {
text-shadow: 0 0 15px blue;
}

50% {
text-shadow: none;
}

100% {
text-shadow: 0 0 15px blue;
}
}

@-webkit-keyframes glow {
0% {
text-shadow: 0 0 15px blue;
}

50% {
text-shadow: 0 0 0;
}

100% {
text-shadow: 0 0 15px blue;
}
}

#glow {
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #fff;
font-weight:bold;
font-size:2em;
-webkit-animation: glow 2.0s linear infinite;
-moz-animation: glow 2.0s linear infinite;
-ms-animation: glow 2.0s linear infinite;
-o-animation: glow 2.0s linear infinite;
animation: glow 2.0s linear infinite;
}

-- SPINNING CD --
<style>
lol {
}

.img1 { /* cd image u can change the size too */
width: 3.5em;
height: 3.5em;
position: absolute;
right: -1em;
bottom: 0em;
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>

-- MUSIC PLAYER --
<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 {
position:relative;
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: 1.1em; 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.75em;
color:#000; /* color of music note symbol */
}

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

</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 IDOL BY YOASOBI </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://cdn.discordapp.com/attachments/1011654612551487558/1098138983696977940/yt1s.com_-_YOASOBI_Official_Music_Video.mp3"></audio>
</body>