body {
    background: linear-gradient(to bottom, #ffffff80 200%, #ffff 100%), url(https://files.catbox.moe/q7pydj.png);
    background-color: #ffffff;
    background-size: 100% 695px;
    background-position: top;
    background-repeat:no-repeat;
    font-family: 'Times New Roman', Times, serif;
    text-rendering: optimizeSpeed;
    image-rendering: optimizeQuality;
    shape-rendering: optimizeSpeed;
    font-family: Ms Gothic;
}

@font-face {
    font-family: Angelic War;
    src: url(https://files.catbox.moe/0hwgn4.ttf) format(trueType);
}

@font-face {
    font-family: Ms Gothic;
    src: url(https://files.catbox.moe/w5xihh.ttf) format(trueType);
}

::-webkit-scrollbar {
    width: 14px
    }
    
    ::-webkit-scrollbar:horizontal {
    height: 14px
    }
    
    ::-webkit-scrollbar-corner {
    background: #eee
    }
    
    ::-webkit-scrollbar-track:vertical {
    background: linear-gradient(90deg, #e5e5e5, #f0f0f0 20%);
    border-radius: 5px; 
    }
    
    ::-webkit-scrollbar-track:horizontal {
    background: linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
    border-radius: 5px; 
    }
    
    ::-webkit-scrollbar-thumb {
    border: 1.5px solid #888;
    border-radius: 5px;
    box-shadow: inset 0 -1px 1px #fff, inset 0 1px 1px #fff;
    }
    
    ::-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: 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;
    background-image: url("https://cdn.discordapp.com/attachments/904308736712138793/1001299199633141851/download.png");
    }
    
    ::-webkit-scrollbar-button:vertical {
    height: 15px
    }
    
    ::-webkit-scrollbar-button:vertical:start:decrement {
    background: white;
    background: url("https://dl.dropbox.com/s/n9ji42h9hdgdtpc/scroll3.png"), #eee;
    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 #888;
    border-radius: 5px;
    }
    
    ::-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"), #eee;
    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 #888;
    border-radius: 5px;
    }

    /*sidebar stuff*/
#bg2 {
    position: absolute;
    height: 300px;
    pointer-events: none;
    bottom: 10px;
    z-index: -2;
    filter: contrast(0) brightness(0);
    left: 150px;
}

/*sidebar vvv*/

.leftbox {
    position: absolute;
    scale: 0.85;
    pointer-events: all;
    font-smooth: never;
    -webkit-font-smoothing: none;
    font-family: 'Times New Roman', Times, serif;
}

#bg1 {
    position: absolute;
    height: 460px;
    width: 460px;
    image-rendering: pixelated;
    left:100px;
    top:100px;
    filter: saturate(70%) brightness(100%) contrast(120%);
    z-index: 50;
    animation: squish 2s ease-in;
    

    background-image: url('https://files.catbox.moe/67sneb.png');
    background-size: 400px 550px;
    background-position: center;

    -webkit-mask-image: url('https://files.catbox.moe/qfyag4.png');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    mask-image: url('https://files.catbox.moe/qfyag4.png');
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
}

#title {
    position: absolute;
    top: 450px;
    left: 400px;
    font-size: 50px;
    transform: scaleY(2);
    z-index: 70;
    text-shadow: -1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff, 0 0;
    color: black;
}

[data-tooltip]:hover::after {
    display: block;
    z-index: 999;
    font-family: 'Times New Roman', Times, serif;
    font-smooth: never;
    -webkit-font-smoothing: none;
    position: absolute;
    content: attr(data-tooltip);
    font-size: 20px;
    transform: scaleY(0.7);
    bottom: -20px;
    right: -30px;
    font-style: italic;
  }

.button-wrapper {
    position: relative;
}


.button-wrapper svg {
    position: absolute;
    pointer-events: none;
}

.button-wrapper line {
    position: absolute;
    stroke: black;
    stroke-width: 1px;
    stroke-dashoffset: 300;
    stroke-dasharray: 300;
    transition: stroke-dashoffset 0.4s ease;
}
  
.button {
    position: absolute;
    height: 60px;
    transition: all .2s ease;
    filter: saturate(50%);
    z-index: 100;
    scale: 145%;
    filter: drop-shadow(0 0 0.75rem rgb(255, 255, 255));

}

.link {
    position: absolute;
    z-index: 100;
    width: auto;
    font-size: 20px;
    text-shadow: 0 0 2px white;
}

.grow {
    pointer-events: none;
    opacity: 0;
    position: absolute;
    transition: all .2s ease;
}

.grow.active {
    opacity: 1;
    z-index: 100;
    pointer-events:auto;
}

.grow.active .link {
    z-index: 999;
}

.grow.active line {
    stroke-dashoffset: 0;
}

.button-wrapper:hover .grow {
    opacity: 1;
    pointer-events: auto;
}

.button-wrapper:hover line {
    stroke-dashoffset: 0;
}

.b1 {
    top:135px;
    left:205px;
}

.b2 {
    top:225px;
    left:145px;
}

.b3 {
    top:335px;
    left:145px;
}

.b4 {
    top:435px;
    left:195px;
}

.button:hover{
    transform: scale(2.1) rotate(5deg);
    filter: saturate(100%);
}

.bow2{
    position: absolute;
    z-index: 200;
    top: 70px;
    right: -530px;
}

.hxh{
    position: absolute;
    z-index: 200;
    top: 70px;
    right: -1920px;
}

.konata{
    position: absolute;
    z-index: 200;
    top: 607px;
    left: -19px;
}

.nichijou{
    position: absolute;
    z-index: 210;
    top: 607px;
    left: 1995px;
}

.menu_side{
    position: absolute;
    height: 1100px;
    width: 1220px;
    image-rendering: pixelated;
    top: -28px;
    left: -19px;
    z-index: 1;
}

.bar_img{
    position: absolute;
    height: 200px;
    width: 2217px;
    top: 678px;
    left: -8px;
    z-index: 3;
}

.bouncing {
/* Apply the animation */
    animation: bounce 2s infinite alternate; /* Name, duration, iteration, direction */
    transform-origin: bottom center; /* Important for scaling effects */
}

.bar{
    position: absolute;
    height: 200px;
    width: 2217px;
    top: 660px;
    left: -17px;
    z-index: 2;
    background-color: rgb(255, 255, 255);
    opacity: 0.5;
    filter: drop-shadow(0 0 0.75rem rgb(255, 255, 255));
    border-width: 10px;
    border-style: solid;
    border-image: url("https://file.garden/ZZ2PUl9MPilKgIvB/collection/borders/fp9ci4.png") 8 fill round;
      
}

div.song {
position: absolute;
top: 19px;
left: 35px;
z-index: 200;
}

.badgebox {
    position: absolute;
    z-index: 200;
    top: 890px;
    left: -15px;
    width: 2220px;
}

      
.bottom_cloud1{
    z-index: 0;
    position: absolute;
    top: -100px;
    left: 25px;
    width: 2223px;
}

.cloud1 {
    position: absolute;
    top: -11%;
    left: 5%;
    width: 1810px;
}

.cloud2 {
    position: absolute;
    top: 18%;
    width: 1898px;
}

.cloud3 {
    position: absolute;
    top: 4%;
    width: 1898px;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to { 
    transform: rotate(360deg);
  }
}

@keyframes squish {
  5% {
    transform: scale(1.2, 0.9);
  }
  10% {
    transform: scale(0.9, 1.2) translate(0, -4px);
  }
  15% {
    transform: scale(1);
  }
}

 @keyframes bounce {
        0% {
            transform: translateY(0); /* Starting position */
        }
        50% {
            transform: translateY(-50px); /* Peak of the bounce */
        }
        100% {
            transform: translateY(0); /* Return to original position */
        }
    }

img.button {
    animation-name:            rotate; 
    animation-duration:        5.5s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}