.techCard{
    position: relative;
    height:300px;
    overflow: hidden;
    width: 100%;
    padding: 20px 30px;
    /* background-color: rebeccapurple; */
    display: flex;
    margin-bottom: 200px;
}
.card-void{
    height: 100%;
    top:0;
    left: 0;
    position: absolute;
    aspect-ratio: 1;
    z-index: 2;
    pointer-events: none;
}   
.card-void.left{
    background: linear-gradient(90deg,var(--bg-color) 0%, var(--bg-color) 25%, rgba(0,0,0, 0) 100%);
}
.card-void.right{
    background: linear-gradient(270deg,var(--bg-color) 0%, var(--bg-color) 25%, rgba(0,0,0, 0) 100%);
    right: 0;
    left:auto;
}
.techCard> span{
    position: absolute;
    height:calc(100% - 40px);
    aspect-ratio: 1;
    background-color: rgba(255,255,255,0.05);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    transition: 0.3s;
    align-items: center;
    color: var(--accent-color);
    filter: grayscale(1);
    margin: 0px 30px;
    right:-300px;
}
.techCard>span:hover{
    box-shadow: inset 0px 0px 0px 3px var(--accent-color);
    filter: grayscale(0);
}
.techCard>span>h1{
    font-size: xx-large;
}
.techCard>span>img{
    height: calc(100% - 100px);
}

.marquee_anim{
    animation: marquee_animation 10s linear backwards;
}
@keyframes marquee_animation {
    0%{
        transform: translateX(-0px);
    }
    100%{
        transform: translateX(-1800px);
    }
}