body {
    background: #020a13;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif !important;
}

.page-landing::before {
    content: "";
    height: 100vh;
    width: 100vw;
    color: rgba(113, 113, 113, 0.071);
    position: fixed;
    z-index: -1;
    background: linear-gradient(currentcolor 1px, transparent 1px) 0% 0% / 94px 90px, linear-gradient(to right, currentcolor 1px, transparent 1px) transparent;
    transition: all 0.5s linear 0s;
}

.page-landing::after {

    background-image: radial-gradient(at 40% 40%, #1e90ff 0px, transparent 50%), radial-gradient(at 90% 10%, rgb(255, 105, 180) 0px, transparent 50%), radial-gradient(at 50% 95%, rgb(0, 255, 255) 0px, transparent 50%), radial-gradient(at 20% 30%, rgb(50, 205, 50) 0px, transparent 50%), radial-gradient(at 90% 90%, rgb(255, 255, 0) 0px, transparent 50%), radial-gradient(at 33% 50%, rgb(255, 69, 0) 0px, transparent 50%), radial-gradient(at 79% 53%, rgb(128, 0, 128) 0px, transparent 50%);
    position: fixed;
    content: "";
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(100%);
    top: 0px;
    opacity: 0.1;
    transform: translateZ(0px);

}

.title-text {
    font-weight: 800;
}

.glitch {
    position: relative;
    font-weight: 300;
    text-transform: uppercase;
    letter-spacing: 0.2em;
   
    /* animation: glitch 500ms infinite; */
}

.glitch span {
    position: absolute;
    top: 0;
    left: 0
}

.next-arrow {
    animation: next-arrow 1500ms infinite;
}

.nav-link.active {
    display: inline-flex;
}

.fixed-text {
    font-size: 24.42vmin;
    writing-mode: unset;
    letter-spacing: -0.3rem;
    white-space: pre;
    color: #080f18;
    position: fixed;
    left: -4rem;
    opacity: 1;
    z-index: -1;
    bottom: 0px;
    font-weight: 800;
}

.image-gallery {
    position: relative;
}

.image-gallery .content{
    position: relative;
    background-color: #ffffff;
}

.image-gallery .content .inner{
    opacity: 0;
    height: 100%;
    transition: all 500ms ease-in-out;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

}

.image-gallery .content .inner:hover {
    opacity: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    cursor: pointer;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(0,0,0,0.9));   
}

.image-gallery .content .inner:hover div {
    animation: popUp 500ms ease-in-out;   
}

.bulge:hover {
    animation: bulge 2000ms infinite 500ms;
}


.loader::before {
    content: "";
    height: 100vh;
    width: 100vw;
    color: rgba(113, 113, 113, 0.071);
    position: fixed;
    z-index: -1;
    background: linear-gradient(currentcolor 1px, transparent 1px) 0% 0% / 94px 90px, linear-gradient(to right, currentcolor 1px, transparent 1px) transparent;
    transition: all 0.5s linear 0s;
}

.loader::after {

    background-image: radial-gradient(at 40% 40%, #1e90ff 0px, transparent 50%), radial-gradient(at 90% 10%, rgb(255, 105, 180) 0px, transparent 50%), radial-gradient(at 50% 95%, rgb(0, 255, 255) 0px, transparent 50%), radial-gradient(at 20% 30%, rgb(50, 205, 50) 0px, transparent 50%), radial-gradient(at 90% 90%, rgb(255, 255, 0) 0px, transparent 50%), radial-gradient(at 33% 50%, rgb(255, 69, 0) 0px, transparent 50%), radial-gradient(at 79% 53%, rgb(128, 0, 128) 0px, transparent 50%);
    position: fixed;
    content: "";
    z-index: -1;
    width: 100%;
    height: 100%;
    filter: blur(100px) saturate(100%);
    top: 0px;
    opacity: 0.1;
    transform: translateZ(0px);

}

.loader svg text {
    stroke: #e2e2e2;
    stroke-width: 2;
    animation: loader 3s infinite alternate;
}

@keyframes loader {
    0% {
        stroke-dasharray: 0 50%;
        stroke-dashoffset: 20%;
    }

    100% {
        stroke-dasharray: 50% 0;
        stroke-dashoffset: -20%;
    }
}

@keyframes popUp {
    from  {
        transform: translateY(20px);
    }

    to {
        transform: translateY(0px);
    }
}

@keyframes bulge {
    from  {
        transform: scale(1.1, 1.1);
    }

    to {
        transform: scale(1, 1);
    }
}

@keyframes glitch {

    0% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em 0.05em 0 rgba(0, 0, 255, 0.75);
    }

    14% {
        text-shadow:
            0.05em 0 0 rgba(255, 0, 0, 0.75),
            -0.05em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em 0.05em 0 rgba(0, 0, 255, 0.75);
    }

    15% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    49% {
        text-shadow:
            -0.05em -0.025em 0 rgba(255, 0, 0, 0.75),
            0.025em 0.025em 0 rgba(0, 255, 0, 0.75),
            -0.05em -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    50% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    99% {
        text-shadow:
            0.025em 0.05em 0 rgba(255, 0, 0, 0.75),
            0.05em 0 0 rgba(0, 255, 0, 0.75),
            0 -0.05em 0 rgba(0, 0, 255, 0.75);
    }

    100% {
        text-shadow:
            -0.025em 0 0 rgba(255, 0, 0, 0.75),
            -0.025em -0.025em 0 rgba(0, 255, 0, 0.75),
            -0.025em 0.05em 0 rgba(0, 0, 255, 0.75);
    }

}

@keyframes next-arrow {

    0% {
        transform: translateX(0rem);
    }

    25% {
        transform: translateX(1.5rem);
    }

    50% {
        transform: translateX(1.5rem);
    }

    100% {
        transform: translateX(0rem);
    }

}