input {
  border: 1px solid #f5f5f5;
  color: #000000;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  overflow: hidden;
  padding: 0;
  text-align: center;
}

.container {
  grid-template-rows: 25px 50px 25px 100px;
}

#title {
  grid-column: 1 / 10;
  grid-row: 1;
}

#color-01 {
  background-color: #4b4b4b;
  grid-column: 1;
  grid-row: 2;
}

#color-02 {
  background-color: #c8c8c8;
  grid-column: 2;
  grid-row: 2;
}

#color-03 {
  background-color: #f5f5f5;
  grid-column: 3;
  grid-row: 2;
}

#color-04 {
  background-color: #fc5c9c;
  grid-column: 4;
  grid-row: 2;
}

#color-05 {
  background-color: #fbc687;
  grid-column: 5;
  grid-row: 2;
}

#color-06 {
  background-color: #fff591;
  grid-column: 6;
  grid-row: 2;
}

#color-07 {
  background-color: #b2e672;
  grid-column: 7;
  grid-row: 2;
}

#color-08 {
  background-color: #11cbd7;
  grid-column: 8;
  grid-row: 2;
}

#color-09 {
  background-color: #d89cf6;
  grid-column: 9;
  grid-row: 2;
}

#description {
  grid-column: 1 / 10;
  grid-row: 4;
}

#input-01 {
  grid-column: 1;
  grid-row: 3;
}

#input-02 {
  grid-column: 2;
  grid-row: 3;
}

#input-03 {
  grid-column: 3;
  grid-row: 3;
}

#input-04 {
  grid-column: 4;
  grid-row: 3;
}

#input-05 {
  grid-column: 5;
  grid-row: 3;
}

#input-06 {
  grid-column: 6;
  grid-row: 3;
}

#input-07 {
  grid-column: 7;
  grid-row: 3;
}

#input-08 {
  grid-column: 8;
  grid-row: 3;
}

#input-09 {
  grid-column: 9;
  grid-row: 3;
}