/*=====================
    body
=====================*/
body{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    animation: back 3s infinite linear;
}

@keyframes back{
     0%{background-color: black;}
    25%{background-color: white;}
    50%{background-color: black;}
    75%{background-color: white;}
    100%{background-color: black;}   
}
/*=====================
    cube + ball
=====================*/
.cube {
    height: 100px;
    width: 100px;
    border: dotted black 2px;
    animation: color 4s infinite linear, move 4s infinite linear, size 4s infinite linear;
    position: absolute;
    top:200px;
    left: 200px;
}
.ball {
    height: 100px;
    width: 100px;
    border: dotted black 2px;
    border-radius: 100px;
    position: absolute;
    animation: color 4s infinite linear, moveball 4s infinite linear;
}
/*=====================
    color
=====================*/
@keyframes color{
    0%{background-color: red;}
    25%{background-color: orange;}
    50%{background-color: yellow;}
    75%{background-color: orange;}
    100%{background-color: red;}
}
/*=====================
    cube keyframes
=====================*/
@keyframes move{
    0%{transform: translateX(0px) rotate(100deg)}
    25%{transform: translateX(200px) rotate(-100deg)}
    50%{transform: translateX(200px) translateY(200px) rotate(100deg)}
    75%{transform: translateX(0px) translateY(200px) rotate(-100deg)}
    100%{transform: translateY(0px) rotate(100deg)}
}
@keyframes size{
    0%{height: 100px; width: 100px;}
    12.5%{height: 80px; width: 80px;}
    25%{height: 100px; width: 100px;}
    37.5%{height: 80px; width: 80px;}
    50%{height: 100px; width: 100px;}
    62.5%{height: 80px; width: 80px;}
    75%{height: 100px; width: 100px;}
    77.5%{height: 80px; width: 80px;}
    100%{height: 100px; width: 100px;}
}
/*=====================
    ball keyframes
=====================*/
@keyframes moveball{
    0%{transform: translateX(0px) rotate(100deg)}
    25%{transform: translateX(600px) rotate(-100deg)}
    50%{transform: translateX(600px) translateY(600px) rotate(100deg)}
    75%{transform: translateX(0px) translateY(600px) rotate(-100deg)}
    100%{transform: translateY(0px) rotate(100deg)}
}