@font-face {
  font-family: "Bai Jamjuree";
  font-weight: 700;
  src: url(BaiJamjuree700.woff2) format(woff2);
}

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

html {
  background-color: #000000;
  font-family: "Bai Jamjuree", sans;
  font-size: 450%;
}

a {
  color: #000000;
  text-decoration-line: none;
}

.frame {
  background-color: #FFFFFF;

  width: min-content;

  padding: 0 .3em;
  border-radius: 1em;

  user-select: none;
}

.frame:hover {
  background-color: #FFFF00;
}

.scene {
  height: 100%;
  width: 100%;
  perspective: 15em;

  display: flex;

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

.cube {
  height: 5em;
  width: 5em;

  position: relative;

  transform: translateZ(-2.5em);
  transform-style: preserve-3d;
}

.face {
  background-size: cover;
  background-position: center;

  width: 5em;
  height: 5em;

  display: flex;

  align-items: center;
  justify-content: center;

  position: absolute;
}

.front {
  transform: rotateY(0deg) translateZ(2.5em);
}

.top {
  transform: rotateX(90deg) translateZ(2.5em);
}

.back {
  transform: rotateY(180deg) translateZ(2.5em);
}

.bottom {
  transform: rotateX(-90deg) translateZ(2.5em);
}

.right {
  transform: rotateY(90deg) translateZ(2.5em);
}

.left {
  transform: rotateY(-90deg) translateZ(2.5em);
}