* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
}

.container {
  width: 100%;
  height: 100%;
  background: radial-gradient(#3e6690 0%, #111e34 100%);
}

.canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.box {
  width: 200px;
  margin: 0 auto;
  position: relative;
}
.box .back {
  width: 160px;
  height: 160px;
}
.box .back:before, .box .back:after {
  content: "";
  display: block;
  float: left;
}
.box .back:before {
  width: 80px;
  height: 110px;
  background: #4594cf;
  transform: skewY(-25deg);
}
.box .back:after {
  width: 80px;
  height: 110px;
  background: #50a3e0;
  transform: skewY(25deg);
}
.box .front {
  width: 160px;
  height: 110px;
  position: absolute;
  top: 38px;
  left: 0;
  z-index: 3;
}
.box .front:before, .box .front:after {
  content: "";
  display: block;
  float: left;
  box-shadow: 0 10px 10px -7px rgba(0, 0, 0, 0.5);
}
.box .front:before {
  width: 80px;
  height: 110px;
  background: #50a3e0;
  transform: skewY(25deg);
}
.box .front:after {
  width: 80px;
  height: 110px;
  background: #4595d0;
  transform: skewY(-25deg);
}
.box .shines {
  width: 160px;
  height: 110px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
.box .shines .core {
  width: 10px;
  height: 10px;
  margin: 60px auto 0 auto;
  background: #fff;
  border-radius: 100%;
  box-shadow: 0 0 30px 40px rgba(255, 255, 255, 0.8);
}
.box .shines .core-shade {
  width: 50px;
  height: 100px;
  margin: -100px auto 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 100%;
  box-shadow: 0 0 30px 40px rgba(255, 255, 255, 0.1);
  -webkit-animation: core-shading 2s infinite;
          animation: core-shading 2s infinite;
}
.box .shines .raising {
  position: absolute;
  width: 0;
  height: 600px;
  bottom: 30px;
  left: 50%;
  z-index: 2;
  box-shadow: 0 0 50px 30px rgba(255, 255, 255, 0.3);
}
.box .shines .light {
  position: absolute;
  width: 0;
  height: 600px;
  bottom: 30px;
  left: 50%;
  z-index: 2;
  box-shadow: 0 0 40px 10px rgba(240, 208, 0, 0.2);
  -webkit-animation: shine 5s 0s infinite;
          animation: shine 5s 0s infinite;
}
.box .shines .shade {
  position: absolute;
  width: 0;
  height: 600px;
  bottom: 30px;
  z-index: 2;
  box-shadow: 0 0 10px 1px rgba(255, 255, 255, 0.1);
}
.box .shines .shade.one {
  left: 40%;
  -webkit-animation: shade-one 5s 0s infinite;
          animation: shade-one 5s 0s infinite;
}
.box .shines .shade.two {
  left: 46%;
  -webkit-animation: shade-two 5s 0s infinite;
          animation: shade-two 5s 0s infinite;
}
.box .shines .shade.three {
  left: 53%;
  -webkit-animation: shade-three 5s 0s infinite;
          animation: shade-three 5s 0s infinite;
}

@-webkit-keyframes shine {
  0%, 50%, 100% {
    left: 50%;
  }
  25% {
    left: 45%;
  }
  75% {
    left: 55%;
  }
}

@keyframes shine {
  0%, 50%, 100% {
    left: 50%;
  }
  25% {
    left: 45%;
  }
  75% {
    left: 55%;
  }
}
@-webkit-keyframes shade-one {
  0%, 50%, 100% {
    left: 40%;
  }
  25% {
    left: 47%;
  }
  75% {
    left: 54%;
  }
}
@keyframes shade-one {
  0%, 50%, 100% {
    left: 40%;
  }
  25% {
    left: 47%;
  }
  75% {
    left: 54%;
  }
}
@-webkit-keyframes shade-two {
  0%, 50%, 100% {
    left: 46%;
  }
  25% {
    left: 41%;
  }
  75% {
    left: 50%;
  }
}
@keyframes shade-two {
  0%, 50%, 100% {
    left: 46%;
  }
  25% {
    left: 41%;
  }
  75% {
    left: 50%;
  }
}
@keyframes shade-one {
  0%, 50%, 100% {
    left: 53%;
  }
  25% {
    left: 45%;
  }
  75% {
    left: 47%;
  }
}
@-webkit-keyframes core-shading {
  50% {
    height: 30px;
    margin: -90px auto 0 auto;
  }
}
@keyframes core-shading {
  50% {
    height: 30px;
    margin: -90px auto 0 auto;
  }
}