.blueprint {
  display: grid;
  width: 590px;
  grid-template-columns: 30px 90px 115px 120px 115px 90px 30px;
  grid-template-rows: 30px 100px 130px 130px 30px 70px 30px 130px 130px;
}

.black {
  background-color: black;
}

.cc_top {
  border-top: 4px black solid;
}
.top_l {
  border-top: 2px black solid;
}
.left {
  border-left: 4px black solid;
}
.left_l {
  border-left: 2px black solid;
}
.right {
  border-right: 4px black solid;
}
.right_l {
  border-right: 2px black solid;
}
.bottom {
  border-bottom: 4px black solid;
}
.bottom_l {
  border-bottom: 2px black solid;
}

.row_1st {
  height: 30px;
}
.row_2nd {
  height: 100px;
}
.row_5th {
  height: 30px;
}
.row_6th {
  height: 70px;
}
.row_7th {
  height: 30px;
}
.row_base {
  height: 130px;
}

.xl01_back {
  background-color: #00a16a;
}
.xl02_back {
  background-color: #00a16a;
}
.xl03_back {
  background-color: #00a16a;
}
.xl04_back {
  background-color: #00a16a;
}
.xl05_back {
  background-color: #00a16a;
}
.l01_back {
  background-color: #19e59e;
}
.l02_back {
  background-color: #19e59e;
}
.l03_back {
  background-color: #19e59e;
}
.l04_back {
  background-color: #19e59e;
}
.l05_back {
  background-color: #19e59e;
}
.l06_back {
  background-color: #19e59e;
}
.l07_back {
  background-color: #19e59e;
}
.l08_back {
  background-color: #19e59e;
}
.l09_back {
  background-color: #19e59e;
}
.l01_back {
  background-color: #19e59e;
}

.xl_h1 {
  font-size: xx-large;
  font-weight: 600;
}
.xl01 {
  width: 235px;
  height: 130px;
}
.xl02 {
  margin-left: 235px;
  width: 235px;
  height: 130px;
}
.xl03 {
  margin-left: 470px;
  width: 120px;
  height: 260px;
}
.xl04 {
  margin-left: 470px;
  margin-top: 260px;
  width: 120px;
  height: 230px;
}
.xl05 {
  margin-left: 470px;
  margin-top: 490px;
  width: 120px;
  height: 290px;
}
.l05 {
  margin-top: 130px;
}
.l04 {
  margin-top: 260px;
}
.l03 {
  margin-top: 390px;
}
.l02 {
  margin-top: 520px;
}
.l01 {
  margin-top: 650px;
}
.l06 {
  margin-top: 130px;
  margin-left: 235px;
}
.l07 {
  margin-top: 260px;
  margin-left: 235px;
}
.l08 {
  margin-top: 390px;
  margin-left: 235px;
}
.l09 {
  margin-top: 520px;
  margin-left: 235px;
}
.large_box {
  width: 120px;
  height: 130px;
}
.overlay {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  justify-content: center;
  align-items: center;
}
.overlay_highlited {
  color: white;
}

/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
}

@media only screen and (max-width: 768px) {
  .blueprint {
    width: 295px;
    height: 390px;
    grid-template-columns: 15px 45px 57.5px 60px 57.5px 45px 15px;
    grid-template-rows: 15px 50px 65px 65px 15px 35px 15px 65px 65px;
  }
  .row_base {
    height: 65px;
  }
  .row_1st {
    height: 15px;
  }
  .row_2nd {
    height: 50px;
  }
  .row_5th {
    height: 15px;
  }
  .row_6th {
    height: 35px;
  }
  .row_7th {
    height: 15px;
  }

  .xl_h1 {
    font-size: large;
  }

  /* x-large box positioning */
  .xl01 {
    width: 117.5px;
    height: 65px;
  }
  .xl02 {
    margin-left: 117.5px; /* xl01.width/2 */
    width: 117.5px;
    height: 65px;
  }
  .xl03 {
    margin-left: 235px;
    width: 60px;
    height: 135px;
  }
  .xl04 {
    margin-left: 235px;
    margin-top: 130px;
    width: 60px;
    height: 115px;
  }
  .xl05 {
    margin-left: 235px;
    margin-top: 245px;
    width: 60px;
    height: 145px;
  }
  /* large box positioning */
  .l05 {
    margin-top: 65px;
  }
  .l04 {
    margin-top: 130px;
  }
  .l03 {
    margin-top: 195px;
  }
  .l02 {
    margin-top: 260px;
  }
  .l01 {
    margin-top: 325px;
  }
  .l06 {
    margin-top: 65px;
    margin-left: 117.5px;
  }
  .l07 {
    margin-top: 130px;
    margin-left: 117.5px;
  }
  .l08 {
    margin-top: 195px;
    margin-left: 117.5px;
  }
  .l09 {
    margin-top: 260px;
    margin-left: 117.5px;
  }

  .large_box {
    width: 60px;
    height: 65px;
  }
}