* {
  box-sizing: border-box;
}

html {
  font-family: Avenir, Helvetica, "Open-Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
}

ol {
  display: grid;
  grid-template-columns: repeat(5, 100px);
  grid-template-rows: repeat(5, 100px);
  gap: 4px;
  list-style-type: none;
  padding: 0;
  margin: auto;
  width: fit-content;
}

li {
  border: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  font-weight: bold;
  position: relative;
}

li:nth-child(1)  { grid-row: 1; grid-column: 1; }
li:nth-child(2)  { grid-row: 1; grid-column: 2; }
li:nth-child(3)  { grid-row: 1; grid-column: 3; }
li:nth-child(4)  { grid-row: 1; grid-column: 4; }
li:nth-child(5)  { grid-row: 1; grid-column: 5; }
li:nth-child(6)  { grid-row: 2; grid-column: 5; }
li:nth-child(7)  { grid-row: 3; grid-column: 5; }
li:nth-child(8)  { grid-row: 4; grid-column: 5; }
li:nth-child(9)  { grid-row: 5; grid-column: 5; }
li:nth-child(10) { grid-row: 5; grid-column: 4; }
li:nth-child(11) { grid-row: 5; grid-column: 3; }
li:nth-child(12) { grid-row: 5; grid-column: 2; }
li:nth-child(13) { grid-row: 5; grid-column: 1; }
li:nth-child(14) { grid-row: 4; grid-column: 1; }
li:nth-child(15) { grid-row: 3; grid-column: 1; }
li:nth-child(16) { grid-row: 2; grid-column: 1; }

li:nth-child(2)::after,
li:nth-child(3)::after,
li:nth-child(4)::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 18px;
  background-color: #34963f;
}

li:nth-child(6)::after,
li:nth-child(7)::after,
li:nth-child(8)::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background-color: #df8d46;
}

li:nth-child(10)::after,
li:nth-child(11)::after,
li:nth-child(12)::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 18px;
  background-color: #ce45c2;
}

li:nth-child(14)::after,
li:nth-child(15)::after,
li:nth-child(16)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 18px;
  background-color: #f3db50;
}

li:nth-child(1) span {
  transform: rotate(135deg);
}
li:nth-child(5) span {
  transform: rotate(225deg);
}
li:nth-child(9) span {
  transform: rotate(315deg);
}
li:nth-child(13) span {
  transform: rotate(45deg);
}

li:nth-child(6) span,
li:nth-child(7) span,
li:nth-child(8) span{
  transform: rotate(-90deg);
}

li:nth-child(2) span,
li:nth-child(3) span,
li:nth-child(4) span {
  transform: rotate(180deg);
}

li:nth-child(14) span,
li:nth-child(15) span,
li:nth-child(16) span {
  transform: rotate(90deg);
}

.center {
  grid-row: 2 / 5;
  grid-column: 2 / 5;
  border: 3px solid black;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center-label {
  background-color: #e3000f;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  font-family: sans-serif;
  padding: 10px 30px;
  transform: rotate(-35deg);
  white-space: nowrap;
  letter-spacing: 2px;
}