cr crdskiz 6

* PLEASE CREDIT CRDSKIZ WHEN REMAKING *

--- MAIN CONTAINER ---
height: 200px;
width: 350px;
box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px rgba(66,66,66,0.565), inset -7px 0 7px -7px rgba(66,66,66,0.565), inset 0 -7px 7px -7px #424242, 0 0 5px 2px white;
border-radius: 1em;
backdrop-filter: blur(3px);

--- IMAGE ---
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 2px 0 #DFD0DA) drop-shadow(0 -1px 0 white) drop-shadow(0 1px 1.5px #DFD0DA) drop-shadow(0 -1px 1.5px #DFD0DA) drop-shadow(1px -1px 1.5px #DFD0DA) drop-shadow(-1px -1px 1.5px #DFD0DA);
top: -1em;
position: relative;

--- NAME TEXT ---
font-family: fontanio;
filter: drop-shadow(1px 1px 0 white) drop-shadow(-1px 1px 0 white) drop-shadow(0 2px 0 #DFD0DA) drop-shadow(0 -1px 0 white) drop-shadow(0 1px 1.5px #DFD0DA) drop-shadow(0 -1px 1.5px #DFD0DA) drop-shadow(1px -1px 1.5px #DFD0DA) drop-shadow(-1px -1px 1.5px #DFD0DA);
text-shadow: 3px 3px 2px #B397C4, 3px 3px 2px #B397C4, 3px 3px 2px #B397C4, 3px 3px 2px #B397C4, 3px 3px 2px #B397C4, 3px 3px 2px #B397C4, 3px 3px 2px #B397C4;

--- MAIN SCROLLBOX ---
background: radial-gradient(circle, rgba(255,255,255,0.169), #ffffff 80%);
height: 100px;
border: 1px solid gray;
padding: 2px;
border-radius: 0.50em;
overflow: auto;

(Text: Highlight)
font-family: grandelo;
-webkit-text-stroke: 0.5px black;
font-weight: bold;
font-size: 1.5em;
line-height: 1em;

--- LEFT CONTAINER ---
height: 200px;
width: 170px;
box-shadow: inset 0 7px 7px -5px white, inset 7px 0 7px -7px rgba(66,66,66,0.565), inset -7px 0 7px -7px rgba(66,66,66,0.565), inset 0 -7px 7px -7px #424242, 0 0 5px 2px white;
border-radius: 1em;
backdrop-filter: blur(3px);
z-index: 10;

(mobile)
height: 180px;
width: 157px;

--- POSITIONING for LEFT CONTAINER ---
position: absolute;
left: 2.1em;
top: 0em;

(mobile)
left: 0em;

--- BUTTON ---
background: radial-gradient(circle, rgba(255,255,255,0.502), rgba(255,255,255,0.878) 80%);
border: 1px solid lightgray;

--- LEFT SCROLLBOX ---
background: radial-gradient(circle, transparent, rgba(255,255,255,0.878) 80%);
height: 125px;
border: 1px solid gray;
padding: 2px;
border-radius: 0.50em;
overflow: auto;

(mobile)
height: 115px;

--- LINKS ---
text-decoration: wavy underline;


--- ALL FONTS ---
@font-face {
src: url(https://dl.dropbox.com/s/nmwc5us5l9ba39d/Grandelo.ttf);
font-family: grandelo;
}

@font-face {
src: url(https://dl.dropbox.com/s/cry8wj7ib3shllq/Fontanio-Black.ttf);
font-family: fontanio;
}

--- HIDE SCROLLBAR ---
html {
overflow: scroll;
overflow-x: hidden;
}
::-webkit-scrollbar {
width: 0; /* Remove scrollbar space */
background: transparent; /* Optional: just make scrollbar invisible */
}
/* Optional: show position indicator in red */
::-webkit-scrollbar-thumb {
background: #FF0000;
}