html {
    overflow-x: hidden !important;
    height: 100% !important;
}

body {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    min-height: 100% !important;
    position: relative !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.background-canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

::-webkit-scrollbar {
    width: 0px !important;
    height: 0px !important;
    background: transparent !important;
}

::-webkit-scrollbar-track {
    background: transparent !important;
}

::-webkit-scrollbar-thumb {
    background: transparent !important;
    border-radius: 0px !important;
}

::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

* {
    scrollbar-width: none !important;
    scrollbar-color: transparent transparent !important;
}

* {
    -ms-overflow-style: -ms-autohiding-scrollbar !important;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

main {
    position: relative !important;
    z-index: 10 !important;
    min-height: 100vh !important;
    width: 100% !important;
    /* padding: 20px !important; */
}

nav.fixed {
    z-index: 50 !important;
    background: transparent !important;
}

@media (max-width: 768px) {
    .background-canvas {
        opacity: 0.8 !important;
    }
    body {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }
    * {
        -webkit-tap-highlight-color: transparent !important;
    }
}

.content-container {
    position: relative !important;
    z-index: 10 !important;
    height: 100% !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

.scroll-container::-webkit-scrollbar {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.scroll-container:hover::-webkit-scrollbar {
    opacity: 1;
}

@supports (-webkit-touch-callout: none) {
    body {
        height: -webkit-fill-available !important;
    }
    .background-canvas {
        height: -webkit-fill-available !important;
    }
}

.fade-on-scroll {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fade-on-scroll.hidden {
    opacity: 0;
}