cr crdskiz 3

*MAKE SURE TO ALWAYS CHECK THE ELEMENT ID AND CHANGE/ADD IT IF IT DOESN'T MATCH YOURS. THE POSITIONING CODES ARE ALSO MADE TO LOOK GOOD ON MY DEVICE, SO PLEASE ADJUST IT IF IT DOESN'T FIT YOURS.*


--- FIRST BUTTON ---
#buttons01 li a {
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;
border-radius: 50%;
font-family: romantics;
-webkit-text-stroke: 0.5px black;
text-shadow: 1.5px 1.5px .5px gray, -1.5px -1.5px .5px white;
z-index: 20;
position: absolute;
right: 1.8em;
bottom: 2.5em;
}

@media only screen and (max-width: 600px) {
#buttons01 li a {
bottom: 3.5em;
right: 2em;
}
}

--- SECOND BUTTON ---
#buttons02 li a {
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;
border-radius: 50%;
font-family: romantics;
-webkit-text-stroke: 0.5px black;
text-shadow: 1.5px 1.5px .5px gray, -1.5px -1.5px .5px white;
z-index: 20;
position: absolute;
right: 0.7em;
bottom: 0.8em;
}

@media only screen and (max-width: 600px) {
#buttons02 li a {
bottom: 1.8em;
right: 0.9em;
}
}

--- THIRD BUTTON ---
#buttons03 li a {
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;
border-radius: 50%;
font-family: romantics;
-webkit-text-stroke: 0.5px black;
text-shadow: 1.5px 1.5px .5px gray, -1.5px -1.5px .5px white;
z-index: 20;
position: absolute;
right: 0.1em;
bottom: -1em;
}

@media only screen and (max-width: 600px) {
#buttons03 li a {
bottom: 0em;
right: 0.3em;
}
}

--- MAIN CONTAINER ---
#container01 > .wrapper {
border-radius: 50%;
width: 170px;
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;
z-index: 10;
position: absolute;
bottom: -5em;
right: 3em;
}

--- IMAGE ---
#image01 .frame {
box-shadow: 0rem 0rem 0.5rem 0rem #6E6E6E;
}

--- CONTAINER with SCROLLBOX ---
#elementID > .wrapper {
height: 200px;
width: 170px;
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;
border-radius: 1em 1em 0em 1em;
z-index: 11;
position: absolute;
bottom: -5em;
left: 2.5em;
}

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

--- NAME, RULES & LIKES TEXTS ---
#elementID {
font-family: romantics;
padding-top: 2px;
-webkit-text-stroke: 0.75px black;
text-shadow: 2px 2px .5px gray, -2px -2px .5px white, 0px 0px 12px darkgray;
z-index: 12;
}

--- SCROLLBOX ---
#elementID {
overflow: auto;
height: 130px;
background: #B0B9D980;
border-radius: 0.5em;
padding: 5px;
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;
}

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

--- HIGHLIGHTED TEXT ---
#elementID mark {
font-family: romantics;
-webkit-text-stroke: 0.5px black;
font-weight: bold;
text-shadow: 1.5px 1.5px .5px gray, -1.5px -1.5px .5px white;
letter-spacing: 3px;
font-size: 1.3em;
}



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

--- SCROLLBAR ---

<style>
::-webkit-scrollbar { width: 16px } ::-webkit-scrollbar:horizontal { height: 17px } ::-webkit-scrollbar-corner { background: #eee } ::-webkit-scrollbar-track:vertical { background: linear-gradient(90deg, #e5e5e580, #f0f0f080 20%) } ::-webkit-scrollbar-track:horizontal { background: linear-gradient(180deg, #e5e5e580, #f0f0f080 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>