/** SPACE & STARS **/
.space,
.stars {
    overflow: hidden;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(128, 0, 128, 0.06) center;
    z-index: -100000;
    height:100vh;
}

.stars {
    background-image: 
        radial-gradient(2px 2px at 20px 30px, #fff, rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 40px 70px, rgb(134, 51, 51), rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 50px 160px, rgb(195, 49, 74), rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 90px 40px, #fff, rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 130px 80px, rgb(179, 56, 190), rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 160px 120px, rgb(63, 52, 113), rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 130px 80px, #fff, rgba(0, 0, 0, 0)), 
        radial-gradient(2px 2px at 160px 120px, rgb(86, 218, 238), rgba(0, 0, 0, 0));
    background-repeat: repeat;
    background-size: 200px 200px;
    animation: zoom 5s infinite;
    opacity: 0;
}

.stars:nth-child(1) {
    background-position: 50% 50%;
    animation-delay: 0s;
}

.stars:nth-child(2) {
    background-position: 20% 60%;
    animation-delay: 1s;
}

.stars:nth-child(3) {
    background-position: -20% -30%;
    animation-delay: 2s;
}

.stars:nth-child(4) {
    background-position: 40% -80%;
    animation-delay: 3s;
}

.stars:nth-child(5) {
    background-position: -20% 30%;
    animation-delay: 4s;
}

@keyframes zoom {
    0% {
        opacity: 0;
        transform: scale(0.5);
        animation-timing-function: ease-in;
    }
    85% {
        opacity: 0.6;
        transform: scale(2.8);
        animation-timing-function: linear;
    }
    100% {
        opacity: 0;
        transform: scale(3.5);
        animation-timing-function: ease-out;
    }
}


/** MOUSE & SCROLLER **/
@media (max-width:991px){
    .mouse{
        visibility: hidden;
    }
    .mouse-scroll{
        visibility: hidden;
    }
}

@media (min-width:992px){
    .mouse-scroll {
        position: absolute;
        bottom: 3%;
        left: 50%;
        transform: translateX(-50%);
    }

    .mouse {
        width: 25px;
        height: 40px;
        border: 2px solid #6d6d6d;
        border-radius: 60px;
        position: relative;
        overflow: hidden;
    }

    .mouse:hover {
        cursor: pointer;
        overflow: hidden;
    }

    .mouse::before {
        content: '';
        font-size: 10px;
        width: 5px;
        height: 5px;
        position: absolute;
        top: -27px;
        left: 50%;
        transform: translateX(-50%);
        background-color: yellow;
        border-radius: 50%;
        opacity: 1;
        animation: wheel 1.7s infinite;
        -webkit-animation: wheel 1.7s infinite;
    }

    @keyframes wheel {
        to {
            opacity: 0;
            top: 35px;
            background-color: yellow;
            width: 6px;
            height: 6px;
        }
    }

    @-webkit-keyframes wheel {
        to {
            opacity: 0;
            top: 35px;
            background-color: yellow;
            width: 6px;
            height: 6px;
        }
    }
}

/** 
    prevent space mode for devices not capable of a hover event 
    and restrict the event to the .landing-page element

@media (min-width:992px) and (any-hover:hover){
    .landing-page {
        cursor:move;
    }

    :root{
        --cursorX: 30vw;
        --cursorY: 30vh;
    }

   .landing-page:before  {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        position: absolute;
        pointer-events: none;
        background: radial-gradient(
            circle 25vmax at var(--cursorX) var(--cursorY),
            rgba(0,0,0,0) 0%,
            rgba(0,0,0,.5) 90%,
            rgba(0,0,0,.95) 100%
        )
    }
}
**/

/** Scroll bar overrides **/
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: none;
    background-color: transparent;
    border-radius: 0px;
    background-image: linear-gradient(120deg, #171124, #0c1522);
}

::-webkit-scrollbar-thumb {
    border-radius: 0px;
    -webkit-box-shadow: none;
    background-color:#9ea6ad;

}