body{
  /* height: 100%;
  width: 100%; */
  background-color: green;
  margin-left: 16px;
  margin-right: 16px;
  min-height: calc(100vh - 16px);
  margin-top: 8px;
  margin-bottom: 8px;
  grid-template-columns: repeat(4,1fr);
  /* large */
  /* grid-template-columns: repeat(12,1fr); */
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  grid-template-rows: 25vw 1fr 25vw;
  display: grid;
}

video{
  height: 100vh;
  /* width: 100vw; */
  /* filter: grayscale(90%); */
}

.bound{
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: white;
}

/* .tabs{
  grid-column: 1 / 13;
  grid-row: -1 / -2;
} */

.button1{
  grid-column: 1 / 2;
  grid-row: -1 / -2;
}

.button2{
  grid-column: 2 / 3;
  grid-row: -1 / -2;
}

.button3{
  grid-column: 3 / 4;
  grid-row: -1 / -2;
}

.button4{
  grid-column: 4 / 5;
  grid-row: -1 / -2;
}

.button5{
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.char-display{
  grid-column: 1 / 5;
  grid-row: 2 / 3 ;
  font-size: 100vw;
  line-height: normal;
  /* justify-self: center; */
}