* {
  box-sizing: border-box;
}

html {
  font-family: Avenir, Helvetica, "Open-Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


ol {
  /*...*/
  display: grid;
  grid-template-columns: repeat(5,1fr);
  grid-template-rows: repeat(5,1fr);
  gap: 10px;
  width: 600px;
  height: 600px;
  list-style: none;
  
}

li {
  /*...*/
  border: black solid 3px;
  display: flex;
  justify-content: center;
  align-items: center;

}


li:nth-child(1){
  grid-column:1;
  grid-row: 1;

}

li:nth-child(2){
  grid-column: 2 ;
  grid-row: 1 ;
  background: linear-gradient(to top , rgb(138, 243, 138) 5px, white 24px);
}


li:nth-child(3){
  grid-column: 3;
  grid-row:1 ;
  background: linear-gradient(to top , rgb(138, 243, 138) 5px, white 24px);
}

li:nth-child(4){
  grid-column: 4;
  grid-row: 1;
  background: linear-gradient(to top , rgb(138, 243, 138) 5px, white 24px);
}

li:nth-child(5){
  grid-column: 5;
  grid-row: 1;
}


li:nth-child(6){
  grid-column: 5;
  grid-row: 2;
  background: linear-gradient(to right , pink 5px, white 24px);
}

li:nth-child(7){
  grid-column: 5;
  grid-row: 3;
  background: linear-gradient(to right , pink 5px, white 24px);
}

li:nth-child(8){
  grid-column: 5;
  grid-row: 4;
  background: linear-gradient(to right , pink 5px, white 24px);
}

li:nth-child(9){
  grid-column: 5;
  grid-row: 5;
 
}


li:nth-child(10){
  grid-column: 4;
  grid-row: 5;
  background: linear-gradient(to bottom , rgb(141, 202, 255) 5px, white 24px);
}

li:nth-child(11){
  grid-column: 3;
  grid-row: 5;
  background: linear-gradient(to bottom , rgb(141, 202, 255) 5px, white 24px);
}


li:nth-child(12){
  grid-column: 2;
  grid-row: 5;
  background: linear-gradient(to bottom , rgb(141, 202, 255) 5px, white 24px);
}

li:nth-child(13){
  grid-column: 1;
  grid-row: 5;
  
}


li:nth-child(14){
  grid-column: 1 ;
  grid-row: 4;
  background: linear-gradient(to left , rgb(249, 249, 166) 5px, white 24px);
}


li:nth-child(15){
  grid-column: 1;
  grid-row: 3;
  background: linear-gradient(to left , rgb(249, 249, 166) 5px, white 24px);
}
li:nth-child(16){
  grid-column: 1;
  grid-row: 2;
  background: linear-gradient(to left , rgb(249, 249, 166) 5px, white 24px);
}

li:nth-child(1) span{
  transform: rotate(135deg);
  
}

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

li:nth-child(5) span{
  transform: rotate(225deg);
}

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


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

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;  
}

.center img {
  width: 370px; 
  height: auto;
}