cr crdskiz 7

** PLEASE ADJUST THE POSITIONING, WIDTH & HEIGHT CODES IF IT DOESN'T LOOK GOOD ON YOUR DEVICE **


--- MISC ---

<style>

@font-face {
font-family: kiwi;
src: url(https://dl.dropbox.com/s/388cvx0do21kj3n/KiwiSoda.ttf);
}

@font-face {
font-family: romantics;
src: url(https://dl.dropbox.com/s/22ucjgki60vvnpe/romantic.ttf);
}


::-webkit-scrollbar {
width: 16px
}

::-webkit-scrollbar:horizontal {
height: 17px
}

::-webkit-scrollbar-corner {
background: #eee
}

::-webkit-scrollbar-track:vertical {
background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-track:horizontal {
background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%)
}

::-webkit-scrollbar-thumb {
border: 1.5px solid #888;
border-radius: 3px;
box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
background-color: #eee;
}

::-webkit-scrollbar-thumb:vertical {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(90deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-thumb:horizontal {
background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC") no-repeat 50%, linear-gradient(180deg, #eee 45%, #ddd 0, #bbb)
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
display: block
}

::-webkit-scrollbar-button:vertical {
height: 17px
}

::-webkit-scrollbar-button:vertical:start:decrement {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

::-webkit-scrollbar-button:vertical:start:increment {
display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
background: white;
background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299200052576387/87ae92e1-3894-4469-b1b9-aedf5f04975c.png");
background-repeat: no-repeat;
background-position: center;
-moz-background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

</style>


--- MAIN CONTAINER ---

#elementID {
border-width: 8px;
border-style: solid;
border-image: url("https://dl.dropbox.com/s/waypvz83lxt0lgt/untitled147_20221027200658.png") 17% round;
}

#elementID > .wrapper {
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 9px -7px gray, inset -7px 0 9px -7px gray, inset 0 -7px 9px -7px gray;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
height: 240px;
}
}


--- MY MENU TEXT ---

#elementID {
-webkit-text-stroke: .8px black;
text-shadow: 1px 1px 5px white;
font-family: kiwi;
}

--- BUTTONS ---

#elementID li a {
border-radius: 0em 1em 1em 0em;
box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray, 3px 2px 6px 0px rgba(0,0,0,0.502);
position: relative;
left: -.65em;
}

--- CREDITS ---

credits to crdskiz

--- MUSIC PLAYER ---

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="https://static.tumblr.com/gtjt4bo/QRmphdsdv/glenplayer02.js"></script>
<head>
<script src="https://kit.fontawesome.com/610c820504.js" crossorigin="anonymous"></script>
<style type="text/css">
/*-------MUSIC PLAYER BY GLENTHEMES-------*/
#glenplayer02 {
position: absolute;
top: 0.5em;
right: 0.6em;
display:flex;
z-index:9;
}

#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 {
-webkit-background-clip: text;
-webkit-text-fill-color: #FFFFFFD0;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #808080;
font-size: 22px;
}

.pausee { display:none; }

</style>
<body>
<div id="glenplayer02"><div class="music-controls" onclick="songstart();"><div class="playy" style="display: block;"><span><i class="fa-solid fa-volume-low" aria-hidden="true"></i></span></div>
<div class="pausee" style="display: none;"><span><i class="fa-solid fa-volume-high" aria-hidden="true"></i></span></div></div></div>

<audio id="tune" src="linkurl"></audio></body>


--- INFO CONTAINERS ---

#elementID > .wrapper {
width: 235px;
border-radius: 1em 0.25em 0.25em 1em;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 9px -7px gray, inset -7px 0 9px -7px gray, inset 0 -7px 9px -7px gray;
z-index: 90;
position: absolute;
right: 0.45em;
bottom: 0.45em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
width: 180px;
height: 240px;
bottom: 0.5em;
}
}

--- LINKS ---

find me: [link name](#) ❥ [link name](#) ❥ [link name](#)

--- LABEL TEXTS ---

#elementID, #elementID {
font-family: romantics;
-webkit-text-stroke: 0.5px black;
text-shadow: 1.5px 1.5px .5px gray, -1.5px -1.5px .5px white;
margin-bottom: -7px !important;
z-index: 8;
}

--- SCROLLBOXES ---

#elementID, #elementID {
box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
background: white;
border-radius: 0.5em 0em 0em 0.5em;
height: 100px;
padding: 5px;
overflow: auto;
border: 1px solid #6E6E6E;
}

@media only screen and (max-width: 600px) {
#elementID, #elementID {
height: 80px;
}
}

--- LINK TEXT ---

#elementID a {
text-decoration: dotted underline;
}