#game {
  pointer-events: none;
  position:absolute;
  top:50px;
  left:20px;
  width:calc(100% - 280px);
  max-width:calc(100% - 40px);
  min-width:calc(300px - 40px);
  height:calc(100% - 140px);
  border-radius:10px;
  /* this fixes the overflow:hidden in Chrome not clipping it's contents to the border-radius
  more information here: https://stackoverflow.com/questions/5736503/how-to-make-css3-rounded-corners-hide-overflow-in-chrome-opera*/
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
  overflow:hidden;
  z-index:0;
}

#street-canvas {
  position:absolute;
  top:0;
  left:0;
  overflow:hidden;
}

#world {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  box-shadow:inset 0 0 60px 10px rgba(0,0,0,0.1);
  transition: transform 2s ease-in-out;
}

#world.flip {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

#fps {
  position: absolute;
  top: 60px;
  left: 220px;
  z-index: 1;
  font-size: 1.5em;
  color: greenyellow;
}

#game-column-right {
    position: absolute;
    top: 55px;
    right: 280px;
    width: 170px;
}