* {
  box-sizing: border-box;
}
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
}
body{
  display:flex;
  flex-direction: column;
}
.header, .footer{
  display: flex;
  gap: 4px;
  padding: 4px;
  align-items: center;
}
.content{
  height: 100%;
  width: 100%;
  padding: 4px;
  display:flex;
  gap: 4px;
  min-height: 0;
/*  border: 1px solid green; */
}
@media(orientation: portrait){
  .content {
    flex-direction: column;
  }
}
.wrapper{
/*  border: 1px solid blue;  */
  position: relative;
  height: 100%;
  width: 100%;
  min-height: 0;
}
.gameCanvas{
/*  border : 1px solid lavender;  */
  width: 100%;
  height: 100%;
}
#globalCanvasId{
  cursor: grab;
}
.joyDiv {
  position: fixed;
  bottom: 15px;
  left: 50%;
  margin-left: -50px;
  height: 100px;
  width: 100px;
}