* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-wrap: wrap;
  width: 100%; 
  height: 100%; 
  background-color: #eaeaea; 
}

.red, .green, .blue, .yellow, .purple, .cyan, .reds, .greens, .blues, .yellows, .purples, .cyans, .white, .black, .gray, .aa, .bb, .cc, .dd, .ee, .ff, .gg, .hh, .ii{
  width: 326.6px;
  height: 326.6px; 
  font-size: 50px; 
  text-align: center; 
  color: white;
}

.red { background-color: #ff0000; }
.green { background-color: #00ff00; color: black; }
.blue { background-color: #0000ff; }
.yellow { background-color: #ffff00; color: black; } 
.purple { background-color: #ff00ff; } 
.cyan { background-color: #00ffff; color: black; }
.reds { background-color: #800000; }
.greens { background-color: #008000; }
.blues { background-color: #000080; }
.yellows { background-color: #808000; }
.purples { background-color: #800080; }
.cyans { background-color: #008080; }
.white { background-color: #ffffff; color: black; }
.black { background-color: #000000; }
.gray { background-color: #808080; }
.aa { background-color: #aaaaaa; color: black; }
.bb { background-color: #404040; }
.cc { background-color: #202020; }
.dd { background-color: #ff8080; color: black; }
.ee { background-color: #80ff80; color: black; }
.ff { background-color: #8080ff; color: black; }
.gg { background-color: #ff6060; color: black; }
.hh { background-color: #60ff60; color: black; }
.ii { background-color: #6060ff; color: black; }