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;
}

.fixedDiv1 {
  display: flex;
  flex-wrap: wrap;
  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: 4px;
  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;
}

.box5 {
  width: 100%;
  flex-basis: 50%;
  background-color: #d9d9d9;
  border: 0.5px solid grey;
  text-align: center;
  padding-bottom: 4px;
}

.box6 {
  width: 100%;
  flex-basis: 50%;
  background-color: #bfbfbf;
  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;
}