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

::-webkit-scrollbar-track {
    background: #1B1B1B;
}

::-webkit-scrollbar-thumb {
    background: #494949;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #3C3C3C;
}

::-webkit-scrollbar-thumb:active {
    background: #333333;
}

html:not(.dark)::-webkit-scrollbar-track {
    background: #F3F4F6;
}

html:not(.dark)::-webkit-scrollbar-thumb {
    background: #B8B8B8;
}

html:not(.dark)::-webkit-scrollbar-thumb:hover {
    background: #9A9A9A;
}

html:not(.dark)::-webkit-scrollbar-thumb:active {
    background: #7D7D7D;
}

html {
    height: 100%;
    scroll-behavior: smooth;
    user-select: none;
    scrollbar-width: thin;
    scrollbar-color: #494949 #1B1B1B;
}

html:not(.dark) {
    scrollbar-color: #B8B8B8 #F3F4F6;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

img {
    -webkit-user-drag: none;
    user-drag: none;

    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.fade-in {
    animation: fadeIn 0.4s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.img-loaded {
    opacity: 1 !important;
}

html:not(.dark) .site-logo {
    filter: invert(1);
}