body {
  margin:0;
  padding:1rem;
  box-sizing:border-box;
  display:flex;
  height:100vh;
  background:rgba(40,30,40, 1);
  color:rgba(220,220,220,0.9);
  text-shadow:1px 1px 0 rgba(0,0,0,0.9);
  font-family:sans-serif;
  font-weight:bold;
}

canvas {
  width:100%;
  height:calc( 100vh - 7rem );
  background:rgba(60,40,80, 1);
  box-shadow:0 0 1em rgba(0,0,0,0.4);
  border:2px solid rgba(255,255,255,1);
  box-sizing: border-box;
}

#canvasContainer {
  display:flex;
  flex-direction:column;
  width:calc( 100vw - 17rem);
  padding:1rem;
  height:calc( 100vh - 3rem );
  box-sizing:border-box;
}

form {
  display:flex;
  flex-direction:column;
  width:15rem;
  background:rgba(0,0,0,0.1);
  box-sizing:border-box;
  padding:0.5rem;
  border-radius:1rem;
  box-shadow:0 0 1rem rgba(0,0,0,0.3);
  border:2px solid rgba(255,255,255,1);
  font-size:0.9rem;
  overflow:auto;
}

#data {
  height:5rem;
}

@media screen and (max-width:800px) {
  body {
    flex-direction: column;
    min-height:100vh;
    height:auto;
  }
  
  #canvasContainer {
    width:100%;
    padding:1rem;
    height:calc( 100vh - 10rem );
    
  }

  canvas {
    width:100%;
    height:100%;
  }
  
  form {
    width:20rem;
    margin: auto;
    height: 26rem;
  }

  #data {
    height:5rem;
}


}

form hr {
  width:100%;
  border:0;
  border-top:1px solid rgba(255,255,255,0.3);
}

form > div {
  display:flex;
  align-items:center;
  justify-content: flex-end;
}

form span {
  text-align: center;
}

form input.number {
  width:3rem;
  margin:0.2rem 1rem;
  background:rgba(60,40,80, 0.7);
  border:0;
  color:rgba(255,255,255,0.7);
  font-weight:bold;
  text-align:center;
}

form input.number:active, form input.number:focus {
  background:rgba(60,40,80, 1);
  color:rgba(255,255,255,1);
  box-shadow:0 0 0.4rem rgba(0,0,0,0.3);
}

form input.button {
  width:100%;
  margin:0.2rem 1rem;
  background:rgba(60,40,80, 1);
  color:rgba(255,255,255,1);
  border:0;
  
}