.controlStick{width:50px;height:50px}body{background-color:#000}p{color:#fff;font-family:monospace;font-size:1rem}.menu{display:flex;margin-top:50px;justify-content:center;align-items:center;gap:2rem}.menutext{color:#fff;font-family:monospace;font-size:1.5rem}.flex-center{display:flex;justify-content:center;align-items:center}@keyframes rotationY{0%{transform:rotateY(0);animation-timing-function:ease-out}25%{transform:rotateY(5deg);animation-timing-function:ease-in}50%{transform:rotateY(0);animation-timing-function:ease-out}75%{transform:rotateY(-5deg);animation-timing-function:ease-in}}@keyframes rotationZ{0%{transform:rotate(0);animation-timing-function:ease-out}25%{transform:rotate(5deg);animation-timing-function:ease-in}50%{transform:rotate(0);animation-timing-function:ease-out}75%{transform:rotate(-5deg);animation-timing-function:ease-in}}@keyframes rotationX{0%{transform:rotateX(1deg);animation-timing-function:ease-in-out}25%{transform:rotateX(-1deg);animation-timing-function:ease-in-out}50%{transform:rotateX(1deg);animation-timing-function:ease-in-out}75%{transform:rotateX(-1deg);animation-timing-function:ease-in-out}to{transform:rotateX(1deg);animation-timing-function:ease-in-out}}@keyframes front-to-left{0%{transform:rotateY(0)}to{transform:rotateY(90deg)}}@keyframes left-to-front{0%{transform:rotateY(90deg)}to{transform:rotateY(0)}}@keyframes front-to-right{0%{transform:rotateY(0)}to{transform:rotateY(-90deg)}}@keyframes right-to-front{0%{transform:rotateY(-90deg)}to{transform:rotateY(0)}}@keyframes front-to-bottom{0%{transform:rotateX(0)}to{transform:rotateX(90deg)}}@keyframes bottom-to-front{0%{transform:rotateX(90deg)}to{transform:rotateX(0)}}@keyframes front-to-top{0%{transform:rotateX(0)}to{transform:rotateX(-90deg)}}@keyframes top-to-front{0%{transform:rotateX(-90deg)}to{transform:rotateX(0)}}@keyframes reflection{0%{background-position:40px 0px}25%{background-position:70px -70px}50%{background-position:40px 0px}75%{background-position:10px -70px}to{background-position:40px 0px}}@keyframes reflectionLine{0%{background-position:30% 20%;animation-timing-function:ease-out}25%{background-position:40% 15%;animation-timing-function:ease-in}50%{background-position:30% 20%;animation-timing-function:ease-out}75%{background-position:20% 15%;animation-timing-function:ease-in}to{background-position:30% 20%;animation-timing-function:ease-out}}@keyframes bobbing{0%{top:0px;animation-timing-function:ease-in-out}25%{top:10px;animation-timing-function:ease-in-out}50%{top:0px;animation-timing-function:ease-in-out}75%{top:10px;animation-timing-function:ease-in-out}to{top:0px;animation-timing-function:ease-in-out}}@keyframes hide{0%{opacity:1}to{opacity:0}}@keyframes show{0%{opacity:0}to{opacity:1}}.container{width:300px;height:300px;perspective:1200px;margin:100px auto 0}.cube{transform-style:preserve-3d;width:100%;height:100%;position:relative;animation:bobbing 8s infinite linear}.cube .face{position:absolute;width:100%;height:100%;background-color:#192f8733;background-image:url(transparent.svg);background-repeat:no-repeat;background-size:110% 110%;border:1px solid rgba(42,80,118,.3)}.cube .face.inactive *{opacity:0}.cube .face.hide *{animation:hide .4s .05s forwards}.cube .face.show *{animation:show .4s .05s forwards}.cube .face .profilepic{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);border-radius:50%;border:3px solid black;width:150px;height:150px;display:flex;justify-content:center;align-items:center;background-color:#000;color:#fff;font-size:2em}.cube .top{transform:rotateX(90deg) translateZ(150px);display:flex}.cube .bottom{transform:rotateX(-90deg) translateZ(150px)}.cube .right{transform:rotateY(90deg) translateZ(150px)}.cube .left{transform:rotateY(-90deg) translateZ(150px)}.cube .front{transform:rotateX(0) translateZ(150px)}.cube .reflectionFace{background-size:200% 30%;background-repeat:no-repeat;animation:reflectionLine 8s linear infinite;background-image:linear-gradient(110deg,rgba(25,47,135,0) 53%,rgba(190,181,181,.6) 55%,rgba(25,47,135,0) 57%);z-index:10}.cube .back{transform:rotateX(-180deg) translateZ(150px)}.xRotation,.yRotation,.zRotation,.container2{transform-style:preserve-3d;width:100%;height:100%;transform-origin:50% 50%}.yRotation{animation:rotationY 8s linear infinite}.zRotation{animation:rotationZ 8s linear infinite}.xRotation{animation:rotationX 8s linear infinite}.head{display:flex;justify-content:center}.righttext{display:flex;justify-content:center;transform:translate(-100%) rotate(90deg);transform-origin:right top;position:absolute;top:95%;left:95%;width:100%}.lefttext{display:flex;justify-content:center;transform:rotate(-90deg);transform-origin:left top;position:absolute;top:95%;left:5%;width:100%}.bottomtext{display:flex;justify-content:center;position:absolute;width:100%;bottom:0}.front-to-right{animation:front-to-right .5s forwards}.front-to-left{animation:front-to-left .5s forwards}.front-to-bottom{animation:front-to-bottom .5s forwards}.front-to-top{animation:front-to-top .5s forwards}.right-to-front{animation:right-to-front .5s forwards}.left-to-front{animation:left-to-front .5s forwards}.bottom-to-front{animation:bottom-to-front .5s forwards}.top-to-front{animation:top-to-front .5s forwards}