body {
    background: #000;

}

#gun {
    position: fixed;
    bottom: 0;
    left:0;
    width:100%;
    height: 100%;
    filter: brightness(50%);
    pointer-events: none;
}

#right{
    position: fixed;
    bottom: -10px;
    right: 250px;
    width: 750px;
    height: 750px;
    background: url("../assets/gun.png");
    background-size: 100% 100%;
}

#left{
    position: fixed;
    bottom: -10px;
    left: 250px;
    width: 750px;
    height: 750px;
    background: url("../assets/gun.png");
    background-size: 100% 100%;
    transform: scaleX(-1);
}

@keyframes idle {
    from {
        transform: translateY(0%);
    }

    50%{
        transform: translateY(1%);

    }

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

@keyframes jump {
    from {
        transform: translateY(0%);
    }

    10%{
        transform: translateY(4%);

    }


    50%{
        transform: translateY(0%);

    }

    85%{
        transform: translateY(1%);

    }

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

@keyframes run {
    from {
        transform: translateX(0%) translateY(1%);
    }

    25%{
        transform: translateX(1%) translateY(0%);

    }

    50% {
        transform: translateX(0%) translateY(1%);
    }

    75%{
        transform: translateX(-1%) translateY(0%) ;

    }

    to {
        transform: translateX(0%) translateY(1%);
    }
}

.idle {
    animation: idle 2s linear infinite;
}
.run {
    animation: run 0.75s linear infinite;
}
.jump{
    animation: jump 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}



#world,
#scene,
#lightoverlaycontent,
#postprocesslayer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#lightoverlaycontent {
    /* display: none; */
    display: flex;
    align-items: center;
    justify-content: center;
    mix-blend-mode: multiply;
    background: #000;
    pointer-events: none;
}

#lightoverlay {
    width: 1750px;
    height: 1750px;
    
    background: radial-gradient(closest-corner, rgb(255, 255, 255) 20%, #000000 60%);
    border-radius: 100%;
}

#postprocesslayer{
    pointer-events: none;
}

#postprocesslayer div{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0);
    opacity:0.5;
}

#bloom1{
    backdrop-filter: contrast(1000%) blur(25px);
}

#bloom2{
    backdrop-filter: contrast(1000%) blur(125px);
}

#brighness1{
    backdrop-filter: brightness(500%);
}


#world {
    perspective: 500px;
    perspective-origin: 50% 50%;
}

#world,
#world div {
    transform-style: preserve-3d;
}

.actor,
.wall {
    position: fixed;
    background: rgb(255, 0, 255);
    overflow: visible;

}

.gradient, .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
}


.overlay{
    z-index: 500;

}