/* micro styles reset */
*, :before, :after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  font-family: inherit;
}
html {
  box-sizing: border-box;
  height: 100%;
  overflow: hidden;
}
/*layout*/
body {
  background-image: url(workstation.jpg);
  background-size: 100% auto;
  background-position: 50% 0%;
  background-repeat: no-repeat;
  height: 100%;
  font-size: calc(1em + 1vw);
  font-family: monospace;
  perspective: 68vw;
  perspective-origin: 69vw 45vw;
}
.wrapper {
  position: relative;
  transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vw, 5.3vw, -27.4vw);
  transform-origin: top right;
  color: #DA0;
  padding: 1vw;
  height: 75vw;
  width: 100vw;
  margin: 0 auto;
  overflow: auto;
}
@media (min-width: 100vh) {
  body {
    background-size: 100vh auto;
    font-size: calc(1em + 1vh);
    font-family: monospace;
    perspective: 68vh;
    perspective-origin: calc(50vw + 19vh) 45vh;
  }
  .wrapper {
    transform: rotateZ(1.3deg) rotateX(-8.8deg) rotateY(-9.3deg) translate3d(-14.9vh, 5.3vh, -27.4vh);
    transform-origin: top right;
    color: #DA0;
    padding: 1vh;
    width: 100vh;
    height: 75vh;
  }
}