*
{
    margin: 0;
    padding: 0;
}

body
{
    background: linear-gradient(45deg, #38438b, #944b94, #d75a88, #ff7e71, #ffb25f, #ffeb68);
    background-repeat: no-repeat;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

img
{
    width: 100%;
}

.container
{
    position: relative;
    width: 100%;
    max-width: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.img2, .img3, .img4
{
    position: absolute;
    top: 0;
}

.img1
{
    animation: animate 8s linear infinite;
    filter: drop-shadow(0 0 10px rgba(255, 81, 153));
}

.img2
{
    animation: animate2 10s linear infinite;
    filter: drop-shadow(0 0 5px rgba(255, 64, 172));
    padding: 5%;
}

.img3
{
    animation: animate 15s linear infinite;
    filter: drop-shadow(0 0 5px rgba(200, 117, 117));
    padding: 10%;
}

@keyframes animate
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}

@keyframes animate2
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(-360deg);
    }
}