body {
  background: #333;
  color: #fff;
}

header {
  width: 100%;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;
}

header h1 {
  font: bold 2rem monospace;
}

/* -------------------------------------------------------------------------- */

main {
  height: calc(100vh - 200px);

  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 10rem;
}

#body__item {
  width: 100px;
  height: 100px;
  background: rgb(0, 110, 255);
  border-radius: 15px;
  animation: loading 2s linear infinite;
}

@keyframes loading {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: rotateX(0) rotateY(180deg);
  }
  100% {
    transform: rotateX(180deg) rotateY(180deg);
  }
}

/* -------------------------------------------------------------------------- */

footer h4 {
  font: 500 1.3rem monospace;
  height: 100px;

  display: flex;
  align-items: center;
  justify-content: center;
}

footer h4 a {
  margin-left: 0.5rem;
}