body {
  background-color: grey;
}

.scrollingdiv {
  display: grid;
  grid-template-areas: "box1 box2";
  grid-template-columns: 40% 60%;

  background-color: purple;
  background-image: url("/images/whiteTiles.jpg");
  background-size: 100px; 
  width: 60%;
  min-width: 300px;
  text-align: center;
  border: 2px solid black;
  padding: 4px;
}

.scrollingdiv2 {
  display: grid;
  grid-template-areas: "box1 box2";
  grid-template-columns: 35% 65%;

  background-color: purple;
  background-image: url("/images/whiteTiles.jpg");
  background-size: 100px; 
  width: 60%;
  min-width: 300px;
  text-align: center;
  border: 2px solid black;
  padding: 4px;
}

.scrollingdiv3 {
  display: grid;
  grid-template-areas: "box1 box2";
  grid-template-columns: 35% 65%;
  overflow-y: scroll;
  background-color: purple;
  background-image: url("/images/whiteTiles.jpg");
  background-size: 100px; 
  width: 60%;
  min-width: 300px;
  text-align: center;
  border: 2px solid black;
  padding: 4px;
}

.box1 {
  background-color: #d9d9d9;
  width: 100%;
  padding: ;
  border-top: 1px dashed grey;
  border-bottom: 1px dashed grey;
  align-items: center;
}

.box2 {
  background-color: #bfbfbf;
  width: 100%;
  border: 0.5px solid grey;
  text-align: center;
}

.box3 {
  background-color: #d9d9d9;
  width: 100%;
  padding: 4px;
  border-top: 1px dashed grey;
  border-bottom: 1px dashed grey;
  text-align: center;
}

.box4 {
  background-color: #bfbfbf;
  width: 100%;
  border: 0.5px solid grey;
  text-align: center;
  padding-bottom: 4px;
}

img.buttonimage {
  image-rendering: pixelated;
  width: 100%;
}

button {
  border: 0;
  cursor: pointer;
  background-color: inherit;
  width: 100%;
}

.unbold {
  font-weight: normal;
}

img.charactericon {
  image-rendering: pixelated;
}