/*
 * Atomic CSS
 *
 * Small, reusable classes
 */


/*
 * Padding
 */
.p1 { padding: 5px; }
.pt1 { padding-top: 5px; }
.pl1 { padding-left: 5px; }
.pr1 { padding-right: 5px; }
.pb1 { padding-bottom: 5px; }

.p2 { padding: 10px; }
.pt2 { padding-top: 10px; }
.pl2 { padding-left: 10px; }
.pr2 { padding-right: 10px; }
.pb2 { padding-bottom: 10px; }


/*
 * Margin
 */
.mt1 { margin-top: 5px; }
.ml1 { margin-left: 5px; }
.mr1 { margin-right: 5px; }
.mb1 { margin-bottom: 5px; }

.mt2 { margin-top: 10px; }
.ml2 { margin-left: 10px; }
.mr2 { margin-right: 10px; }
.mb2 { margin-bottom: 10px; }


/*
 * Layout
 */
.row {
    display: flex;
}

.col {
    display: flex;
    flex-direction: column;
}

.items-center {
    display: flex;
    align-items: center;
}

.justify-center {
    display: flex;
    justify-content: flex;
}

.grow {
    flex-grow: 1;
}


/*
 * Borders and rounding
 */
.rounded {
    overflow: hidden;
    border-radius: 5px;
}