.overlay {

    pointer-events: none;

    position: absolute;

    border-radius: 10px;

    height: 20%;

    width: 12.8%;

    background: repeating-linear-gradient(

            180deg,

            rgba(0, 0, 0) 0,

            rgba(0, 0, 0, 0.3) 50%,

            rgba(0, 0, 0, 0) 100%);

    background-size: auto 2px;

    z-index: 1;

}



.overlay::before {

    content: "";

    pointer-events: none;

    position: absolute;

    display: block;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    width: 100%;

    height: 100%;

    border-radius: 10px;

    background-image: linear-gradient(

            0deg,

            transparent 0%,

            rgba(0, 255, 255, 0.2) 2%,

            rgba(0, 255, 255, 0.8) 3%,

            rgba(0, 255, 255, 0.2) 3%,

            transparent 100%);

    background-repeat: no-repeat;

    animation: scan 8.5s linear 0s infinite;

}



@keyframes scan {

    0% {

        background-position: 0 -100vh;

    }

    35%, 100% {

        background-position: 0 100vh;

    }

}



@keyframes spin {

    from {

        transform: rotateY(0deg);

    }

    to {

        transform: rotateY(360deg);

    }

}



@-webkit-keyframes spin {

    from {

        -webkit-transform: rotateY(0deg);

    }

    to {

        -webkit-transform: rotateY(360deg);

    }

}