html,
body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
<<<<<<< HEAD
    overflow-x: hidden;
=======
>>>>>>> bfb7a4e (Going back)
}

.container {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: #000000;
    background-size: cover;
    background-position: center;
}

.laser {
    width: 5px;
    height: 5px;
    background-color: rgb(253, 34, 34);
    border-radius: 50%;
    --xA: calc(50vw);
    --yA: calc(50vh);
    --xB: calc(50vw);
    --yB: calc(50vh);
    animation: move-laser 2s cubic-bezier(0.5, 0, 0.2, 1) 1;
}

.laser::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 17px;
    height: 17px;
    box-shadow: 0 0 40px 10px rgba(255, 0, 0, 0.557);
    background-color: #ff0000;
    border-radius: 50%;
    animation: idle 8s ease infinite;
}

@keyframes idle {
    0% {
        transform: translate(-50%, -50%);
    }
    25% {
        transform: translate(-50%, -50%) translateX(-5px);
    }
    50% {
        transform: translate(-50%, -50%) translateY(-5px);
    }
    75% {
        transform: translate(-50%, -50%) translateX(5px);
    }
    100% {
        transform: translate(-50%, -50%);
    }
}

@keyframes move-laser {
    0% {
        transform: translate3d(var(--xA), var(--yA), 0);
    }
    10%,
    90% {
        transform: translate3d(var(--xB), var(--yB), 0) scale(1.2);
    }
    100% {
        transform: translate3d(var(--xB), var(--yB), 0);
    }
}