/* SVG SHIT */
#front .st0{fill:#FFFFFF;stroke:#FF36B3;stroke-miterlimit:10;}
#front .st1{fill:#FF36B3;stroke:#FF36B3;stroke-miterlimit:10;}
#front .st2{fill:#FF36B3;}

/* temp */
#top .st0, #right .st0, #left .st0{fill:#FFDF1D;stroke:#2784B8;stroke-miterlimit:10;}
#top .st1, #right .st1, #left .st1{fill:#FFFFFF;stroke:#2784B8;stroke-miterlimit:10;}
#top .st2, #right .st2, #left .st2{fill:#2784B8;stroke:#2784B8;stroke-miterlimit:10;}
#top .st3, #right .st3, #left .st3{fill:#2784B8;}

#bottom .st0{fill:#9B1F2B;}
#bottom .st1{fill:#294066;}
#bottom .st2{fill:#FFFFFF;}
#bottom .st3{fill:#A31A2E;}
#bottom .st4{fill:none;}

#back .st0{fill:#B70000;}
#back .st1{fill:#FFFFFF;}
#back .st2{fill:#000900;}
#back .st3{fill:#008335;}
#back .st4{fill:#05702C;}

* {
  box-sizing: border-box;
}

::-moz-selection {
  background: transparent;
}

::selection {
  background: transparent;
}

p {
  font-size: 2rem;
  font-family: 'Concert One', cursive;
  cursor: crosshair;
}

@media only screen and (max-width: 767px) {
    p {
      font-size: 2rem;
    }
}

body {
  margin: 0;
  padding: 0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

main {
  width: 500px;
  height: 500px;
  /* perspective: 1000px; */
}

#cube {
  width: 500px; /* can change */
  height: 500px; /* can change */
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.show-front #front,
.show-right #right,
.show-back #back,
.show-left #left,
.show-top #top,
.show-bottom #bottom {
  opacity: 1;
  /* background-color: #fff; */
}

svg {
  position: absolute;
  width: 500px;
  height: 500px;
  opacity: 0.2;
}

svg#front  { transform: rotateY(  0deg) translateZ(100px); }
svg#right  { transform: rotateY( 90deg) translateZ(100px); }
svg#back   { transform: rotateY(180deg) translateZ(100px); }
svg#left   { transform: rotateY(-90deg) translateZ(100px); }
svg#top    { transform: rotateX( 90deg) translateZ(100px); }
svg#bottom { transform: rotateX(-90deg) translateZ(100px); }

#cube.show-front  { transform: translateZ(-100px) rotateY(   0deg); }
#cube.show-right  { transform: translateZ(-100px) rotateY( -90deg); }
#cube.show-back   { transform: translateZ(-100px) rotateY(-180deg); }
#cube.show-left   { transform: translateZ(-100px) rotateY(  90deg); }
#cube.show-top    { transform: translateZ(-100px) rotateX( -90deg); }
#cube.show-bottom { transform: translateZ(-100px) rotateX(  90deg); }

@media only screen and (max-width: 767px) {
  .wrapper {
    zoom: 0.7;
  }

  body {
    height: 80vh;
  }
}

aside {
  position: absolute;
  top: 0;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #1443ff;
}

aside.left {
  left: 10vw;
  right: auto;
  color: #14ffbc;
}

aside.center {
  height: 95vh;
  color: #ffc444;
  display: flex;
  align-items: flex-end;
  display: none;
}

aside.right {
  right: 10vw;
}

aside p {
  text-align: center;
  letter-spacing: 2px;
  transform: rotate(-90deg);
}

aside.center p {
  transform: rotate(0);
}

aside.left p {
  transform: rotate(90deg);
}

@media only screen and (max-width: 767px) {
  aside.left,
  aside.center,
  aside.right {
    position: absolute;
    height: auto;
    bottom: 20vh;
    display: flex;
    align-items: flex-end;
  }

  aside.left p,
  aside.center p,
  aside.right p {
    transform: rotate(0);
  }
}