@font-face {
    font-family: "vinyl"; 
    src: url("/fonts/vinyl.ttf") format("truetype");
}

@font-face {
    font-family: "elegance"; 
    src: url("/fonts/elegance.ttf") format("truetype");
}

::selection {
  color: #000;
  background: rgba(255, 0, 0, 0);
}

a:hover{
cursor: url("/cursors/converse.png"), default;
}

body::before {
content: " ";
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.3) 50%);
z-index: 100;
background-size: 100% 2px, 3px 100%;
pointer-events: none;
}

body{
cursor: url("/cursors/converse.png"), default;
background-image: url('deco/greenbg.png');
background-size: 100%;
height: 1366px;
width: 633px;
overflow-x: hidden;
overflow-y: hidden;
color: #000;
z-index: 1;
}

#container{
background-color: #bbbfa4;
width: 925px;
height: 381px;
position: absolute;
left: 220px;
top: 195px;
border: 3px double #777964;
box-shadow: inset 0px 0px 10px #d6d8bd, 0px 0px 5px #000000;
 background-image: url('deco/skull.png');
  background-position: left 650px bottom -20px;
  background-repeat: no-repeat;
z-index: 3;
}

#floatie{
background-color: #babdae;
width: 300px;
height: 300px;
position: absolute;
left: 140px;
top: 240px;
overflow-x: hidden;
overflow-y: hidden;
border: 1px solid #000;
box-shadow: inset 0px 0px 10px #e1e3d1, 0px 0px 5px #000000;
z-index: 5;
}

#holder{
background-color: #;
width: 510px;
height: 335px;
padding: 3px;
position: absolute;
left: 250px;
top: 20px;
overflow-x: hidden;
overflow-y: scroll;
border: 1px solid #777964;
box-shadow: 0px 0px 3px #d6d8bd, inset 0px 0px 1px #000000;
z-index: 3;
}

#img{
 border: 1px solid #000;
 width: 65px;
 height: 65px;
 margin: 0px;
 display: inline-block;
}

#img:hover {
    filter: none ;
}

.colour1{
filter: contrast(80%) sepia(100%) hue-rotate(-310deg) saturate(3.8) brightness(0.3);
}

.colour2{
filter: invert(80%) contrast(110%) sepia(100%) hue-rotate(-310deg) saturate(2) brightness(0.4);
}

.colour3{
filter: contrast(50%) sepia(100%) hue-rotate(-310deg) saturate(2.3) brightness(0.45);
}


.blackcolour1{
filter: contrast(80%) sepia(100%) hue-rotate(-310deg) saturate(1) brightness(0.3);
}

.blackcolour2{
filter: invert(80%) contrast(140%) sepia(100%) hue-rotate(-310deg) saturate(1) brightness(0.2);
}

.blackcolour3{
filter: contrast(90%) sepia(100%) hue-rotate(-310deg) saturate(1) brightness(0.6);
}

a{
text-decoration: none;
}

#chibi{
position: absolute;
left: 1000px;
top: 260px;
pointer-events: none;
z-index: 10;
}

#logo{
position: absolute;
left: 240px;
top: -10px;
font-family: vinyl;
font-size: 130px;
font-weight: 400;
-webkit-text-stroke: 1px #bbbfa4; 
color: #000;
z-index: 10;
}

#heart{
position: absolute;
left: 130px;
top: 90px;
pointer-events: none;
z-index: 2;
}

#frame{
position: absolute;
left: 141px;
top: 241px;
pointer-events: none;
z-index: 10;
}

#splat{
position: absolute;
left: 30px;
top: 190px;
pointer-events: none;
z-index: 4;
}

#back{
  font-family: vinyl;
  font-size: 120px;
  font-weight: 400;
  position:absolute;
  left: 15px;
  top: -150px;
  z-index: 50;
}

a{
font-family: vinyl;
-webkit-text-stroke: 1px #000; 
color: #bbbfa4;
text-decoration: none;
}

#musicplayer{
background-color: #;
margin: 0px;
width: 220px;
height: 15px;
padding: 0px;
overflow-x: hidden;
overflow-y: hidden;
z-index: 4;
position:absolute;
top: 585px;
left: 860px;
}


       ::-webkit-scrollbar {
        width: 8px;
        }

        ::-webkit-scrollbar:horizontal {
        height: 6px;
        }

        ::-webkit-scrollbar-corner {
        background: #777964;
        }

        ::-webkit-scrollbar-track:vertical {
        background-color: rgba(255,0,0,0);
        }

        ::-webkit-scrollbar-track:horizontal {
        background-color: rgba(255,0,0,0);
        }

        ::-webkit-scrollbar-thumb {
        border: 1.5px solid #777964;
        box-shadow: inset 0 -1px 1px #777964, inset 0 1px 1px #777964;
        }

        ::-webkit-scrollbar-thumb:vertical {
        background: linear-gradient(90deg, #CBCEB9 45%, #777964 0, #CBCEB9);
        }

        ::-webkit-scrollbar-thumb:horizontal {
        background: linear-gradient(180deg, #CBCEB9 45%, #777964 0, #CBCEB9);
        }

        ::-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: 10px;
        }

        ::-webkit-scrollbar-button:vertical:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #CBCEB9;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #777964;
        }

        ::-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: url("https://dl.dropbox.com/s/cdcco6pih7n1lae/scroll4.png"), #CBCEB9;
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        border: 1.5px solid #777964;
        }

        ::-webkit-scrollbar-button:horizontal {
        width: 10px
        }
        ::-webkit-scrollbar-button:horizontal:start:increment {
        display: none;
        }
        ::-webkit-scrollbar-button:horizontal:end:decrement {
        display: none;
        }

        ::-webkit-scrollbar-button:horizontal:start:decrement {
        background: white;
        background: url("https://dl.dropbox.com/s/xcm618ghd823271/scroll5.png"), linear-gradient(180deg, #e5e5e5, #777964 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border: 1.5px solid #777964;
        }

        ::-webkit-scrollbar-button:horizontal:end:increment {
        background: white;
        background: url("https://dl.dropbox.com/s/byeyi7am889ii9m/scroll6.png"), linear-gradient(180deg, #e5e5e5, #777964 20%);
        background-repeat: no-repeat;
        background-position: center;
        -moz-background-size: 100% auto, cover;
        -webkit-background-size: 100% auto, cover;
        -o-background-size: 100% auto, cover;
        background-size: 100% auto, cover;
        background-position: center;
        border: 1.5px solid #777964;
        }