html, body {
  margin: 0;
  padding: 0;
  text-align: center;
  height: 100%;
  overflow: hidden;
}

body {
  background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  background-size: 400% 400%;
  animation: gradient 15s ease infinite;
  font-family: "Boogaloo", cursive;
  font-size: 100%;
  position: relative;
}
body * {
  -webkit-tap-highlight-color: transparent;
}

.splash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  width: 80vmin;
  filter: drop-shadow(10px 10px 5px black);
}
.splash img {
  width: 60vmin;
  display: block;
  margin: 0 auto;
}
.splash h3 {
  font-size: 10vmin;
  margin: 0.2em;
}
.splash p {
  font-size: 5vmin;
  margin: 0.2em;
}
.splash h3, .splash p {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
}

.cube {
  height: 96vmin;
  left: 50%;
  margin: -48vmin;
  position: absolute;
  top: 50%;
  width: 96vmin;
  transform: rotateX(45deg) rotateZ(45deg);
  transform-style: preserve-3d;
}

.face {
  float: left;
  height: 48vmin;
  width: 48vmin;
  position: absolute;
  background: #222;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.face.top {
  background-color: #f66;
  position: relative;
}

.face.left {
  background-color: #e55;
  transform: rotateX(-90deg) translateY(48vmin);
  transform-origin: 100% 100%;
}

.face.right {
  background-color: #d44;
  transform: rotateZ(90deg) rotateX(-90deg) translateX(48vmin);
  transform-origin: 100% 0;
}

.face.bottom {
  transform: translateZ(-48vmin);
  box-shadow: black 4vmin 4vmin 10px 0px;
}

.asdf .mirror-top, .asdf .mirror-left, .asdf .mirror-right {
  transform-origin: 500% 500%;
}

.mirror-top .content {
  transform: rotateX(45deg) rotateZ(45deg);
}

.mirror-left .content {
  transform: rotateX(45deg) rotateZ(45deg) rotateX(-90deg);
}

.mirror-right .content {
  transform: rotateX(45deg) rotateZ(45deg) rotateZ(90deg) rotateX(-90deg);
}

.face.top, .mirror-top {
  filter: saturate(1.25);
}
.face.top .content, .mirror-top .content {
  background-image: url("../svg/top.svg");
}

.face.left, .mirror-left {
  filter: brightness(0.85);
}
.face.left .content, .mirror-left .content {
  background-image: url("../svg/left.svg");
}

.face.right, .mirror-right {
  filter: brightness(0.6);
}
.face.right .content, .mirror-right .content {
  background-image: url("../svg/right.svg");
}

.face.done .draggable .content {
  background-color: #98ddff;
}

.draggable {
  width: 100%;
  cursor: pointer;
  position: relative;
}
.draggable::before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 100%;
}
.draggable .content {
  box-shadow: inset 0 0 0 0.25em rgba(0, 0, 0, 0.1);
  background-color: #fff;
  position: absolute;
  background-size: calc(var(--size) * 100%);
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  transition: background 0.1s linear;
  background-position: calc( var(--col) * -100%) calc( var(--row) * -100%);
}
.draggable.draggable--over .content {
  background-color: #ee7752;
}
.draggable.draggable-source--placed .content {
  background-color: #e73c7e;
}

@keyframes gradient {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/*# sourceMappingURL=emberapp.css.map */