App.module.scss

$grid-color: rgb(146, 146, 146);
$world-width: 1000px;

.lower {
  display: flex;
  width: 100%;
  flex-grow: 1;
  flex-shrink: 1;
  max-height: 100vh;
}

.main {
  background: radial-gradient(#99a, #556);
  overflow: hidden;
  position: relative;
  flex-grow: 1;
  flex-shrink: 1;
  perspective: 800px;
  touch-action: none;
  * {
    transform-style: preserve-3d;
    position: absolute;
  }
}

.nav {
  padding: 8px 14px;
  display: none;
  align-items: center;
  justify-content: space-between;
  h1 {
    font-size: 1.3rem;
  }
  h2 {
    font-size: 0.7rem;
  }
  @media screen and (max-width: 900px) {
    display: flex;
  }
}

.workspace {
  flex-grow: 1;
  display: flex;
  position: relative;
  button {
    height: var(--workspace-button-size);
  }
}

.world {
  width: $world-width;
  height: $world-width;
  left: calc(50% - calc($world-width/2));
  top: calc(50% - calc($world-width/2));
  border: 1px solid $grid-color;
  background-image: linear-gradient(transparent, transparent 49.9%, red 49.9%, red 50.1%, transparent 50.1%),
    linear-gradient(90deg, transparent, transparent 49.9%, blue 49.9%, blue 50.1%, transparent 50.1%),
    repeating-linear-gradient(transparent, transparent 49px, $grid-color 49px, $grid-color 50px),
    repeating-linear-gradient(90deg, transparent, transparent 49px, $grid-color 49px, $grid-color 50px);

  position: absolute;
  background-color: #00000035;
  transform: rotateX(var(--rotate-x)) rotateZ(var(--rotate-z)) scale3d(var(--zoom), var(--zoom), var(--zoom)) translateZ(var(--translate-z));
}