:root{
  --one-tile:25dvh;
  --one-tile-neg:-25dvh;
  --full-depth:100dvh;
  --full-depth-neg:-100dvh;
  --half-depth:50dvh;
  --half-depth-neg:-50dvh;
  --font-size-def:10dvh;
  --dia-pad-x:4.6875dvh;
  --dia-bottom:47dvh;
  --sign-thick:3.125dvh;
  --sign-height:18.75dvh;
  --sign-top:-46.875dvh;
  --sign-bottom:-28.125dvh;
  --sign-font-size:4dvh;
  --one-px:1.5625dvh;
  --two-px:3.125dvh;
  --tag-font-size:3.5dvh;
  --orbit-near:-45dvh;
  --orbit-far:-55dvh;
  --bag-size:40dvh;
  --bag-half-neg:-20dvh;
  --fly-bottom:32dvh;
}
@media only screen and (max-aspect-ratio: 1){
  :root{
    --one-tile:25dvw;
    --one-tile-neg:-25dvw;
    --full-depth:100dvw;
    --full-depth-neg:-100dvw;
    --half-depth:50dvw;
    --half-depth-neg:-50dvw;
    --font-size-def:10dvw;
    --dia-pad-x:4.6875dvw;
    --dia-bottom:47dvw;
    --sign-thick:3.125dvw;
    --sign-height:18.75dvw;
    --sign-top:-46.875dvw;
    --sign-bottom:-28.125dvw;
    --sign-font-size:4dvw;
    --one-px:1.5625dvw;
    --two-px:3.125dvw;
    --tag-font-size:3.5dvw;
    --orbit-near:-45dvw;
    --orbit-far:-55dvw;
    --bag-size:40dvw;
    --bag-half-neg:-20dvw;
    --fly-bottom:32dvw;
  }
}

@font-face {
  font-family: mcreg;
  src: url(MinecraftRegular-Bmg3.otf);
}
@keyframes shake {
  0% {translate:50dvw 0 var(--half-depth-neg);}
  2% {translate:49.5dvw 0 var(--half-depth-neg);}
  4% {translate:50.5dvw 0 var(--half-depth-neg);}
  6% {translate:49.5dvw 0 var(--half-depth-neg);}
  8% {translate:50.5dvw 0 var(--half-depth-neg);}
  10% {translate:50dvw 0 var(--half-depth-neg);}
  100% {translate:50dvw 0 var(--half-depth-neg);}
}
@keyframes orbit {
  0% {translate:0 0 var(--orbit-far);z-index:90;}
  50% {translate:0 0 var(--orbit-near);z-index:110;}
  100% {translate:0 0 var(--orbit-far);z-index:90;}
}
@keyframes orbit-x {
  0% {left:55dvw;}
  50% {left:45dvw;}
  100% {left:55dvw;}
}

html, body, body > div {
  height:100dvh;
  width:100dvw;
  margin:0;
  font-family:mcreg, monospace;
}

body > div {
  position:fixed;
  backface-visibility:hidden;
  background-blend-mode:exclusion;
  transform-origin: 0% 0%;
}

body{
  perspective:var(--full-depth);
  overflow:hidden;
  font-size:var(--font-size-def);
}

#wall_back,#wall_left,#wall_right{
  background-image:url(wall.png);
  background-size:var(--one-tile);
  background-repeat:repeat;
  background-position: 0 100%;
  image-rendering:pixelated;
}
#wall_back{
  z-index:0;
  translate:0 0 var(--full-depth-neg);
}
#wall_left{
  rotate:0 1 0 90deg;
  width:var(--full-depth);
}
#wall_right{
  translate:100dvw 0 var(--full-depth-neg);
  rotate:0 1 0 -90deg;
  width:var(--full-depth);
}
#floor{
  z-index:0;
  translate:0 100dvh var(--full-depth-neg);
  rotate:1 0 0 90deg;
  height:var(--full-depth);
  background-image:url(floor.png);
  background-size:var(--one-tile);
  background-repeat:repeat;
  image-rendering:pixelated;
}
#ceiling{
  z-index:0;
  rotate:1 0 0 -90deg;
  height:var(--full-depth);
  background-image:url(ceiling.png);
  background-size:var(--one-tile);
  background-repeat:repeat;
  image-rendering:pixelated;
}
#bag{
  z-index:100;
  width:var(--bag-size);
  height:var(--bag-size);
  left:var(--bag-half-neg);
  bottom:0;
  translate:50dvw 0 var(--half-depth-neg);
  background-image:url(bag.png);
  background-size:cover;
  image-rendering:pixelated;
  cursor:pointer;
  animation:shake 5s ease-in-out 0s infinite;
}
#fly{
  width:var(--one-px);
  height:var(--one-px);
  background-color:black;
  display:inline-block;
  position:absolute;
  bottom:var(--fly-bottom);
  left:50dvw;
  animation:orbit 5s ease-in-out 0s infinite, orbit-x 5s ease-in-out 1.25s infinite;
}
#dia_cont{
  z-index:101;
  box-sizing:border-box;
  display:none;
  height:50dvh;
  translate:0 0 var(--half-depth-neg);
  pointer-events:none;
  text-align:center;
  white-space:nowrap;
  bottom:var(--dia-bottom);
  padding:0 var(--two-px);
}
#dia{
  display:inline-block;
  background:white;
  padding:var(--one-px) var(--dia-pad-x);
  vertical-align:bottom;
  white-space:normal;
  border:var(--one-px) solid peru;
}
#dia::after{
  content:"";
  display:inline-block;
  border-width:var(--two-px);
  border-style:solid;
  border-color:peru transparent transparent peru;
  position:absolute;
  top:100%;
  left:50%;
}
.vert-spacer-bottom{
  display:inline-block;
  width:0;
  height:100%;
  vertical-align:bottom;
}
#tag{
  font-size:var(--tag-font-size);
  position:absolute;
  color:white;
  opacity:0.2;
  bottom:var(--one-px);
  right:var(--one-px);
}
#sign_top,#sign_bottom,#sign_left,#sign{
  background-image:url(floor.png);
  background-size:var(--one-tile);
  background-repeat:repeat-y;
  image-rendering:pixelated;
  bottom:0;
  transform-origin: 0% 100%;
}
#sign_top{
  width:var(--one-tile);
  height:var(--sign-thick);
  transform:rotateX(90deg) rotateZ(-90deg);
  translate:var(--sign-thick) var(--sign-top) var(--one-tile-neg);
  background-position:0 100%;
}
#sign_bottom{
  width:var(--one-tile);
  height:var(--sign-thick);
  transform:rotateX(-90deg) rotateZ(-90deg);
  translate:var(--sign-thick) var(--sign-bottom) var(--half-depth-neg);
  background-position:0 100%;
}
#sign_left{
  width:var(--sign-thick);
  height:var(--sign-height);
  background-image:url(floor.png);
  translate:0 var(--sign-bottom) var(--one-tile-neg);
}
#sign{
  width:var(--one-tile);
  height:var(--sign-height);
  rotate:0 1 0 90deg;
  translate:var(--sign-thick) var(--sign-bottom) var(--one-tile-neg);
}
#sign textarea{
  border-style:none;
  background-color:transparent;
  width:100%;
  height:100%;
  min-width:100%;
  max-width:100%;
  min-height:100%;
  max-height:100%;
  font-size:var(--sign-font-size);
  text-align:center;
  overflow:hidden;
}
#sign textarea:focus{
  border-style:none;
  /* outline:none; */
}