.bold { font-weight: bold; }
.left { text-align: left; }
.right { text-align: right; }
.center { text-align: center; }

.font-10 { font-size: 0.1em; }
.font-20 { font-size: 0.2em; }
.font-30 { font-size: 0.3em; }
.font-40 { font-size: 0.4em; }
.font-50 { font-size: 0.5em; }
.font-60 { font-size: 0.6em; }
.font-70 { font-size: 0.7em; }
.font-80 { font-size: 0.8em; }
.font-90 { font-size: 0.9em; }
.font-110 { font-size: 1.1em; }
.font-120 { font-size: 1.2em; }
.font-130 { font-size: 1.3em; }
.font-140 { font-size: 1.4em; }
.font-150 { font-size: 1.5em; }
.font-160 { font-size: 1.6em; }
.font-170 { font-size: 1.7em; }
.font-180 { font-size: 1.8em; }
.font-190 { font-size: 1.9em; }
.font-220 { font-size: 2.0em; }

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-1 { flex: 1; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }

.pad { padding: 10px; }
.pad-left { padding-left: 10px; }
.pad-right { padding-right: 10px; }
.pad-top { padding-top: 10px; }
.pad-bottom { padding-bottom: 10px; }

.margin { margin: 10px; }
.margin-left { margin-left: 10px; }
.margin-right { margin-right: 10px; }
.margin-top { margin-top: 10px; }
.margin-bottom { margin-bottom: 10px; }

.bg-fff { background-color: #fff; }
.bg-eee { background-color: #eee; }
.bg-ccc { background-color: #ccc; }
.bg-999 { background-color: #999; }
.bg-666 { background-color: #666; }
.bg-333 { background-color: #333; }
.bg-000 { background-color: #000; }