@keyframes raisebar { 100% { bottom: 0; } }

    #scrollbar {
        width: 100%;
        position: fixed;
        bottom: -10vmin;
        height: 10vmin;
        white-space: nowrap;
    }

    #hideSplash:checked ~ #main > #scrollbar {
        animation: raisebar 0.5s 3.2s ease-out forwards;
    }

    #scrollbar > *{
        position: absolute;
        background-repeat: no-repeat;
        margin: 0;
        padding: 0;
        height: 100%;
    }
    #leftscroll, #rightscroll {
        bottom: 0;
        background-image: url(/images/scrollbar.svg);
    }
    #leftscroll, #rightscroll {
        width: 20vmin;
        background-size: 300% 100%;
    }
    #leftscroll {
        background-position: top left;
        left: 0;
    }
    #rightscroll {
        background-position: top right;
        right: 0;
    }
    #midscroll {
        background-image: url(/images/bar.png);
        background-position: top center;
        background-size: 100% 100%;
        width: calc(100vw - 40vmin);
        left:  calc(20vmin);
        bottom: 0;

        -webkit-appearance: none;
        outline: none;
        background-color: transparent;
    }
    #midscroll::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 6vmin;
        height: 6vmin;
        border: 0;

        background-image: url(https://luckeyproductions.nl/images/scrollknot.svg);
        background-size: contain;
        background-repeat: no-repeat;
        cursor: grab;
    }

    #midscroll::-moz-range-thumb {
        width: 6vmin;
        height: 6vmin;
        border: 0;
        background-color: transparent;
        background-image: url(https://luckeyproductions.nl/images/scrollknot.svg);
        background-size: contain;
        background-repeat: no-repeat;
        cursor: pointer;
    }
    #midscroll::-moz-range-track {
        background-color: transparent;
    }
    #midscroll::-webkit-slider-runnable-track {
        background-color: transparent;
    }

/*        transform-origin: 50% calc((7vh + 17vw - 5vmax) * 27);
        animation: sway 2s alternate ease-in-out infinite;*/
    }
@keyframes sway {
    0% {
        transform: rotate(-3deg);
    }
    100% {
        transform: rotate(3deg);
    }
}