#container{perspective:2000px;width:20vmin;transform-style:preserve-3d;transform-origin:50%;transition:transform 1s ease-out;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}#box{transform-style:preserve-3d;transform:rotateX(-20deg)rotateY(-30deg)}#lid{transform-style:preserve-3d;transform:translate(-1vmin)rotateX(-20deg)rotateY(-30deg)}#lid .face{background:#f5c842;width:22vmin;height:5vmin}#lid .face.top{height:22vmin}#lid .face.front{transform:rotateY(0)translateZ(11vmin);box-shadow:0 3px 2px #0000001a}#lid .face.back{transform:rotateX(180deg)translateZ(11vmin);box-shadow:0 -3px 2px #0000001a}#lid .face.left{transform:rotateY(-90deg)translateZ(11vmin);box-shadow:0 3px 2px #0000001a}#lid .face.right{transform:rotateY(90deg)translateZ(11vmin);box-shadow:0 3px 2px #0000001a}#lid .face.top{transform:rotateX(90deg)translateZ(11vmin)}#lid .face.bottom{transform:rotateX(-90deg)translateZ(11vmin)}.face{color:#fff;opacity:1;box-sizing:border-box;background:#f0b429;width:20vmin;height:20vmin;font-size:2rem;display:inline-block;position:absolute}.face.front{transform:rotateY(0)translateZ(10vmin)}.face.back{transform:rotateX(180deg)translateZ(10vmin)}.face.left{transform:rotateY(-90deg)translateZ(10vmin)}.face.right{transform:rotateY(90deg)translateZ(10vmin)}.face.top{transform:rotateX(90deg)translateZ(10vmin)}.face.bottom{transform:rotateX(-90deg)translateZ(10vmin)}.face .ribbon{background:#e53935;border-left:1px solid #ff6464f2;border-right:1px solid #ff6464f2;width:20%;height:100%;margin:0 40%;position:absolute}.face .ribbon:nth-of-type(2){width:100%;height:20%;margin:40% 0}