:root {
    --font: 'RedHatText';
    --gray-color: #CCC;
    --primary-color: #ff3232ff;
    --warning-color: #ffd600;
    --error-color: #d50000;
    --success-color: #00c853;
    --info-color: #2962ff;
}

/*Colors*/

.white{
	color: #FFF;
}
.bg-white{
	background-color: #FFF;
}
.b-white{
	border-color: #FFF;
}
.gray{
    color: var(--gray-color);
}
.bg-gray{
    background-color: var(--gray-color);
}
.b-gray{
    border-color: var(--gray-color);
}
.black{
	color: #000;
}
.bg-black{
	background-color: #000;
}
.b-black{
	border-color: #000;
}
.accent {
	color: var(--primary-color);
}
.bg-accent {
	background-color: var(--primary-color);
}
.b-accent {
	border-color: var(--primary-color);
}
.warning {
	color: var(--warning-color);
}
.bg-warning {
	background-color: var(--warning-color);
}
.b-warning {
	border-color: var(--warning-color);
}
.error {
	color: var(--error-color);
}
.bg-error {
	background-color: var(--error-color);
}
.b-error {
	border-color: var(--error-color);
}
.success {
	color: var(--success-color);
}
.bg-success {
	background-color: var(--success-color);
}
.b-success {
	border-color: var(--success-color);
}
.info {
	color: var(--info-color);
}
.bg-info {
	background-color: var(--info-color);
}
.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;
}

/*Misc Utilities*/
.gapless{
    border-spacing: 0;
}
.vc {
    position: relative;
    top: 40%;
    transform: perspective(1px) translateY(-45%);
}
.pill {
  border-radius: 9999px;
}
.rounded {
  border-radius: 4px;
}
.tc {
    text-align: center;
}
.mega{
	font-size: 3.5em;
}
.large{
	font-size: 1.5em;
}
.small{
	font-size: .7em;
}
.caps {
	text-transform: uppercase;
}
.tracked {
	letter-spacing: .1em;
}
.vh-100 {
    height: 100vh;
}

.inline {
    display: inline-block;
}
.bold {
	font-weight: 700
}
.normal {
	font-weight: 400
}
.light{
	font-weight: 300
}
.dim {
    opacity: 1;
    transition: opacity .15s ease-in;
}

.dim:hover,
.dim:focus {
    opacity: .5;
    transition: opacity .15s ease-in;
}