Our two colored boxes share a number of properties in common, so next we establish a class, .box, that defines those shared properties:

In brief, .box establishes the size of each box, as well as the configuration of the font used within. We also take advantage of CSS Flexbox to easily center the contents of each box. We enable flex mode using display: flex, and set both justify-content and align-items to center. Then we can create a class for each of the two boxes that defines the properties that differ between the two.