/* Grid */
@keyframes grid {
    0% {
        transform: translateY(-50%);
    }
    100% {
        transform: translateY(0);
    }
}
.animate-grid {
    animation: grid 15s linear infinite;
}
.synthwave-grid {
    background-repeat: repeat;
    background-size: 60px 60px;
    height: 300vh;
    inset: 0% 0px;
    margin-left: -50%;
    transform-origin: 100% 0 0;
    width: 600vw;
}
:not(.dark) .synthwave-grid-light {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.6) 1px, transparent 0),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 1px, transparent 0);
}
.dark .synthwave-grid-dark {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.4) 1px, transparent 0),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.4) 1px, transparent 0);
}
/* Grid End */


/* A marquee element that scrolls across the screen. */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
.animate-marquee {
    animation: marquee 20s linear infinite;
}

.container-block {
    container-type: inline-size;
}
@container (max-width: 1100px) {
    .container-block svg:nth-child(3),
    .container-block svg:nth-child(4) {
        display: none;
    }
}/* Marquee End */