*{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
body{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(#9787e8, #6a4ff3);
    overflow: hidden;
}

div{
    width: 80%;
    height: 80%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #7e67f0;
    opacity: 1;
    animation: move ease 40s infinite;
    animation-delay: 1s;
    
}


.S{
    width: 30vw;
    height: 30vw;
    display: flex;
    justify-content: center;
    align-items: center;
    
    animation: moveS ease 40s reverse infinite;
}
.r{
    
    opacity: 1;
    animation: move ease 40s infinite;
    animation-delay: 3s;
}

@keyframes move {
    0%,100%{
        transform: translateX(0px);
    }
    40%{
        transform: translateX(-200px);
    }
    80%{
        transform: translateX(200%);
    }
}
@keyframes moveS {
    0%,100%{
        transform: translateX(0px);
    }
    40%{
        transform: translateX(-100%);
    }
    80%{
        transform: translateX(100%);
    }
}
@keyframes light {
    0%{
        background-color: aliceblue;
    }
    100%{
        background-color: #6a4ff3;
    }
}