body {

  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  justify-content: center;
  align-items: center;
  display: flex;

  height: 100vh;
  margin: 0;
  background: rgb(0, 0, 0);

}
  
.viewport {

  width: 300px;
  height: 300px;
  perspective: 700px;

}
  
.scene {

  width: 100%;
  height: 100%;
  position: relative;
  
  transform-style: preserve-3d;

}
  
.kocka {

  width: 100%;
  height: 100%;
  position: relative;

  transform-style: preserve-3d;
  animation: spin 10s linear infinite;

}

.kocka div {

  position: absolute;
  width: 300px;
  height: 300px;
  
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  font-size:xx-large;
  color: rgb(1, 1, 1);
  font-weight: bold;
  

  border: 2px solid #000000;
  box-shadow: 0 0 15px rgb(0, 0, 0);

  animation: colorShift 2s linear infinite;

}
  
.prednja { background: rgb(255, 255, 255); transform: translateZ(150px); }

.zadnja  { background: #ffffff; transform: rotateY(180deg) translateZ(150px); }

.desna   { background: rgb(255, 255, 255); transform: rotateY(90deg) translateZ(150px); }

.lijeva  { background: rgb(255, 255, 255); transform: rotateY(-90deg) translateZ(150px); }

.gornja  { background: rgb(255, 255, 255); transform: rotateX(90deg) translateZ(150px); }

.donja   { background: rgb(255, 255, 255); transform: rotateX(-90deg) translateZ(150px); }
  

@keyframes spin {

  from {

    transform: rotateX(-20deg) rotateY(0deg);

  }
  to {

    transform: rotateX(-20deg) rotateY(360deg);

  }

}

@keyframes colorShift {
  0% { color: rgb(0, 0, 0); }
  50% { color: rgb(201, 0, 0); }
  100% { color: rgb(0, 0, 0); }
}