.face,.rubik,.scene,.squares{display:flex;align-items:center;justify-content:center}.scene{width:100%;height:100%}*,:after,:before{outline:0;margin:0;border:0;padding:0;box-sizing:border-box}.scene{background-color:#283149;perspective:176px;overflow:hidden}.rubik{width:44px;height:44px;position:relative;transform-style:preserve-3d}.rubik .squares:after,.rubik .squares:before{width:12.6666666667px;height:12.6666666667px}.rubik .face:first-child .squares:before{background-color:#f7f7f7}.rubik .face:first-child .squares:after{background-color:#f7de1c}.rubik .face:first-child .squares:first-child:after,.rubik .face:first-child .squares:first-child:before{left:-21px;top:-21px}.rubik .face:first-child .squares:nth-child(2):after,.rubik .face:first-child .squares:nth-child(2):before{left:-6.3333333333px;top:-21px}.rubik .face:first-child .squares:nth-child(3):after,.rubik .face:first-child .squares:nth-child(3):before{left:8.3333333333px;top:-21px}.rubik .face:first-child .squares:nth-child(4):after,.rubik .face:first-child .squares:nth-child(4):before{left:-21px;top:-6.3333333333px}.rubik .face:first-child .squares:nth-child(5):after,.rubik .face:first-child .squares:nth-child(5):before{left:-6.3333333333px;top:-6.3333333333px}.rubik .face:first-child .squares:nth-child(6):after,.rubik .face:first-child .squares:nth-child(6):before{left:8.3333333333px;top:-6.3333333333px}.rubik .face:first-child .squares:nth-child(7):after,.rubik .face:first-child .squares:nth-child(7):before{left:-21px;top:8.3333333333px}.rubik .face:first-child .squares:nth-child(8):after,.rubik .face:first-child .squares:nth-child(8):before{left:-6.3333333333px;top:8.3333333333px}.rubik .face:first-child .squares:nth-child(9):after,.rubik .face:first-child .squares:nth-child(9):before{left:8.3333333333px;top:8.3333333333px}.rubik .face:nth-child(2) .squares:before{background-color:#00bd56}.rubik .face:nth-child(2) .squares:after{background-color:#207dff}.rubik .face:nth-child(2) .squares:first-child:after,.rubik .face:nth-child(2) .squares:first-child:before{left:-21px;top:-21px}.rubik .face:nth-child(2) .squares:nth-child(2):after,.rubik .face:nth-child(2) .squares:nth-child(2):before{left:-6.3333333333px;top:-21px}.rubik .face:nth-child(2) .squares:nth-child(3):after,.rubik .face:nth-child(2) .squares:nth-child(3):before{left:8.3333333333px;top:-21px}.rubik .face:nth-child(2) .squares:nth-child(4):after,.rubik .face:nth-child(2) .squares:nth-child(4):before{left:-21px;top:-6.3333333333px}.rubik .face:nth-child(2) .squares:nth-child(5):after,.rubik .face:nth-child(2) .squares:nth-child(5):before{left:-6.3333333333px;top:-6.3333333333px}.rubik .face:nth-child(2) .squares:nth-child(6):after,.rubik .face:nth-child(2) .squares:nth-child(6):before{left:8.3333333333px;top:-6.3333333333px}.rubik .face:nth-child(2) .squares:nth-child(7):after,.rubik .face:nth-child(2) .squares:nth-child(7):before{left:-21px;top:8.3333333333px}.rubik .face:nth-child(2) .squares:nth-child(8):after,.rubik .face:nth-child(2) .squares:nth-child(8):before{left:-6.3333333333px;top:8.3333333333px}.rubik .face:nth-child(2) .squares:nth-child(9):after,.rubik .face:nth-child(2) .squares:nth-child(9):before{left:8.3333333333px;top:8.3333333333px}.rubik .face:nth-child(3) .squares:before{background-color:#ff3434}.rubik .face:nth-child(3) .squares:after{background-color:#f69314}.rubik .face:nth-child(3) .squares:first-child:after,.rubik .face:nth-child(3) .squares:first-child:before{left:-21px;top:-21px}.rubik .face:nth-child(3) .squares:nth-child(2):after,.rubik .face:nth-child(3) .squares:nth-child(2):before{left:-6.3333333333px;top:-21px}.rubik .face:nth-child(3) .squares:nth-child(3):after,.rubik .face:nth-child(3) .squares:nth-child(3):before{left:8.3333333333px;top:-21px}.rubik .face:nth-child(3) .squares:nth-child(4):after,.rubik .face:nth-child(3) .squares:nth-child(4):before{left:-21px;top:-6.3333333333px}.rubik .face:nth-child(3) .squares:nth-child(5):after,.rubik .face:nth-child(3) .squares:nth-child(5):before{left:-6.3333333333px;top:-6.3333333333px}.rubik .face:nth-child(3) .squares:nth-child(6):after,.rubik .face:nth-child(3) .squares:nth-child(6):before{left:8.3333333333px;top:-6.3333333333px}.rubik .face:nth-child(3) .squares:nth-child(7):after,.rubik .face:nth-child(3) .squares:nth-child(7):before{left:-21px;top:8.3333333333px}.rubik .face:nth-child(3) .squares:nth-child(8):after,.rubik .face:nth-child(3) .squares:nth-child(8):before{left:-6.3333333333px;top:8.3333333333px}.rubik .face:nth-child(3) .squares:nth-child(9):after,.rubik .face:nth-child(3) .squares:nth-child(9):before{left:8.3333333333px;top:8.3333333333px}.rubik .face:after,.rubik .face:before{width:100%;height:100%}.face{position:absolute;transform-style:preserve-3d}.face:first-child{transform:rotate3d(0,0,0,0deg)}.face:nth-child(2){transform:rotateY(90deg)}.face:nth-child(3){transform:rotateX(90deg)}.squares{transform-style:preserve-3d;animation:2.5s ease-in-out infinite}.squares,.squares:after,.squares:before{position:absolute}.squares:after,.squares:before{content:"";border-radius:2px;animation:2.5s ease-in-out infinite;-webkit-backface-visibility:hidden;backface-visibility:hidden}.squares:before{transform:translateZ(22px)}.squares:after{transform:rotateY(180deg) translateZ(22px)}.face:first-child .squares:nth-of-type(3n+1),.face:nth-child(3) .squares:nth-of-type(3n+1){animation-name:rotationAnimationX}.face:first-child .squares:nth-of-type(3n+2),.face:nth-child(3) .squares:nth-of-type(3n+2){animation-name:rotationAnimation-X}.face:first-child .squares:nth-of-type(3n+3),.face:nth-child(3) .squares:nth-of-type(3n+3){animation-name:rotationAnimationX}.face:nth-child(2) .squares{animation-name:rotationAnimationZ}@keyframes rotateXYZ{to{transform:rotate3d(.1,.2,.3,1turn)}}@keyframes rotationAnimationX{0%{transform:rotateX(0deg)}25%{transform:rotateX(90deg)}50%{transform:rotateX(180deg)}75%{transform:rotateX(270deg)}to{transform:rotateX(1turn)}}@keyframes rotationAnimation-X{0%{transform:rotate3d(-1,0,0,0deg)}25%{transform:rotate3d(-1,0,0,90deg)}50%{transform:rotate3d(-1,0,0,180deg)}75%{transform:rotate3d(-1,0,0,270deg)}to{transform:rotate3d(-1,0,0,1turn)}}@keyframes rotationAnimationY{0%{transform:rotateY(0deg)}25%{transform:rotateY(90deg)}50%{transform:rotateY(180deg)}75%{transform:rotateY(270deg)}to{transform:rotateY(1turn)}}@keyframes rotationAnimation-Y{0%{transform:rotate3d(0,-1,0,0deg)}25%{transform:rotate3d(0,-1,0,90deg)}50%{transform:rotate3d(0,-1,0,180deg)}75%{transform:rotate3d(0,-1,0,270deg)}to{transform:rotate3d(0,-1,0,1turn)}}@keyframes rotationAnimationZ{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}to{transform:rotate(1turn)}}.split-bar{border-radius:2px;border-width:1px;font-size:12px;text-align:center;min-height:32px}.splits .split-bar{min-height:24px}.cross-rec{background-color:#43516d;border-color:#293347}.cross{background-color:#4366aa;border-color:#3b60a9}.f2l{background-color:#328a59;border-color:#266743}.oll{background-color:#878a26;border-color:#70731e}.pll{background-color:#9a3333;border-color:#7a2424}