body {
  font-family: Roboto, sans-serif;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1pc;
}

p {
  margin-bottom: 20pt;
}

.px {
  width: 300px;
  font-size: 20px;
  padding: 20px;
  border: 2px solid #F50057;
  color: #F50057;
}

.cm {
  width: 5cm;
  font-size: 0.5cm;
  padding: 0.5cm;
  border: 2px solid #651FFF;
  color: #651FFF;
}

.mm {
  width: 50mm;
  font-size: 5mm;
  padding: 5mm;
  border: 2px solid #2979FF;
  color: #2979FF;
}

.in {
  width: 2in;
  font-size: 0.3in;
  padding: 0.3in;
  border: 2px solid #00E676;
  color: #00E676;
}

.pc {
  width: 10pc;
  font-size: 1.5pc;
  padding: 1.5pc;
  border: 2px solid #FFC400;
  color: #FFC400;
}

.pt {
  width: 180pt;
  font-size: 16pt;
  padding: 16pt;
  border: 2px solid #FF9100;
  color: #FF9100;
}

.percentage {
  width: 50%;
  font-size: 85%;
  padding: 2%;
  border: 2px solid #BF360C;
  color: #BF360C;
}

.q {
  width: 200Q;
  font-size: 16Q;
  padding: 16Q;
  border: 2px solid #212121;
  color: #212121;
}