.box{--box-size:50px;width:var(--box-size);height:var(--box-size);margin:50px auto;background-color:transparent;perspective:80em;overflow:hidden;position:relative}.box :not(:empty){transform-style:preserve-3d}.positioning{position:relative;z-index:1}.faces{--facesize:25px;position:absolute;top:var(--facesize);left:26%;margin:auto;width:var(--facesize);height:var(--facesize);background-color:#000;z-index:10;transform:rotateX(70deg) rotate(150deg);transform-style:preserve-3d;animation:rotateBox 7s linear infinite}@keyframes rotateBox{0%{transform:rotateX(70deg) rotate(0deg)}to{transform:rotateX(70deg) rotate(1turn)}}.face{width:100%;height:100%;position:absolute;box-shadow:inset 1px 1px 1px 1px rgba(0,0,0,.098)}.top{transform:translateZ(var(--facesize))}.one,.top{background-color:#820d0d}.one{transform:rotateY(90deg) translateX(calc(var(--facesize)/-2)) translateZ(calc(var(--facesize)/-2))}.two{transform:rotateY(90deg) translateX(calc(var(--facesize)/-2)) translateZ(calc(var(--facesize)/2))}.three,.two{background-color:#820d0d}.three{transform:rotateY(90deg) translateX(calc(var(--facesize)/-2)) rotateX(90deg) translateZ(calc(var(--facesize)/-2))}.four{background-color:#820d0d;transform:rotateY(90deg) translateX(calc(var(--facesize)/-2)) rotateX(90deg) translateZ(calc(var(--facesize)/2))}.menu-position{position:relative}.menu-trigger{border:none;padding:2px;background-color:transparent;color:#fff;font-weight:700;font-size:14px;cursor:pointer;flex-direction:row}.menu{width:fit-content;height:fit-content;perspective:80em;position:absolute;top:40px;right:0;margin:0;padding:0;overflow:hidden;box-shadow:0 0 5px 5px rgba(0,0,0,.039)}.menu :not(:empty){transform-style:preserve-3d}.menu-item{width:150px;height:fit-content;margin:0;color:#000;background-color:#fff;text-align:right;padding-top:20px;padding-bottom:20px;padding-right:20px;cursor:pointer;transform-origin:top left;transform:rotateX(0deg) rotateY(180deg);backface-visibility:hidden;animation:unFoldAnimation .25s ease forwards;z-index:10}.menu-item:hover{font-weight:700}@keyframes unFoldAnimation{0%{transform:rotateX(-90deg) rotateY(180deg) rotate(180deg)}to{transform:rotateX(0deg) rotateY(0deg)}}