.bai-jamjuree-regular{font-family:Bai Jamjuree,sans-serif;font-style:normal;font-weight:400}html,body{margin:0;overflow:hidden}*{font-family:Bai Jamjuree}.playground{background:#585fc8;justify-content:center;align-items:center;width:100%;height:100vh;display:flex}.playground .bg-text{color:#ffffff08;text-align:justify;word-wrap:break-word;margin:0;font-family:Bai Jamjuree;font-size:180px;font-weight:800;line-height:150px;position:absolute;top:0}.playground .scene-floor{background:#ffe058 radial-gradient(circle,#e8a800 2px,#0000 2.5px) 0 0/8px 8px;border:20px solid #3d4285;width:300%;height:100%;position:absolute;top:0%;transform:rotateX(0)rotateY(55deg)rotate(-19deg)}.bubbles-wrapper{z-index:0;z-index:90;width:100vw;height:100vh;position:absolute;top:0;left:0}.bubbles-wrapper .bubble-img{opacity:0;border:10px solid #353977;border-radius:5px;width:0;transition:all .5s;position:absolute}.bubbles-wrapper .bubble-img.active{opacity:1;width:420px}.bubbles-wrapper .bubble-img.one{top:20px;left:120px}.bubbles-wrapper .bubble-img.two{top:30%;left:70px}.bubbles-wrapper .bubble-img.three{bottom:20px;left:120px}.bubbles-wrapper .bubble-img.four{top:20px;right:60px}.bubbles-wrapper .bubble-img.five{top:30%;right:70px}.bubbles-wrapper .bubble-img.six{bottom:20px;right:50px}@keyframes releaseBounce{0%{transform:rotateX(-45deg)rotateY(30deg)translateY(28px)}50%{transform:rotateX(-45deg)rotateY(30deg)translateY(-4px)}to{transform:rotateX(-45deg)rotateY(30deg)translateY(0)}}.button-scene{perspective:400px;z-index:100;width:200px;height:200px;position:relative}.button-scene .box-surrounding{z-index:102;cursor:pointer;border:70px solid #0000;border-color:#0000 #0000 #353977 #353977;border-radius:50px;width:412px;height:241px;transition:all .4s;position:absolute;top:0;left:0;transform:rotateX(45deg)rotateY(0)rotate(-30deg)translate(37px)translateY(-320px)translateZ(-228px)}.button-scene .box-surrounding.hovered{border-color:#0000 #0000 #4d52ad #4d52ad}.button-scene .box-surrounding.behind{z-index:99;border-color:#353977 #353977 #0000 #0000;top:1px}.button-scene .box-surrounding.behind.hovered{border-color:#4d52ad #4d52ad #0000 #0000}.button-scene .box{width:100%;height:100%;transform-style:preserve-3d;cursor:pointer;-webkit-user-select:none;user-select:none;z-index:100;transition:transform 80ms cubic-bezier(.2,.8,.2,1);position:absolute;top:0;transform:rotateX(-45deg)rotateY(30deg)}.button-scene .box.held{transition:transform 50ms ease-out;transform:rotateX(-45deg)rotateY(30deg)translateY(28px)!important}.button-scene .box.rebound{animation:.25s cubic-bezier(.25,1,.5,1) forwards releaseBounce}.button-scene .box .face{color:#fff;background:#4c50ab;border:1px solid #191a341a;justify-content:center;align-items:center;width:200px;height:200px;font-family:system-ui,sans-serif;font-size:2.5rem;font-weight:700;transition:all .25s;display:flex;position:absolute}.button-scene .box .face.front{z-index:99;border-width:0 0 0 1px;border-image:linear-gradient(#0000001a,#00000080) 1;border-radius:5px 5px 0 0;width:200px;height:100px;transform:translateZ(100px)}.button-scene .box .face.back{border-radius:5px 5px 0 0;width:200px;height:100px;transform:rotateY(180deg)translateZ(0)}.button-scene .box .face.right{border-radius:5px 5px 0 0;width:100px;height:100px;transform:rotateY(90deg)translateZ(150px)translate(-50px)}.button-scene .box .face.left{border-radius:5px 5px 0 0;width:100px;height:100px;transform:rotateY(-90deg)translateZ(50px)translate(50px)}.button-scene .box .face.top{z-index:102;border-color:#0000004d;border-radius:5px;width:200px;height:100px;transform:rotateX(90deg)translateZ(50px)translateY(50px)}.button-scene .box .face.top .topFaceLogo{width:50px;transform:rotate(30deg)}.button-scene .box .face.bottom{width:200px;height:100px;transform:rotateX(-90deg)translateZ(50px)translateY(-50px)}.button-scene .box.hovered .face{background:#6066d7}