body {
background: #230F2B;
}
body .container {
width: 100px;
height: 100px;
position: absolute;
perspective: 500px;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
}
body .container:nth-of-type(1n + 1) #cube {
animation-delay: 0.05s;
}
body .container:nth-of-type(1n + 1) #cube div {
animation-delay: 0.005s;
width: calc(100px - 1px);
height: calc(100px - 1px);
}
body .container:nth-of-type(2n + 2) #cube {
animation-delay: 0.1s;
}
body .container:nth-of-type(2n + 2) #cube div {
animation-delay: 0.01s;
width: calc(100px - 2px);
height: calc(100px - 2px);
}
body .container:nth-of-type(3n + 3) #cube {
animation-delay: 0.15s;
}
body .container:nth-of-type(3n + 3) #cube div {
animation-delay: 0.015s;
width: calc(100px - 3px);
height: calc(100px - 3px);
}
body .container:nth-of-type(4n + 4) #cube {
