html {
  height: 100%;
}
body {
  margin: 0;
  height: 100%;
  background: radial-gradient(#607d8b 15%, #000000 100%);
}
body,
body * {
  box-sizing: border-box;
}
.cube {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  transform: rotateX(24deg) rotateY(40deg) translate(-100%, -140%);
}
.cube > div {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  border-radius: 8.33333px;
  background: radial-gradient(rgb(141 242 255), rgb(107 209 255));
  box-shadow: 0 0 4px rgba(255, 255, 255, 0.2),
    inset 0 0 4px rgba(255, 255, 255, 0.2);
}
.cube > div:nth-child(1) {
  transform: translate3d(0, 0, 50px);
}
.cube > div:nth-child(2) {
  transform: rotateX(90deg) translate3d(0, 0, 50px);
}
.cube > div:nth-child(3) {
  transform: rotateX(180deg) translate3d(0, 0, 50px);
}
.cube > div:nth-child(4) {
  transform: rotateX(270deg) translate3d(0, 0, 50px);
}
.cube > div:nth-child(5) {
  transform: rotateY(90deg) translate3d(0, 0, 50px);
}
.cube > div:nth-child(6) {
  transform: rotateY(-90deg) translate3d(0, 0, 50px);
}

.cube.two {
  transform: rotateX(-30deg) rotateY(-27deg) translate(-196%, 34%);
}
.cube.three {
  transform: rotateX(148deg) rotateY(71deg) translate(10%, -105%);
}

.glass {
  position: relative;
  overflow: hidden;
  margin: 0 auto;
  width: 280px;
  height: 320px;
  border-radius: 140px/50px;
  background-color: rgb(255 255 255 / 0.15);
  top: 28%;
  border: 10px solid rgb(255 255 255 / 0.15);
  box-shadow: 0px 5px 15px -10px #000;
}
.glass:before,
.glass:after {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 280px;
  height: 105px;
  border-radius: 140px/50px;
  content: "";
  border: 10px solid rgb(255 255 255 / 0.14);
  box-sizing: border-box;
  box-shadow: 0 0 100px 1000px #ffffff3d;
  z-index: 333;
}
.glass:after {
  top: initial;
  bottom: -10px;
  border: 10px solid rgb(0 0 0 / 18%);
  box-shadow: none;
  z-index: -1;
}