* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 18vh;
}

.block {
  width: 8vh;
  height: 8vh;
  position: relative;
  transform-style: preserve-3d;
  animation: rotate 15s ease-in-out infinite;
  animation-timing-function: cubic-bezier(0.42,0,0.58,1);
  transform: rotateZ(60deg);
  image-rendering: pixelated;
}

.top, .bottom, .side {
  position: absolute;
  width: 8vh;
  height: 8vh;
  background-size: cover;
}

.top {
  background-image: url('top_texture.png'); /* Hier die URL zur Texturen für die Oberseite einfügen */
  transform: translateY(-4vh) rotateX(90deg);
  filter: brightness(1.4); /* Die Helligkeit dieser Seite zurücksetzen */
}

.bottom {
  background-image: url('bottom_texture.png'); /* Hier die URL zur Texturen für die Unterseite einfügen */
  transform: translateY(4vh) rotateX(90deg);
  filter: brightness(0.2); /* Die Helligkeit dieser Seite zurücksetzen */
}

.side {
  background-image: url('side_texture.png'); /* Hier die URL zur Texturen für die Seiten einfügen */
  filter: brightness(0.8); /* Hier kannst du den Wert anpassen, um die Helligkeit zu steuern */
}

.side:nth-child(1) {
  transform: rotateY(0deg) translateZ(4vh);
  filter: brightness(1); /* Die Helligkeit dieser Seite zurücksetzen */
}

.side:nth-child(2) {
  transform: rotateY(90deg) translateZ(4vh);
  filter: brightness(0.75); /* Die Helligkeit dieser Seite zurücksetzen */
}

.side:nth-child(3) {
  transform: rotateY(180deg) translateZ(4vh);
  filter: brightness(0.6); /* Die Helligkeit dieser Seite zurücksetzen */
}

.side:nth-child(4) {
  transform: rotateY(-90deg) translateZ(4vh);
  filter: brightness(0.4); /* Die Helligkeit dieser Seite zurücksetzen */
}

@keyframes rotate {
  from {
    transform: rotateX(-22.5deg) rotateY(-315deg) rotateZ(0deg);
  }
  to {
    transform: rotateX(-22.5deg) rotateY(45deg) rotateZ(360deg);
  }
}