cr crdskiz css codes

-- FONTS --

<style>

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

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

</style>

-- CSS CODES --

<style>

#buttons01 li a, #buttons02 li a, #buttons03 li a {
box-shadow: inset 0 7px 7px -9px white, inset 7px 0 7px -9px white, inset -7px 0 7px -9px white, inset 0 -7px 7px -9px white;
border: 1px solid #888889;
}

#buttons01 .n01, #buttons01 .n02, #buttons03 .n01, #buttons03 .n02 {
background-image: linear-gradient(0deg, rgba(103,150,194,0.62) 35%, rgba(212,229,255,0.004) 75%);
}

#buttons01 .n03, #buttons03 .n03 {
background-image: linear-gradient(0deg, rgba(181,54,54,0.788) 35%, rgba(255,107,107,0.004) 75%);
}

#container01 > .wrapper {
box-shadow: inset 7px 0 7px -7px #808080, inset -7px 0 7px -7px #808080, inset 0 -7px 7px -7px #808080;
border-radius: .5em .5em 0em 0em;
}

#container02 > .wrapper {
box-shadow: inset 7px 0 7px -7px #808080, inset -7px 0 7px -7px #808080, inset 0 -7px 7px -7px #808080;
border-radius: 0em 0em .5em .5em;
}

#container03 > .wrapper {
width: 16em;
box-shadow: inset 7px 0 7px -7px #808080, inset -7px 0 7px -7px #808080, inset 0 -7px 7px -7px #808080;
border-radius: .5em .5em 0em 0em;
}

#container04 > .wrapper {
width: 16em;
box-shadow: inset 7px 0 7px -7px #808080, inset -7px 0 7px -7px #808080, inset 0 -7px 7px -7px #808080;
border-radius: 0em 0em .5em .5em;
}

#buttons02 li a, #text01, #text02 {
font-family: windows;
}

#container03 {
position: absolute;
right: -.5em;
top: 6em;
}

#container04 {
position: absolute;
right: -.5em;
top: 8em;
}

</style>

-- SCROLLBOX CSS --

<style>

#scroll {
line-spacing: 1.15em;
font-family: windows;
background: white;
height: 8.6em;
width: 15.25em;
padding: 10px;
font-size: .875em;
overflow: auto;
border-radius:10px;
box-shadow: inset 0 7px 7px -7px white, inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
filter: drop-shadow(0px 0px 1px gray);
}

#scroll2 {
line-spacing: 1.15em;
font-family: windows;
background: white;
height: 8.6em;
width: 17em;
padding: 10px;
font-size: .875em;
overflow: auto;
border-radius:10px;
box-shadow: inset 0 7px 7px -7px white, inset 7px 0 7px -9px grey, inset -7px 0 7px -9px grey, inset 0 -7px 7px -9px grey;
filter: drop-shadow(0px 0px 1px gray);
}

mark {
background: linear-gradient(90deg, #DEB6CB, #AFCDE3, #F0D5E3, #F2C9E4, white, #ADA193);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 2px;
padding-right: 2px;
font-size: 2em;
-webkit-text-stroke: 0.5px black;
font-family: kiwi;
font-weight: bold;
letter-spacing: 1px;
line-height: .5em;
filter: drop-shadow(0px 0px 1px black);
}

</style>

-- SOUND EFFECTS --

<script>
document.getElementById('buttons03').onclick = function() {
document.getElementById('sound').play();
}

document.getElementById('buttons02').onclick = function() {
document.getElementById('sound').play();
}
document.getElementById('buttons01').onclick = function() {
document.getElementById('sound').play();
}
</script>
<audio id="sound" src="https://cdn.discordapp.com/attachments/916511538410569829/1006909357981712414/mouse_click_fx.mp3" preload="auto"></audio>

-- 7.CSS SCROLLBAR --

<style>

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