cr d8ncer 2

--- MAIN CONTAINER ---
height: 25em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);

--- NAME TEXT ---
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;

--- POSITIONING FOR NAME TEXT ---
top: 11.45em;
left: -0.15em;

--- BUTTONS ---
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
border: 1px dotted #FFFFFF;
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000, 0 0;
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);
z-index: 999;
transform: rotate(90deg);

--- POSITIONING FOR BUTTONS ---

(BUTTONS 01)
position: absolute;
left: 19.8em;
bottom: 20em;

(BUTTONS 02)
position: absolute;
left: 19.8em;
bottom: 13.5em;

(BUTTONS 03)
position: absolute;
left: 19.8em;
bottom: 7em;

--- INFO CONTAINER ---
height: 15em;
width: 19em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);
z-index: 999;

--- POSITIONING FOR INFO CONTAINER ---
position: absolute;
left: 1em;
bottom: 6em;

--- 'ABOUT ME' & etc TEXTS ---
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);
-webkit-animation: pop 1s ease-in-out infinite alternate;
animation: pop 1s ease-in-out infinite alternate;
-moz-animation: pop 1s ease-in-out infinite alternate;

--- POSITIONING FOR 'ABOUT ME' TEXT ---
left: -0.15em;
bottom: 0.1em;

--- SCROLLBOX ---
background: #ffffffed;
height: 10.8em;
box-shadow: inset 13px 0px 6px -10px rgb(184 184 184 / 56%), inset -13px 0px 6px -10px rgb(184 184 184 / 56%), inset 0px 13px 6px -10px #ffffff, inset 0px -13px 6px -10px rgb(184 184 184 / 38%);
border: 1px dotted #FFFFFF;
border-radius: 0.25em;
padding-top: 8px;
padding-left: 0.5em;
overflow: auto;

(Text: Highlight)
font-size: 1.25em;
filter: drop-shadow( 0 1px #808080) drop-shadow( 1px 0 #808080) drop-shadow( 0 -1px #808080) drop-shadow( -1px 0 #808080) drop-shadow( 0 2.5px white) drop-shadow( 2.5px 0 white) drop-shadow( 0 -2.5px white) drop-shadow( -2.5px 0 white) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow(1px 1px 0 rgba(160, 160, 160, 0.60)) drop-shadow( 0 0 2px #808080);
margin: 0.15em;




--- ALL FONTS ---
<style>
@font-face {
src: url(https://dl.dropbox.com/s/3a1rdj7t88i1ap0/powerpuff%20girls%20font.ttf);
font-family: powerpuff;
}

@font-face {
font-family: Nintendo-DS-BIOS;
src: url(https://dl.dropbox.com/s/vlxjtnvrl9s0snp/Nintendo-DS-BIOS.ttf);
}
</style>

--- POP ANIMATION ---

<style>
@keyframes pop {
from {
transform:scale(0.95)
}

50% {
transform:scale(1)
}

to {
transform:scale(0.95)
}
}

@-webkit-keyframes pop {
from {
-webkit-transform:scale(0.95)

}

50% {
-webkit-transform:scale(1)

}

to {
-webkit-transform:scale(0.95)

}
}

</style>