.cube {
  --size: 25px;
  --offset: calc(var(--size) / -2);

  display: inline-block;
  width: var(--size);
  height: var(--size);
  margin: 0.5em 1.2em 0.5em 1em;
  perspective: 50px;
}
.cube,
.cube * {
  box-sizing: border-box;
}
.cube .sides {
  position: relative;
  width: var(--size);
  height: var(--size);
          animation: rotate 4s infinite linear;
  transform-style: preserve-3d;
}
.cube .sides > * {
  position: absolute;
  width: var(--size);
  height: var(--size);
  background: rgb(255, 148, 77);
  box-shadow: 
    inset 0 0 4px #F00,
    0 0 2px 1px #f00;
}
.cube .sides > .front {
  transform: rotateY(0deg) translateZ(var(--offset));
}
.cube .sides > .back {
  filter: hue-rotate(60deg);
  transform: rotateY(180deg) translateZ(var(--offset));
}
.cube .sides > .left {
  filter: hue-rotate(120deg);
  transform: rotateY(-90deg) translateZ(var(--offset));
}
.cube .sides > .right {
  filter: hue-rotate(180deg);
  transform: rotateY(90deg) translateZ(var(--offset));
}
.cube .sides > .top {
  filter: hue-rotate(240deg);
  transform: rotateX(90deg) translateZ(var(--offset));
}
.cube .sides > .bottom {
  filter: hue-rotate(300deg);
  transform: rotateX(-90deg) translateZ(var(--offset));
}

@keyframes rotate {
  from {
    transform: translateZ(var(--offset)) rotateY(0deg) rotateX(0deg) rotateZ(0deg);
  }
  to {
    transform: translateZ(var(--offset)) rotateX(-360deg) rotateY(-720deg) rotateZ(720deg);
  }
}

body {
  background: #eef;
  color: #222;
  font: normal 16px monospace, sans-serif;
  padding: 1em;
  max-width: 720px;
  margin: auto;
}
blockquote {
  margin: 0;
  padding: 1ch;
  background: #fff;
  border: 1px solid #000;
  border-bottom-width: 3px;
  font-style: italic;
  margin-bottom: 2em;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
ul {
  padding-left: 3ch;
  margin: 1ch 0 1ch 0;
}
li {
  list-style-type: square;
}
a {
  text-decoration: none;
  color: rgb(53, 105, 237);
}
a:hover {
  text-decoration: underline;
}
h3 {
  margin: 1ch 0;
  font: inherit;
  font-weight: bold;
}
h2 {
  font: inherit;
  margin-left: -1ch;
  margin-bottom: -0.5ch;
}
code {
  background: #ddd;
  border-radius: 5px;
}

p{
  color: #888;
  font-style: italic;
}