html, body {
  margin: 0;
  padding: 20px;
}

canvas {
  display: block;
}

/*
#cvs {
  background-color: rgb(206, 208, 92);
  width: 400px;
  margin: 10px auto auto auto;
  border: 3px solid green;
  position: fixed;  //don't use
} */

#container {
  display: grid;
  /*
   * Left column = width needed by Div1.
   * Right column = everything else.
   */
  grid-template-columns: max-content 1fr;
  column-gap: 30px;
  margin-top: 10px;
  padding: 0 20px;
  width: 100%;
  box-sizing: border-box;
  align-items: start;
}

#Div1 {
  grid-column: 1;
  border: 1px solid green;
  padding: 10px;
  width: max-content;
  box-sizing: border-box;
  min-height: 100px;
  font-size: 1.2em;
}

#rightColumn {
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 406px;
  column-gap: 30px;
  row-gap: 20px;
  align-items: start;
}

#Div2 {
  grid-column: 1;
  grid-row: 1;
  border: 2px solid rgb(0, 255, 255);
  padding: 10px;
  box-sizing: border-box;
  min-height: 100px;
  font-size: 1.2em;
}


#cvs {
  grid-column: 2;
  grid-row: 1;
  background-color: rgb(206, 208, 92);
  width: 400px;
  margin: 0;
  border: 3px solid green;
  box-sizing: content-box;
}


/*
 * Explanation/instruction box.
 *
 */
#Div4 {
  grid-column: 1 / 3;
  grid-row: 2;
  border: 2px solid rgb(0, 150, 0);
  padding: 15px;
  box-sizing: border-box;
  min-height: 120px;
  font-size: 1.1em;
}

#npts {
  width: 8ch;
}