body {
    font-family: 'Courier New', Courier, monospace;
    background-color: #eaf8bf;
    font-weight: bolder;
    margin: 0px;
    padding: 0px;
    color: #4e5e35;
    font-size: x-large;
    text-align: center;
}

.wrapper {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(38, 1fr);
    background-image: url(images/pandarbackground.png);
    background-repeat: repeat-x;
    width: 100%;
}



.box1 {
  grid-column-start: 4;   
  grid-column-end: 18;
  grid-row-start: 1;
  grid-row-end: 3;

  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);
  color: #4e5e35;

  padding: 0.5em;
}

.box2 {
  grid-column-start: 15;   
  grid-column-end: 22;
  grid-row-start: 2;
  grid-row-end: 4;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);
  color: #4e5e35;
}

.box3 {
  grid-column-start: 2;   
  grid-column-end: 10;
  grid-row-start: 5;
  grid-row-end: 7;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);;
  color: #4e5e35;
}

.box4 {
  grid-column-start: 6;   
  grid-column-end: 22;
  grid-row-start: 6;
  grid-row-end: 8;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);
  color: #4e5e35;
  
}

.box5 {
  grid-column-start: 4;   
  grid-column-end: 21;
  grid-row-start: 9;
  grid-row-end: 12;
  padding: 0.5em;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 0.95);
  color: #4e5e35;
}

.box6 {
  grid-column-start: 3;   
  grid-column-end: 13;
  grid-row-start: 14;
  grid-row-end: 20;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 0.95);
  color: #4e5e35;
}

.box7 {
  grid-column-start: 15;   
  grid-column-end: 24;
  grid-row-start: 13;
  grid-row-end: 21;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 0.95);
  color: #4e5e35;
}

.box8 {
  grid-column-start: 5;   
  grid-column-end: 14;
  grid-row-start: 22;
  grid-row-end: 27;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 0.95);
  color: #4e5e35;

  padding: 0.5em;
}

.box9 {
  grid-column-start: 3;   
  grid-column-end: 24;
  grid-row-start: 28;
  grid-row-end: 32;
  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);
  color: #4e5e35;

  
}

.box10 {
  grid-column-start: 2;   
  grid-column-end: 11;
  grid-row-start: 34;
  grid-row-end: 38;

  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);;
  color: #4e5e35;
}

.box11 {
  grid-column-start: 13;   
  grid-column-end: 23;
  grid-row-start: 33;
  grid-row-end: 37;

  border-radius: 30px;
  background-color: rgba(191, 217, 101, 1);;
  color: #4e5e35;
}

* {
    box-sizing: border-box;
}

.wrapper {
    border: 2px solid #eaf8bf;
    border-radius: 5px;
    background-color: #eaf8bf;
}