cr d8ncer

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

@font-face {
font-family: windows;
src: url(https://dl.dropbox.com/s/cn0l1yjacta4whv/W95FA.otf);
}

-- CONTAINERS --
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);

-- SECTION TITLE 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);

-- MAIN CONTAINER --
width: 20em;
height: 23em;

-- BUTTON CONTAINER --
transform: rotate(90deg);
position: absolute;
right: -10em;
top: 9.5em;
z-index: 999;

-- BUTTONS --
font-family: windows;
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);

-- SECTION CONTAINER --
width: 17em;
height: 14.5em;
position: absolute;
left: 2em;
bottom: 6em;

-- SECTION TEXT / SITE NAME FONT --
font-family: powerpuff;

-- SITE NAME --
position: relative;
top: 9em;

-- SITE NAME ON HOVER --
text-decoration: none;

-- SCROLLBOX --
font-family: windows;
background: rgba(255,255,255,0.8);
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: 10px;
overflow-y: scroll;
height: 12.5em;
color: black;

-- HIGHLIGHT / MARK --
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);
background: none;
padding-right: 5px;
color: black;

-- SCROLLBAR --
::-webkit-scrollbar {
width: 16px;
height: 16px;
}

::-webkit-scrollbar-track {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFElEQVQIW2M4fPz0////GYAYyAIASnoKpV3w4kgAAAAASUVORK5CYII=");
image-rendering: pixelated;
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

::-webkit-scrollbar-track:active {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAEElEQVQIW2No6+pjgAAgCwAWogM9VKrgGQAAAABJRU5ErkJggg==");
-webkit-filter: grayscale(100%);
-moz-filter: grayscale(100%);
-ms-filter: grayscale(100%);
-o-filter: grayscale(100%);
filter: grayscale(100%);
}

::-webkit-scrollbar-thumb {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
width: 16px;
height: 16px;
background-color: #cccccc;
z-index: 1;
}

::-webkit-scrollbar-corner {
background-color: #cccccc;
}

::-webkit-resizer {
width: 16px;
height: 16px;
background-color: #cccccc;
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAN0lEQVR4Ae3MgQUAMBRDwU5fFF05lb/CARTBw2Ulof0DxPtcwp3hNuEYnjbcEW4TjuFpwx3h9gMWGgZ2Y/PT2gAAAABJRU5ErkJggg==");
background-position: bottom right;
background-repeat: no-repeat;
image-rendering: pixelated;
}

::-webkit-scrollbar-button, ::-webkit-scrollbar-button {
border-top: 1px solid #cccccc;
border-left: 1px solid #cccccc;
border-right: 1px solid black;
border-bottom: 1px solid black;
box-shadow: inset 1px 1px 0 0 white, inset -1px -1px 0 0 #868a8e;
display: block;
width: 16px;
height: 16px;
background-color: #cccccc;
image-rendering: pixelated;
background-repeat: no-repeat;
background-position: center center;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
background-position: 2px 2px;
}

::-webkit-scrollbar-button:horizontal:decrement, ::-webkit-scrollbar-button:horizontal:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHklEQVQY02NgoBT8xyX8H5fwf1zCpOjAYwceV1EEAAO2D/HsQ4vsAAAAAElFTkSuQmCC");
}

::-webkit-scrollbar-button:horizontal:increment, ::-webkit-scrollbar-button:horizontal:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAHUlEQVQY02NgIB/8xy3xH7fEf9wS/0nUQZqrKAYAK44P8ZRmzLQAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:decrement, ::-webkit-scrollbar-button:vertical:decrement {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAAGklEQVR4AWMYxuA/SYphmETFhDX9x4mHGQAAcL4P8dQiMq8AAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:vertical:increment, ::-webkit-scrollbar-button:vertical:increment {
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAQAAAD8fJRsAAAAF0lEQVQY02NgoBf4jwJxSOHQhcNAOgMAWWAP8Rv2U3UAAAAASUVORK5CYII=");
}

::-webkit-scrollbar-button:horizontal:increment:start, ::-webkit-scrollbar-button:horizontal:increment:start {
display: none;
}

::-webkit-scrollbar-button:horizontal:decrement:end, ::-webkit-scrollbar-button:horizontal:decrement:end {
display: none;
}

::-webkit-scrollbar-button:vertical:increment:start, ::-webkit-scrollbar-button:vertical:increment:start {
display: none;
}

::-webkit-scrollbar-button:vertical:decrement:end, ::-webkit-scrollbar-button:vertical:decrement:end {
display: none;
}

::-webkit-scrollbar-button:active, ::-webkit-scrollbar-button:active {
border-top: 1px solid #868a8e;
border-left: 1px solid #868a8e;
border-bottom: 1px solid #868a8e;
border-right: 1px solid #868a8e;
box-shadow: none;
}