/* styles for container*/

.container {
display: flex;
height: 400px;
flex-wrap: wrap;
align-items: stretch;
}

/* styles for box*/
.box {
width: 300px;
height: 300px;
font-size: 2em;
text-align: center;
border-radius: 15px;
}

#box1 {
background-color: gray;
flex: 50%;
animation-name: colorChange;
animation-duration: 10s;
}

#box2 {
background-color: red;
flex: 50%;
}

#box3 {
background-color: green;
flex: 50%;
}

#box4 {
background-color: aqua;
flex: 50%;
}

@keyframes colorChange{
    0% {background-color: gray;}
    20% {background-color: blue;}
    40% {background-color: green;}
    60% {background-color: orange;}
    80% {background-color: red;}
    100% {background-color: yellow;}
}

/* styles for img*/
.img {
transform: translateX(20%) rotateZ(10deg) scaleX(1);
transform: skewX(10deg); 
}

@media only screen and (max-width: 600px) {
body {background-color: #00ff00;}
}
@media only screen and (min-width: 600px) {
body {background-color: #ff0000;}
}
@media only screen and (min-width: 992px) {
body {background-color: #ffcc33;}
}

/*
body {
    background-color: #ffcc33;
}

*/