*{margin:0;padding:0;box-sizing:border-box}body,html{background:linear-gradient(135deg,#8a77f5 10%,#4d32e9 90%);overflow:hidden;overflow-y:auto;height:100%}body .app,html .app{display:flex;justify-content:center;align-items:center;flex-direction:column;height:100%}body .app .bg-box-boxes,html .app .bg-box-boxes{display:flex;justify-content:space-around;flex-wrap:wrap;width:60vw;height:60vh;position:relative;transition:all .3s cubic-bezier(.11,.22,.33,1)}body .app .bg-box-boxes.big,html .app .bg-box-boxes.big{width:65vw;height:65vh}body .app .bg-box-boxes.big .bg-box-boxes-box,html .app .bg-box-boxes.big .bg-box-boxes-box{transform:rotate(360deg)}body .app .bg-box-boxes-box,html .app .bg-box-boxes-box{width:15vw;height:15vh;position:relative;transition:all .3s cubic-bezier(.175,.885,.32,1.275);background-size:60vw 60vh;background-repeat:no-repeat}body .app .bg-box-boxes-box:before,body .app .bg-box-boxes-box:after,html .app .bg-box-boxes-box:before,html .app .bg-box-boxes-box:after{content:"";position:absolute;background:linear-gradient(135deg,#4c4286 10%,#1a0688 90%)}body .app .bg-box-boxes-box:before,html .app .bg-box-boxes-box:before{width:100%;height:2vh;transform:skew(45deg);left:8px;bottom:-2vh}body .app .bg-box-boxes-box:after,html .app .bg-box-boxes-box:after{width:2vh;height:100%;transform:skewY(45deg);right:-2vh;top:8px}