cr iaehyn

-- FONTS --

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

@font-face {
font-family:aeroblade;
src:url(https://dl.dropbox.com/s/rp1c9fy6nef7l15/Aeroblade.ttf);
}

-- IMAGE --
position: relative;
bottom: 1.5em;
left: 0.4em;
z-index: 10;

-- NAME --
background: radial-gradient(ellipse farthest-corner at center center, #fff 10%, #f4dcb4 60%, #cc7432 90%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.6));
font-family: aeroblade;
bottom: .3em;
z-index: 99;

IF YOU HAVE A LONGER NAME USE "margin-left: -#em" REPLACE THE # WITH THE NUMBER ! THIS IS A TRIAL AND ERROR THING I WILL BE IGNORING QUERIES THAT RELATES TO THIS.

-- NAME ANIMATION --

#name {
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;
}

@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

-- NAVIGATION --
background: linear-gradient(0deg,#f4dcb4 30%, #fff 100%);
box-shadow: inset 0px 9px 5px -6px #ffffff;
padding-left: 1.5em;
padding-top: 0.1em;
padding-bottom: 0.1em;
border-radius: 0em 1em 1em 0em;
border: 1px solid #808080;
width: 14em;
left: -2em;
top: 0.5em;
position: relative;
z-index: 2;
text-shadow: -1px 0 #303030, 0 1px #303030, 1px 0 #303030, 0 -1px #303030, 0 0;

-- ON HOVER --

<style>

elementid a {
display: inline-block;
transition: .2s ease;
}

elementid a:hover {
transform: translateY(-20%);
}

</style>

-- SCROLLBOX CONTAINER --
height: 10.5em;
width: 13em;
overflow: auto;
padding-top: 10px;
padding-left: 1px;
padding-right: 1px;
position: absolute;
bottom: -.75em;
left: 10em;
box-shadow: inset 13px 0px 6px -10px rgb(66 66 66 / 15%), inset -13px 0px 6px -10px rgb(66 66 66 / 15%), inset 0px 15px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(66 66 66 / 15%);

-- SECTION TITLE --
font-family: 'fenotype';
-webkit-text-stroke: 0.05em #d38958;

-- INFO TEXT --
background: #FFFFFF;
padding-left: 4px;
padding-right: 3px;
padding-top: 7px;
padding-bottom: 3px;
border-radius: 10px;
border: 1.5px solid #cc7432;

-- HIGHLIGHT --
text-shadow: -1px 0 #303030, 0 1px #303030, 1px 0 #303030, 0 -1px #303030, 0 0;
font-size: 1.2em;
letter-spacing: .1em;
border: 1.5px solid #cc7432;
border-radius: 0px 10px 10px 0px;
padding-left: 25px;
padding-right: 25px;
padding-top: 1px;
padding-bottom: 1px;
position: relative;
left: -2em;

-- CODE --
font-size: 1em;
font-family: kosugi maru;
border-radius: 10em;
padding-left: 0.2em;
padding-right: 0em;
padding-top: 0em;
padding-bottom: 0em;

-- MUSIC PLAYER --

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

<head>
<script src="https://kit.fontawesome.com/77e60dd6da.js" crossorigin="anonymous"></script></head>

<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
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:22px;
font-size:16px;
cursor:pointer;
}

.playy, .pausee {
background: #f4dcb4;
-webkit-background-clip: text;
-webkit-text-fill-color:transparent;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #cc7432;
font-size: 22px;
color: white;
}

.pausee {
display:none;
}

</style>
<body>
<!-------MUSIC PLAYER BY GLENTHEMES------->
<div id="glenplayer02">
<div class="music-controls" onclick="songstart();">
<div class="playy" style="display: block;"><span><i class="fas fa-play-circle" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span><i class="fas fa-pause-circle" aria-hidden="true"></i></span></div></div>
</div>

<audio id="tune" src="https://cdn.discordapp.com/attachments/1011654612551487558/1064254171324358736/yt1s.com_-_Overdose_Cover.mp3"></audio>
</body>