html,
body {
  height: 100%;
  color: #fff;
}

main {
  max-width: 42em;
}

.cube-container {
  margin-top: 100px;
  perspective: 800px;
  perspective-origin: 50% 300px;
}

@media (min-width: 576px) {
  .cube-container {
    transform: scale(1.2);
    margin-top: 120px;
  }
}

@media (min-width: 768px) {
  .cube-container {
    transform: scale(1.5);
    margin-top: 160px;
  }
}

@media (min-width: 992px) {
  .cube-container {
    transform: scale(1.8);
    margin-top: 220px;
  }
}

@media (min-width: 1200px) {
  .cube-container {
    transform: scale(2);
    margin-top: 240px;
  }
}

@keyframes spin {
  from { transform: rotateY(0); }
  to { transform: rotateY(-360deg); }
}

@keyframes light {
    0% { filter: brightness(100%); }
    5% { filter: brightness(100%); }
   50% { filter: brightness(80%); }
   90% { filter: brightness(100%); }
  100% { filter: brightness(100%); }
}

.cube {
  position: relative;
  width: 200px;
  height: 200px;
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;

}

.cube div {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #fff;
  background: #fff url("sugar.jpg");
  background-size: 100%;
}

.front {
  transform: translateZ(100px);
  animation: light 5s infinite;
  animation-delay: -4.5s;
}
.right {
  transform: rotateY(-270deg) translateX(100px);
  transform-origin: top right;
  animation: light 5s infinite;
  animation-delay: -3.25s;
}
.back {
  transform: translateZ(-100px) rotateY(180deg);
  animation: light 5s infinite;
  animation-delay: -2s;
}
.left {
  transform: rotateY(270deg) translateX(-100px);
  transform-origin: center left;
  animation: light 5s infinite;
  animation-delay: -0.75s;
}
.top {
  transform: rotateX(-90deg) translateY(-100px);
  transform-origin: top center;
}
.bottom {
  transform: rotateX(90deg) translateY(100px);
  transform-origin: bottom center;
  filter: brightness(95%);
}