@import"https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap";body{padding:0;margin:0;box-sizing:border-box;display:flex;height:100vh;width:100%;background-color:#000;font-family:Playfair Display,serif!important}#root{padding:0;margin:0;box-sizing:border-box;height:100%;width:100%}:root{--cube-width: 300px;--translateZ: 150px}body{margin:0;padding:0;height:100vh;font-family:Poppins,sans-serif;scrollbar-gutter:stable both-edges}.cube-container-wrapper{color:#eee;display:flex;align-items:center;height:100vh;justify-content:center}.container{max-width:1000px;margin:0 auto}.cube-container-wrapper h1{margin:0;font-size:100px}.cube-container-wrapper .sub-heading{font-size:24px;margin:0}.cube-container{perspective:10000px}.cube-container .cube{width:var(--cube-width);height:var(--cube-width);transform-style:preserve-3d;transform:rotateX(-19.7262deg) rotateY(-22.1615deg);transition:transform .6s ease-out}.cube-container .cube-face{width:var(--cube-width);height:var(--cube-width);position:absolute;font-size:30px;background:#ff0;color:#000;font-weight:700;display:flex;align-items:center;justify-content:center}.cube-container .common-face{display:grid;grid-template-columns:repeat(3,1fr)}.cube-container .common-face>div{aspect-ratio:1 / 1;border:2px solid white;padding:15px;position:relative;-webkit-user-select:none;user-select:none;cursor:pointer}.cube-container .common-face>div>span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center}.cube-container .front{background:#d63946;transform:translateZ(var(--translateZ))}.cube-container .back{background:#06d6a0;transform:rotateY(180deg) translateZ(var(--translateZ))}.cube-container .left{background:#023047;color:#fff;transform:rotateY(-90deg) translateZ(var(--translateZ))}.cube-container .right{background:#3d348b;color:#fff;transform:rotateY(90deg) translateZ(var(--translateZ))}.cube-container .top{background:#a8dadc;transform:rotateX(90deg) translateZ(var(--translateZ))}.cube-container .bottom{background:#ffd166;transform:rotateX(-90deg) translateZ(var(--translateZ))}@media (max-width: 991px){.cube-left-part{width:100%!important}.cube-right-part{width:88%!important;right:0!important;position:absolute!important;top:0!important;bottom:0!important}}.front{transform:rotateY(0) translateZ(100px)}.back{transform:rotateY(180deg) translateZ(100px)}.right{transform:rotateY(90deg) translateZ(100px)}.left{transform:rotateY(-90deg) translateZ(100px)}.top{transform:rotateX(90deg) translateZ(100px)}.bottom{transform:rotateX(-90deg) translateZ(100px)}.label{position:absolute;bottom:-30px;right:-30px;transform:rotateX(30deg) rotateY(45deg) rotate(60deg);transform-origin:bottom right}