:root {
    --gray-color: #CCC;
    --primary-color: #a0c;
    --accent-color: #f73;
    --info-color: #09d;
    --success-color: #084;
    --warning-color: #fc5;
    --error-color: #c33;
}

/*Colors*/

.btn.accent,
.btn.info,
.btn.success,
.btn.error,
.c-white {
	color: #FFF;
}
.bg-white {
	background-color: #FFF;
}
.b-white {
	border-color: #FFF;
}
.c-gray {
    color: var(--gray-color);
}
.bg-gray {
    background-color: var(--gray-color);
}
.b-gray {
    border-color: var(--gray-color);
}
.btn.warning,
.c-black {
	color: #000;
}
.bg-black {
	background-color: #000;
}
.b-black {
	border-color: #000;
}
.c-primary {
	color: var(--primary-color);
}
.bg-primary {
	background-color: var(--primary-color);
}
.b-primary {
	border-color: var(--primary-color);
}
.c-accent {
	color: var(--accent-color);
}
.btn.accent,
.bg-accent {
	background-color: var(--accent-color);
}
.btn.accent,
.b-accent {
	border-color: var(--accent-color);
}
.c-warning {
	color: var(--warning-color);
}
.btn.warning,
.bg-warning {
	background-color: var(--warning-color);
}
.btn.warning,
.b-warning {
	border-color: var(--warning-color);
}
.c-error {
	color: var(--error-color);
}
.btn.error,
.bg-error {
	background-color: var(--error-color);
}
.btn.error,
.b-error {
	border-color: var(--error-color);
}
.c-success {
	color: var(--success-color);
}
.btn.success,
.bg-success {
	background-color: var(--success-color);
}
.btn.success,
.b-success {
	border-color: var(--success-color);
}
.c-info {
	color: var(--info-color);
}
.btn.info,
.bg-info {
	background-color: var(--info-color);
}
.btn.info,
.b-info {
	border-color: var(--info-color);
}

/*Margin+Padding*/

.m0 {
    margin: 0
}

.m1 {
    margin: .5em
}

.m2 {
    margin: 1em
}

.m3 {
    margin: 2em
}

.m4 {
    margin: 4em
}

.mt0 {
    margin-top: 0
}

.mt1 {
    margin-top: .5em
}

.mt2 {
    margin-top: 1em
}

.mt3 {
    margin-top: 2em
}

.mt4 {
    margin-top: 4em
}

.mr0 {
    margin-right: 0
}

.mr1 {
    margin-right: .5em
}

.mr2 {
    margin-right: 1em
}

.mr3 {
    margin-right: 2em
}

.mr4 {
    margin-right: 4em
}

.mb0 {
    margin-bottom: 0
}

.mb1 {
    margin-bottom: .5em
}

.mb2 {
    margin-bottom: 1em
}

.mb3 {
    margin-bottom: 2em
}

.mb4 {
    margin-bottom: 4em
}

.ml0 {
    margin-left: 0
}

.ml1 {
    margin-left: .5em
}

.ml2 {
    margin-left: 1em
}

.ml3 {
    margin-left: 2em
}

.ml4 {
    margin-left: 4em
}

.p0 {
    padding: 0
}

.p1 {
    padding: .5em
}

.p2 {
    padding: 1em
}

.p3 {
    padding: 2em
}

.p4 {
    padding: 4em
}

.pv0 {
    padding-top: 0;
    padding-bottom: 0;
}

.pv1 {
    padding-top: .5em;
    padding-bottom: .5em;
}

.pv2 {
    padding-top: 1em;
    padding-bottom: 1em;
}

.pv3 {
    padding-top: 2em;
    padding-bottom: 2em;
}

.pv4 {
    padding-top: 4em;
    padding-bottom: 4em;
}

.ph0 {
    padding-right: 0;
    padding-left: 0;
}

.ph1 {
    padding-right: .5em;
    padding-left: .5em;
}

.ph2 {
    padding-right: 1em;
    padding-left: 1em;
}

.ph3 {
    padding-right: 2em;
    padding-left: 2em;
}

.ph4 {
    padding-right: 4em;
    padding-left: 4em;
}

/*Text Utilities*/
.tc {
    text-align: center;
}
.tr {
    text-align: right;
}
.tl {
    text-align: left;
}
.mega {
	font-size: 3.5em;
}
.huge {
	font-size: 2.25em;
}
.large {
	font-size: 1.5em;
}
.small {
	font-size: .7em;
}
.caps {
	text-transform: uppercase;
}
.tracked {
	letter-spacing: .1em;
}
.bold {
	font-weight: 700;
}
.normal {
	font-weight: normal;
}
.light {
	font-weight: 300;
}

/*Misc Utilities*/
.gapless {
    border-spacing: 0;
}
.vc {
    position: relative;
    top: 40%;
    transform: perspective(1px) translateY(-45%);
}
.vh-100 {
    height: 100vh;
}
.inline {
    display: inline-block;
}
.pill {
  border-radius: 9999px;
}
.rounded {
  border-radius: 4px;
}
.dim {
    opacity: 1;
    transition: opacity .15s ease-in;
}
.dim:hover,
.dim:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}