body {
  background-color: #bebebe;
  padding: 10px;
  font-family: sans-serif;
}

.title {
  color: #565551;
  background-color: #fff;
  padding: 20px;
}

.ph {
  padding: 10px;
  color: #fff;
  margin: 0;
}

.ph14 {
  background-color: #4381ca;
}

.ph13 {
  background-color: #4792d4;
}

.ph12 {
  background-color: #4aa0dd;
}

.ph11 {
  background-color: #55a8e0;
}

.ph10 {
  background-color: #6bb9e8;
}

.ph9 {
  background-color: #7dc6ee;
}

.ph8 {
  background-color: #95cef1;
}

.ph7 {
  background-color: #3eba7c;
}

.ph6 {
  background-color: #f69cd0;
}

.ph5 {
  background-color: #f383c3;
}

.ph4 {
  background-color: #f36eb7;
}

.ph3 {
  background-color: #f156aa;
}

.ph2 {
  background-color: #f1459b;
}

.ph1 {
  background-color: #ee348a;
}

.ph0 {
  background-color: #ec1b7c;
}