html{
    display:flex;
    justify-content: center;
    align-items: center;
    background-color: #16161d;
    height: 900px;
}

main{
    color: white;
    display: grid;
    gap: 30px;
    grid-template: auto auto / auto auto;
}
main div{
    width: 300px;
    height: 250px;
}
.tl{
    background-color: red;
    animation-name: topl;
    animation-duration: 3s;
    animation-delay: 3s;
    animation-iteration-count: infinite;
}
.tr{
    background-color: green;
    animation-name: topr;
    animation-duration: 3s;
    animation-delay: 6s;
    animation-iteration-count: infinite;
}
.bl{
    background-color: blue;
    animation-name: botl;
    animation-duration: 3s;
    animation-delay: 9s;
    animation-iteration-count: infinite;
}
.br{
    background-color: yellow;
    animation-name: botr;
    animation-duration: 3s;
    animation-delay: 12s;
    animation-iteration-count: infinite;
}
@keyframes topl{
    0%{ background-color: red;
    }
    25%{background-color: blue;
        transform: skew(15deg, 15deg)
    }
    50%{background-color: yellow;
        transform: skew(30deg, 30deg);
        translate: -100px -100px;
    }
    75%{background-color: green;
        transform: skew(15deg, 15deg)
    }
    100%{background-color: red;}
}
@keyframes topr{
    0%{ background-color: green;}
    25%{background-color: red;
        rotate: 90deg
    }
    50%{background-color: blue;
        rotate: 180deg;
    }
    75%{background-color: yellow;
        rotate: 90deg
    }
    100%{background-color: green;}
}
@keyframes botl{
    0%{ background-color: blue;}
    25%{background-color: yellow;
        translate: -100px 0px;
    }
    50%{background-color: green;
        translate: -100px 100px;
    }
    75%{background-color: red;
        translate: 0px 100px;
    }
    100%{background-color: blue;}
}
@keyframes botr{
    0%{ background-color: yellow;}
    25%{background-color: green;
        transform: scale(0.5,0.5);


    }
    50%{background-color: red;
        transform: scale(1.5,1.5);
    }
    75%{background-color: blue;
        transform: scale(0.5,0.5);
    }
    100%{background-color: yellow;}
}