.gradient {
    background: linear-gradient(to right, white, #f1ecff);
}

.sup {
    vertical-align: super;
    font-size: 0.83em;
}

body::-webkit-scrollbar {
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: #754ffe;
    border-radius: 5px;
    border: 2px solid #e3dcff;
}

.course-sidebar-scroll {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.message-banner {
    width: 100%;
    background-color: #e3dcff;
    text-align: center;
    padding: 12px 6px;
    font-weight: bold;
    position: relative;
    z-index: 1000;
}

body.drunk {
    filter: blur(2px);
}

body.dark {
    filter: invert(1) hue-rotate(180deg);
    background-color: #1A1236;
}

body.dark .no-invert {
    filter: invert(1) hue-rotate(180deg);
}

body.boat {
    animation: 6s ease-in-out 0s infinite normal none running boat-rock;
    transform-origin: center center;
    overflow-x: hidden;
}

@keyframes boat-rock {
    0% {
        transform: rotate(-1deg) translate(0px);
    }
    50% {
        transform: rotateZ(1deg) translateY(-10px);
    }
    100% {
        transform: rotateZ(-1deg) translateY(0px);
    }
}