cr crdskiz (pro standard)

* PLEASE CREDIT CRDSKIZ WHEN REMAKING *

--- MAIN CONTAINER ---
#elementID > .wrapper {
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 ---
#elementID .frame {
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);
position: relative;
top: -0.5em;
}

--- NAME TEXT ---
#elementID {
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 ---
#elementID {
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;
}

--- HIGHLIGHT TEXTS ---
mark {
font-family: grandelo;
-webkit-text-stroke: 0.5px black;
font-weight: bold;
font-size: 1.5em;
line-height: 1em;
}

--- LEFT CONTAINER ---
#elementID > .wrapper {
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;
position: absolute;
left: 2.1em;
top: 0em;
}

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

--- BUTTON ---
#elementID li a {
background: radial-gradient(circle, rgba(255,255,255,0.502), rgba(255,255,255,0.878) 80%);
border: 1px solid lightgray;
}

--- LEFT SCROLLBOX ---
#elementID {
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;
}

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

--- RIGHT CONTAINER ---
#elementID > .wrapper {
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;
right: 1.85em;
}

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

--- RIGHT SCROLLBOX ---
#elementID {
background: radial-gradient(circle, transparent, rgba(255,255,255,0.878) 80%);
height: 100px;
border: 1px solid gray;
padding: 2px;
border-radius: 0.50em;
overflow: auto;
}

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

--- LINKS SCROLLBOX ---
#elementID {
background: radial-gradient(circle, transparent, rgba(255,255,255,0.878) 80%);
height: 60px;
border: 1px solid gray;
padding: 2px;
border-radius: 0.50em;
overflow: auto;
}

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

#elementID a {
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;
}