html {
    background: black;
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
}

.lord {
    height: 100%;
    display: grid;
    place-items: center;
}

.bean {
    max-height: 100vh;
    max-width: 100vw;
}

.grid {
    z-index: -1;
    margin: 0 auto;
    position: fixed;
    bottom: 0;
    left: -50%;
    background-color: rgba(20, 30, 40, 0.4);
    background-image: linear-gradient(90deg, transparent 0%, transparent 85%, #e11f80 90%, transparent 95%), linear-gradient(0deg, transparent 0%, transparent 85%, #e11f80 90%, transparent 95%);
    background-size: 36px 18px;
    width: 200vw;
    height: 70vh;
    transform: perspective(150px) rotateX(45deg);
    perspective-origin: top;

    animation-name: movement;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

    .grid:after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, transparent, black);
    }

@keyframes movement {
    0% {
        background-position: 0% 0%;
    }

    100% {
        background-position: 0% 100%;
    }
}