body {
    font-size: 16px;
    background-color: #fff;
    margin: 30px;
    font-family: 'Courier New', Courier, monospace;
  }
  
  /* Activity 1 styles */
  .content1 {
    display: grid;
    grid-gap: 20px;
    grid-template-columns: 1fr 1fr;
    justify-items: center;
  }
  
  .red1 {
    width: 100%;
    height: 100px;
    background-color: red;
    grid-column: 1 / 3;
  }
  
  .green1 {
    width: 200px;
    height: 200px;
    background-color: green;
  }
  
  .gold1 {
    width: 200px;
    height: 200px;
    background-color: gold;
  }
  
  .blue1 {
    width: 100%;
    height: 100px;
    background-color: blue;
    grid-column: 1 / 3;
  }

  .content2 {
 
  }
  
  .red2 {
    width: 100px;
    height: 100px;
    background-color: red;
    position: relative;
  }
  
  .green2 {
    width: 100px;
    height: 100px;
    background-color: green;
    position: relative;
    bottom: 50px;
    left: 50px;
  }
  
  .gold2 {
    width: 100px;
    height: 100px;
    background-color: gold;
    position: relative;
    bottom: 100px;
    left: 100px;
  }
  
  .blue2 {
    width: 100px;
    height: 100px;
    background-color: blue;
    position: relative;
    bottom: 150px;
    left: 150px;
  }
  .content3 {
    display: grid;
    grid-template-columns: 300px 300px;
  }
  
  .red3 {
    width: 600px;
    height: 100px;
    background-color: red;
    grid-column: 1 / 4;
  }
  
  .green3 {
    width: 275px;
    height: 200px;
    background-color: green;
  }
  
  .gold3 {
    width: 275px;
    height: 200px;
    background-color: gold;
    justify-self: right;
  }
  
  .blue3 {
    width: 600px;
    height: 100px;
    background-color: blue;
    grid-column: 1 / 4;
  }

  .content4 {
    display: grid;
    grid-template-columns: repeat(6, 100px);
  }
  
  .red4 {
    width: 300px;
    height: 300px;
    background-color: red;
    grid-column: 1 / 3;
    grid-row: 1 / 4;
  }
  
  .green4 {
    width: 300px;
    height: 100px;
    background-color: green;
    grid-column: 4 / 7
  }
  
  .gold4 {
    width: 300px;
    height: 100px;
    background-color: gold;
    grid-column: 4 / 7
  }
  
  .blue4 {
    width: 300px;
    height: 100px;
    background-color: blue;
    grid-column: 4 / 7
  }

  .content5 {
    position: relative;
}

.red5 {
  width: 600px;
  height: 100px;
  background-color: red;
}

.green5 {
  width: 200px;
  height: 200px;
  background-color: green;
  float: left;
  margin-bottom: 10px;
  margin-right: 10px
}

.gold5 {
  width: 600px;
  height: 325px;
  background-color: gold;
}

.gold5>p {
  margin: 0;
  padding: 15px 15px 15px 15px;
}

.blue5 {
  width: 600px;
  height: 100px;
  background-color: blue;
}

.content6 {
  display: grid;
  grid-template-columns: repeat(6, 100px);
  grid-template-rows: repeat(6, 100px);
}

.red6 {
  width: 400px;
  height: 200px;
  background-color: red;
  grid-column: 1 / 5;
  grid-row: 1 / 3;
}

.green6 {
  width: 200px;
  height: 200px;
  background-color: green;
  grid-column: 1 / 3;
  grid-row: 5 / 7;
  z-index: +1;
}

.gold6 {
  width: 200px;
  height: 400px;
  background-color: gold;
  grid-column: 5 / 7;
  grid-row: 3 / 7;
  z-index: +1;
}

.blue6 {
  width: 400px;
  height: 400px;
  background-color: blue;
  grid-column: 2 / 6;
  grid-row: 2 / 6;
}