.base{box-sizing:content-box;height:9em;left:50%;margin:-7.5em;padding:3em;position:absolute;top:50%;width:9em;transform:rotateX(45deg) rotate(45deg);transform-style:preserve-3d}.cube,.cube:after,.cube:before{content:"";float:left;height:3em;position:absolute;width:3em}.cube{background-color:#05afd1;position:relative;transform:translateZ(3em);transform-style:preserve-3d;transition:.25s;box-shadow:13em 13em 1.5em rgba(0,0,0,.1);animation:anim 1s infinite}.cube:after{background-color:#049dbc;transform:rotateX(-90deg) translateY(3em);transform-origin:100% 100%}.cube:before{background-color:#048ca7;transform:rotateY(90deg) translateX(3em);transform-origin:100% 0}.cube:first-child{animation-delay:.05s}.cube:nth-child(2){animation-delay:.1s}.cube:nth-child(3){animation-delay:.15s}.cube:nth-child(4){animation-delay:.2s}.cube:nth-child(5){animation-delay:.25s}.cube:nth-child(6){animation-delay:.3s}.cube:nth-child(7){animation-delay:.35s}.cube:nth-child(8){animation-delay:.4s}.cube:nth-child(9){animation-delay:.45s}@keyframes anim{50%{transform:translateZ(.5em)}}.Resizer{box-sizing:border-box;background:#000;opacity:.5;z-index:1;background-clip:padding-box}.Resizer:hover{-webkit-transition:all 2s ease;transition:all 2s ease}.Resizer.horizontal{height:11px;margin:-5px 0;border-top:5px solid hsla(0,0%,100%,0);border-bottom:5px solid hsla(0,0%,100%,0);cursor:row-resize;width:100%}.Resizer.horizontal:hover{border-top:5px solid rgba(0,0,0,.5);border-bottom:5px solid rgba(0,0,0,.5)}.Resizer.vertical{width:11px;margin:0 -5px;border-left:5px solid hsla(0,0%,100%,0);border-right:5px solid hsla(0,0%,100%,0);cursor:col-resize}.Resizer.vertical:hover{border-left:5px solid rgba(0,0,0,.5);border-right:5px solid rgba(0,0,0,.5)}.vertical section{width:100vh;height:100vh;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.vertical header{padding:1rem;background:#eee}.vertical footer{padding:1rem;background:#eee}.horizontal section{width:100vh;height:100vh;display:flex;flex-direction:column}.horizontal header{padding:1rem;background:#eee}.horizontal footer{padding:1rem;background:#eee}.parent{width:100%;height:100%;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}.header{background:#aaa;height:3rem;line-height:3rem}.wrapper{background:#ffa;margin:5rem;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.skeleton{position:relative;overflow:hidden;background-color:#eee}.skeleton:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.6),transparent);transform:translateX(-100%);animation:shimmer 1.4s infinite}@keyframes shimmer{to{transform:translateX(100%)}}