body{
    width: 100%;
    height: 100%;
    background-color: rgb(255, 166, 0);
}

#pokeball {
    display: grid;
    grid-template-columns: repeat(17, 50px);
    grid-template-rows: repeat(17, 50px);
  }

.pixel_black_1{
    background-color: black;
    grid-column: 7/ span 5;
    grid-row: 2;
}
.pixel_black_2{
    background-color: black;
    grid-column: 5/ span 2;
    grid-row: 3;
}
.pixel_black_3{
    background-color: black;
    grid-column: 12/ span 2;
    grid-row: 3;
}
.pixel_black_4{
    background-color: black;
    grid-column: 14/ span 1;
    grid-row: 4/ span 3;
}
.pixel_black_5{
    background-color: black;
    grid-column: 15/ span 1;
    grid-row: 7/ span 4;
}
.pixel_black_6{
    background-color: black;
    grid-column: 8/ span 2;
    grid-row: 7/ span 1;
}
.pixel_black_7{
    background-color: black;
    grid-column: 8/ span 2;
    grid-row: 7/ span 1;
}
.pixel_black_8{
    background-color: black;
    grid-column: 7/ span 1;
    grid-row: 8/ span 1;
}
.pixel_black_9{
    background-color: black;
    grid-column: 10/ span 1;
    grid-row: 8/ span 1;
}
.pixel_black_10{
    background-color: black;
    grid-column: 4/ span 1;
    grid-row: 4/ span 1;
}
.pixel_black_11{
    background-color: black;
    grid-column: 3/ span 1;
    grid-row: 5/ span 2;
}
.pixel_black_12{
    background-color: black;
    grid-column: 2/ span 1;
    grid-row: 7/ span 4;
}
.pixel_black_13{
    background-color: black;
    grid-column: 3/ span 5;
    grid-row: 9/ span 1;
}
.pixel_black_14{
    background-color: black;
    grid-column: 10/ span 5;
    grid-row: 9/ span 1;
}
.pixel_black_15{
    background-color: black;
    grid-column: 3/ span 1;
    grid-row: 11/ span 2;
}
.pixel_black_16{
    background-color: black;
    grid-column: 4/ span 1;
    grid-row: 13/ span 1;
}
.pixel_black_17{
    background-color: black;
    grid-column: 5/ span 1;
    grid-row: 14/ span 1;
}
.pixel_black_18{
    background-color: black;
    grid-column: 6/ span 5;
    grid-row: 15/ span 1;
}
.pixel_black_19{
    background-color: black;
    grid-column: 11/ span 2;
    grid-row: 14/ span 1;
}
.pixel_black_20{
    background-color: black;
    grid-column: 13/ span 1;
    grid-row: 13/ span 1;
}
.pixel_black_21{
    background-color: black;
    grid-column: 14/ span 1;
    grid-row: 11/ span 2;
}
.pixel_black_22{
    background-color: black;
    grid-column: 8/ span 2;
    grid-row: 10/ span 1;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/

.pixel_red_1{
    background-color: red;
    grid-column: 7/ span 5;
    grid-row: 3 / span 4;
}
.pixel_red_2{
    background-color: red;
    grid-column: 5/ span 2;
    grid-row: 4 / span 5;
}
.pixel_red_3{
    background-color: red;
    grid-column: 4/ span 1;
    grid-row: 5 / span 4;
}
.pixel_red_4{
    background-color: red;
    grid-column: 3/ span 1;
    grid-row: 7 / span 2;
}
.pixel_red_5{
    background-color: red;
    grid-column: 7/ span 1;
    grid-row: 7 / span 1;
}
.pixel_red_6{
    background-color: red;
    grid-column: 10/ span 1;
    grid-row: 7 / span 1;
}
.pixel_red_7{
    background-color: red;
    grid-column: 11/ span 4;
    grid-row: 7 / span 2;
}
.pixel_red_8{
    background-color: red;
    grid-column: 12/ span 2;
    grid-row: 4 / span 3;
}

/*------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.pixel_white_1{
    background-color: white;
    grid-column: 8/ span 2;
    grid-row: 8 / span 2;
}
.pixel_white_2{
    background-color: white;
    grid-column: 3/ span 5;
    grid-row: 10 / span 1;
}
.pixel_white_3{
    background-color: white;
    grid-column: 10/ span 5;
    grid-row: 10 / span 1;
}
.pixel_white_4{
    background-color: white;
    grid-column: 4/ span 10;
    grid-row: 11 / span 2;
}
.pixel_white_5{
    background-color: white;
    grid-column: 5/ span 8;
    grid-row: 13 / span 1;
}
.pixel_white_6{
    background-color: white;
    grid-column: 6/ span 5;
    grid-row: 14 / span 1;
}