#box{
  width: 80%;
  margin: auto;
  filter: opacity(85%);
}
@media (max-width: 768px){
  #box{
    display: none;
  }
}
.text-box{
  position: absolute;
  top: 0;
  left: 0;
  font-size: 8px !important;
  padding: 4px !important;
  background-color: #161f26;
  border-color: #000;
  color: #fff;
}
.text-box:hover{
  background-color: #3eadaf;
  border-color: #1f5b5d;
  transform: scale(1.01);
}
.cube-unit {
  fill-opacity: .9;
  stroke-miterlimit: 0;
}

.blue-cube {
  --mainColor: #cbd3dd;
  --strokeColor: #374d5a;
  --lightColor: #dfdfdf;
  --darkColor: #99a3b1;
}

@keyframes moveX {
  to {
    transform: translateX(var(--translate, 35px));
  }
}
@keyframes moveY {
  to {
    transform: translateY(var(--translate, -35px));
  }
}
@keyframes icon {
  to {
 opacity: 0.9;
  }
}
.icon {
  opacity: 0;
  animation: 2s icon alternate 3 paused;
  animation-fill-mode: forwards;
}
.m-left, .m-right {
  animation: 2s moveX alternate 3 paused;
  animation-fill-mode: forwards;
}

.m-up, .m-down {
  animation: 2s moveY alternate 3 paused;
  animation-fill-mode: forwards;
}

.m-left {
  --translate: -50px;
}

.m-right {
  --translate: 50px;
}

/*svg:hover * {
  animation-play-state: running;
}*/
.button:active{
  bottom: 0 !important;
}