:root{--tS:preserve-3d;--tO:left top;--p:150vw;--pO:top left 20vw;--bBox:border-box;}

.container,p{display:flex;justify-content:center;width:var(--width);height:var(--height)}

.container{
align-items:center;
-webkit-perspective:var(--p);-moz-perspective:var(--p);-ms-perspective:var(--p);-o-perspective:var(--p);perspective:var(--p);
-webkit-perspective-origin:var(--pO);-moz-perspective-origin:var(--pO);-ms-perspective-origin:var(--pO);-o-perspective-origin:var(--pO);perspective-origin:var(--pO);}

.project{
position:relative;
height:25vw;
-webkit-transform-style:var(--tS);-moz-transform-style:var(--tS);-ms-transform-style:var(--tS);-o-transform-style:var(--tS);transform-style:var(--tS);
-webkit-transform-origin:var(--tO);-moz-transform-origin:var(--tO);-ms-transform-origin:var(--tO);-o-transform-origin:var(--tO);transform-origin:var(--tO);
-webkit-animation:cuberotate 25s linear infinite;-moz-animation:cuberotate 25s linear infinite;-ms-animation:cuberotate 25s linear infinite;-o-animation:cuberotate 25s linear infinite;animation:cuberotate 25s linear infinite}

p{
-webkit-box-sizing:var(--bBox);-moz-box-sizing:var(--bBox);-ms-box-sizing:var(--bBox);-o-box-sizing:var(--bBox);box-sizing:var(--bBox);
position:absolute;
border:.083vw solid #000;
padding:.4166vw;
color:#fff;font-size:2vw;font-weight:600;
line-height:17.5vw;
text-align:center;
text-transform:uppercase;
backface-visibility:visible;
opacity:1}

.project p{background:var(--B);transform:rotateY(var(--Y)) translateZ(var(--Z))}

.h,.h-bf{--B:#8e5623}
.c,.c-bf{--B:#6c2176}
.p,.p-bf{--B:#b58324}
.j,.j-bf{--B:#83890f}

@keyframes cuberotate{
0%{transform:rotateY(0)}
100%{transform:rotateY(360deg)}}