.buffer {
    position: relative;
    left: -10px;
    background-image: url('../assets/misc/background_tile.png');
    filter: brightness(800%);
    background-color: #393939;
    min-height: 176px;
    width: 103%;

    z-index: -1;
}

.cool-container {
    position: relative;
    left: -10px;
    background-color: #212121;
    background-attachment: fixed;
    width: 103%;

    z-index: -1;
}

.ib-dance {
    position: fixed;
    bottom: -25px;
    left: -25px;
    width: 15%;

    filter: drop-shadow(0px 0px 15px #fff);
    pointer-events: none;
}

/* GRAY BOX CODE */
.gray-box-header:active {cursor: grabbing;}
.gray-box {text-align: center;}
.gray-box img:hover {transform: scale(1.025); cursor: pointer;}
.gray-box p, .gray-box span, .gray-box summary, .gray-box h1 {font-family: 'Open Dyslexic', 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;}

.gray-box {
    width: 23%;
    overflow: hidden;
    float: left;
    display: block;
    position: absolute;

    background-color: rgba(145, 145, 145, 0.1);
    background-attachment: fixed;
    padding: 1%;
    border-radius: 25px;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;

    transform: none;
    transition: transform 0.15s cubic-bezier(.02,.19,.4,.99);

    z-index: 9;
    cursor: default;
}

.gray-box img {
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-radius: 25px;
    border-top: none;
    border-right: none;

    width: 100%;

    transition: filter 0.05s cubic-bezier(.02,.19,.4,.99), transform 0.15s cubic-bezier(.02,.19,.4,.99);
}

.gray-box img:active {
    --rotation: 0deg;
    transform: scale(0.985) rotate(var(--rotation));
    filter: saturate(150%) contrast(105%) drop-shadow(-5px 0px 2.5px #ff00a280) drop-shadow(5px 0px 2.5px #00bfff80);
}

.gray-box-header {
    width: 100%;
    height: 20px;
    background-color: rgba(199, 199, 199, 0.15);
    backdrop-filter: blur(8px);

    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-radius: 25px;
    border-top: none;
    border-right: none;

    padding: 2px;

    margin: 0px auto;
    margin-bottom: 15px;
    cursor: grab;
}

.gray-box a, .dissy-icon {
    color: rgb(131, 131, 131);
}
.gray-box a:hover, .dissy-icon:hover {
    color: rgb(180, 180, 180);
    cursor: pointer;
}

.id-left {margin-left: -10px; margin-right: auto;}
.id-right {margin-right: -10px; margin-left: auto;}
.id-left:hover, .id-right:hover {transform: scale(1.025); background-color: rgba(255, 255, 255, 0.25);}
.id-left span, .id-right span {color: whitesmoke; filter: none;}

.id-right, .id-left {
    width: 45%;
    display: inline-block;
    text-align: center;
    margin-bottom: 5px;
    font-size: 15px;
    min-height: 60px;
    max-height: 60px;
    overflow: scroll;

    background-color: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(8px);

    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-radius: 25px;
    border-top: none;
    border-right: none;

    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;

    scrollbar-width: none;
}

.click-counter b {color: rgb(220, 220, 220);}
.click-counter {
    font-style: oblique;
    margin-top: 5px;
    font-size: 12px;
    color: rgb(154, 154, 154);
}

.slider:hover {opacity: 1;}
.slider::-webkit-slider-thumb:hover {cursor: grab; transform: scale(1.05);}
.slider::-webkit-slider-thumb:active {cursor: grabbing;}

.slider::-webkit-slider-thumb {
    appearance: none;
    background-image: url("../assets/misc/tiny_yipper.png");
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    width: 48px;
    height: 48px;

    transition: transform .2s ease-in-out;
}

.slider-container {
    width: 95%;
    margin: 0px auto;
}

.slider {
    appearance: none;
    width: 90%;
    height: 10px;
    background-color: rgba(100, 100, 100, 0.1);
    backdrop-filter: blur(8px);
    
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    opacity: 0.75;
    border-style: inset;
    border-radius: 15px;

    transition: opacity .2s;
}

.gooby {
    margin-left: auto;
    margin-right: -10px;
    display: block;
    width: 72%;
    text-align: center;
    font-weight: lighter;
    font-family: monospace;

    background-color: rgba(188, 188, 188, 0.25);
    background-attachment: fixed;
    padding: 1%;
    border-radius: 25px;
    backdrop-filter: blur(8px);
    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-top: none;
    border-right: none;
}

.gooby h1, .gooby p {animation: gooby-bounce 3.6s cubic-bezier(0.175, 0.885, 0.320, 1.275) infinite both;}
.fucko {animation: fucko 5s ease-in-out infinite both; transform: translate(0px, 25px); letter-spacing: 8px;}

@keyframes gooby-bounce {
    0% {transform: scale3d(1, 1, 1);}
    7.5% {
        transform: scale3d(1.05, 0.95, 1);
        opacity: 0.5;
        letter-spacing: 1px;
    }
    10% {
        transform: scale3d(0.95, 1.05, 1);
        opacity: 1;
        letter-spacing: 0px;
    }
    12.5% {transform: scale3d(1.025, 0.95, 1);}
    16.25% {transform: scale3d(0.975, 1.025, 1);}
    13.75% {transform: scale3d(1.025, 0.975, 1);}
    25% {transform: scale3d(1, 1, 1);}
    100% {transform: scale3d(1, 1, 1);}
}

@keyframes fucko {
    0% {transform: translate(0px, -25px) rotateX(45deg); letter-spacing: 8px;}
    50% {transform: translate(0px, 25px) rotateX(-45deg); letter-spacing: 8px;}
    100% {transform: translate(0px, -25px) rotateX(45deg); letter-spacing: 8px;}
}

#confetti {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    transition: opacity 3s ease-in-out;
}

.block-left, .block-right {width: 47%; contain: layout;}
.block-left {float: left;}
.block-right {float: right;}
.block-center {width: 100%; contain: layout;}
.block-right details summary {background-color: rgb(105, 105, 105);}

.block-right details[open] > summary {
    border-radius: 15px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.dislikes-rant {
    padding: 10px;
    margin-top: 0px;

    background-color: rgba(130, 130, 130, 0.15);
    backdrop-filter: blur(8px);

    border: 1.5px solid rgba(199, 199, 199, 0.5);
    border-radius: 15px;
    border-top: none;
    border-right: none;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}