cr crdskiz 5

* PLEASE CREDIT CRDSKIZ WHEN REMAKING *

--- FIRST CONTAINER ---
#elementID > .wrapper {
width: 275px;
height: 275px;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
border-radius: 100%;
filter: drop-shadow(0px 0px 3px white);
z-index: -1;
position: absolute;
left: -0.5em;
bottom: 1em;
}

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

--- SECOND CONTAINER ---
#elementID > .wrapper {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
filter: drop-shadow(0px 0px 3px white);
position: absolute;
right: 2.5em;
bottom: 6em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
right: -2em;
bottom: 8em;
}
}

--- THIRD CONTAINER (with MAIN INFO) ---
#elementID > .wrapper {
width: 200px;
height: 200px;
border-radius: 50%;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
filter: drop-shadow(0px 0px 3px white);
z-index: 40;
position: absolute;
bottom: -5em;
right: 3em;
}

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

--- 'MAIN INFO' SCROLLBOX ---
#elementID {
-webkit-text-stroke: 0.75px #76A167;
background: white;
border-radius: 50%;
overflow: auto;
height: 162px;
padding: 5px;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
}

#elementID u {
text-decoration: wavy underline;
}

--- FOURTH CONTAINER (with BYF INFO) ---
#elementID > .wrapper {
width: 220px;
height: 220px;
border-radius: 50%;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
filter: drop-shadow(0px 0px 3px white);
position: absolute;
left: -1em;
top: -1.8em;
}

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

--- 'BYF' SCROLLBOX ---
#elementID {
-webkit-text-stroke: 0.75px #A487C9;
background: white;
border-radius: 50%;
overflow: auto;
height: 182px;
padding: 5px;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
}

--- FIFTH CONTAINER ---
#elementID > .wrapper {
width: 120px;
height: 120px;
border-radius: 50%;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
filter: drop-shadow(0px 0px 3px white);
z-index: 25;
position: absolute;
left: 8.3em;
top: 6.3em;
}

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

--- LAST CONTAINER (with scrollbox) ---
#elementID > .wrapper {
width: 170px;
height: 170px;
border-radius: 50%;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
filter: drop-shadow(0px 0px 3px white);
z-index: 30;
position: absolute;
right: 1.5em;
top: 3.8em;
}

@media only screen and (max-width: 600px) {
#elementID > .wrapper {
right: -2.5em;
top: 4.5em;
}
}

--- 'LOVE' SCROLLBOX ---
#elementID {
-webkit-text-stroke: 0.75px #696969;
background: white;
border-radius: 50%;
overflow: auto;
height: 132px;
padding: 5px;
box-shadow: inset 0 7px 9px -0px white, inset 7px 0 7px -7px gray, inset -7px 0 7px -7px gray, inset 0 -7px 7px -7px gray;
}

--- HIGHLIGHT TEXTS ---
#elementID mark, #elementID mark, #elementID mark {
background: linear-gradient(90deg, #FC6D6D, #FCBA6D, #FCEE6D, #9BFC6D, #6DD1FC, #6F6DFC);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
padding-left: 5px;
padding-right: 5px;
padding-top: 5px;
font-size: 1.6em;
-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);
}

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

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;
}
</style>