:root{--p3d:preserve-3d}
body{overflow-x:hidden;background:#222}
.intro,.cube,.face{position:absolute}
.plane{position:relative}
.plane,.cube{-webkit-transform-style:var(--p3d);-moz-transform-style:var(--p3d);-ms-transform-style:var(--p3d);-o-transform-style:var(--p3d);transform-style:var(--p3d)}
.plane{-webkit-perspective:var(--per);-moz-perspective:var(--per);-ms-perspective:var(--per);-o-perspective:var(--per);perspective:var(--per)}
.cube,.face{-webkit-transform-origin:var(--tO);-moz-transform-origin:var(--tO);-ms-transform-origin:var(--tO);-o-transform-origin:var(--tO);transform-origin:var(--tO)}
.cuberotate,.cuberotate .face{-webkit-animation:var(--anim);-moz-animation:var(--anim);-ms-animation:var(--anim);-o-animation:var(--anim);animation:var(--anim)}
.face{-webkit-touch-callout: none;-moz-touch-callout: none;-ms-touch-callout: none;-o-touch-callout: none;touch-callout: none}
.face{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none}
.face{-webkit-transition:var(--trans);-moz-transition:var(--trans);-o-transition:var(--trans);transition:var(--trans)}

.intro{top:10vw;left:50vw}
.plane{--per:41.66vw;width:8vw;height:8vw}

.cube{-webkit-animation-play-state:var(--animPS,running);-moz-animation-play-state:var(--animPS,running);-ms-animation-play-state:var(--animPS,running);-o-animation-play-state:var(--animPS,running);animation-play-state:var(--animPS,running)}
.cube{--tO:50% 50%;top:0;left:0;width:8vw;height:8vw;cursor:pointer}
.cuberotate{--anim:cube-rotate 15s infinite linear}
.cube:hover{--animPS:paused}

.face{--tO:50% 50%;--trans:opacity .5s ease-out;width:11vw;height:11vw;border:0 solid #fff}
.face.x,.face.y,.face.z,.face.x.d,.face.y.l,.face.z.b{transform:rotateX(var(--rX))rotateY(var(--rY))translateZ(var(--tZ))}
.cuberotate .face{--anim:var(--aName) 2s var(--aDelay) ease-in forwards}
 
@-webkit-keyframes cube-rotate{from{-webkit-transform:rotateX(-25deg)rotateY(-45deg)rotateZ(0)}to{-webkit-transform:rotateX(335deg)rotateY(315deg)rotateZ(360deg)}}
@-moz-keyframes cube-rotate{from{-moz-transform:rotateX(-25deg)rotateY(-45deg)rotateZ(0)}to{-moz-transform:rotateX(335deg)rotateY(315deg)rotateZ(360deg)}}
@-ms-keyframes cube-rotate{from{-ms-transform:rotateX(-25deg)rotateY(-45deg)rotateZ(0)}to{-ms-transform:rotateX(335deg)rotateY(315deg)rotateZ(360deg)}}
@-o-keyframes cube-rotate{from{-o-transform:rotateX(-25deg)rotateY(-45deg)rotateZ(0)}to{-o-transform:rotateX(335deg)rotateY(315deg)rotateZ(360deg)}}
@keyframes cube-rotate{from{transform:rotateX(-25deg)rotateY(-45deg)rotateZ(0)}to{transform:rotateX(335deg)rotateY(315deg)rotateZ(360deg)}}

@-webkit-keyframes face-x-fadeIn{from{background-color:rgba(220,46,46,0)}to{background-color:rgba(220,46,46,1)}}
@-moz-keyframes face-x-fadeIn{from{background-color:rgba(220,46,46,0)}to{background-color:rgba(220,46,46,1)}}
@-ms-keyframes face-x-fadeIn{from{background-color:rgba(220,46,46,0)}to{background-color:rgba(220,46,46,1)}}
@-o-keyframes face-x-fadeIn{from{background-color:rgba(220,46,46,0)}to{background-color:rgba(220,46,46,1)}}
@keyframes face-x-fadeIn{from{background-color:rgba(220,46,46,0)}to{background-color:rgba(220,46,46,1)}}

@-webkit-keyframes face-y-fadeIn{from{background-color:rgba(174,30,30,0)}to{background-color:rgba(174,30,30,1)}}
@-moz-keyframes face-y-fadeIn{from{background-color:rgba(174,30,30,0)}to{background-color:rgba(174,30,30,1)}}
@-ms-keyframes face-y-fadeIn{from{background-color:rgba(174,30,30,0)}to{background-color:rgba(174,30,30,1)}}
@-o-keyframes face-y-fadeIn{from{background-color:rgba(174,30,30,0)}to{background-color:rgba(174,30,30,1)}}
@keyframes face-y-fadeIn{from{background-color:rgba(174,30,30,0)}to{background-color:rgba(174,30,30,1)}}

@-webkit-keyframes face-z-fadeIn{from{background-color:rgba(200,34,34,0)}to{background-color:rgba(200,34,34,1)}}
@-moz-keyframes face-z-fadeIn{from{background-color:rgba(200,34,34,0)}to{background-color:rgba(200,34,34,1)}}
@-ms-keyframes face-z-fadeIn{from{background-color:rgba(200,34,34,0)}to{background-color:rgba(200,34,34,1)}}
@-o-keyframes face-z-fadeIn{from{background-color:rgba(200,34,34,0)}to{background-color:rgba(200,34,34,1)}}
@keyframes face-z-fadeIn{from{background-color:rgba(200,34,34,0)}to{background-color:rgba(200,34,34,1)}}