/* center the container */
.container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
}

/* rotates and enlarges the boxes in my container */
.container:hover .box{
    transition: width 2s, height 2s, transform 2s;
    width: 300px;
    height: 300px;
    transform: rotate(360deg);
}

/* default boxes */
.box {
    width: 100px;
    height: 100px;
    border-top: 1px solid #687291;
    font-size: 40px;
    text-align: center;
}

/* even boxes will do the entire example animation in 3 seconds forever */
.box:nth-child(even){

    width: 100px;
    height: 100px;
    background-color: #eeeff2;
    position: relative;
    animation: example 3s infinite;
}

/* odd boxes will do the entire example2 animation in 4 seconds forever */
.box:nth-child(odd){
    width: 100px;
    height: 100px;
    position: relative;
    animation: example2 4s infinite;
    background-color: #dfe1e7;
}

/* add a border to the last box */
.box:last-child {
    background-color: #687291;
    border: 4px solid black;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* will change colors and move around in a square shape */
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:0px; top:400px;}
  50%  {background-color:blue; left:400px; top:400px;}
  75%  {background-color:green; left:400px; top:0px;}
  100% {background-color:red; left:0px; top:0px;}
}

/* will change colors and move around in a square shape the opposite direction of example */
@keyframes example2 {
    0%   {background-color:red; left:0px; top:0px;}
    25%  {background-color:yellow; left:400px; top:0px;}
    50%  {background-color:blue; left:400px; top:400px;}
    75%  {background-color:green; left:0px; top:400px;}
    100% {background-color:red; left:0px; top:0px;}
}