@font-face {
    font-family: "clashDisplay-Bold";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Bold.otf);
}

@font-face {
    font-family: "clashDisplay-Light";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Light.otf);
}

@font-face {
    font-family: "clashDisplay-Medium";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Medium.otf);
}

@font-face {
    font-family: "clashDisplay-Regular";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Regular.otf);
}

@font-face {
    font-family: "clashDisplay-SemiBold";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-SemiBold.otf);
}

@font-face {
    font-family: "clashDisplay-ExtraBold";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-ExtraBold.otf);
}

@font-face {
    font-family: "clashDisplay-Black";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Black.otf);
}

@font-face {
    font-family: "clashDisplay-Extralight";
    ;
    src: url(/docs/Fonts/OTF/ClashDisplay-Extralight.otf);
}

* {
    box-sizing: border-box;
    outline: none;
    font-family: "clashDisplay-Regular";
    scroll-behavior: smooth;
}


img,
button,
iframe,
a {
    user-select: none;
}

.fadeIn {
    animation: fadeIn 0.5s;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

.myShadow {
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}

.popup {
    display: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.popup.active {
    display: flex;
    /* must match Tailwind's "flex" */
    opacity: 1;
    visibility: visible;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}

#background-video {
    filter: grayscale(100%);
}