color.css

/*
mono/color (https://github.com/asvvad/mono-color)
Copyright (c) 2020 asvvvad - MIT License
*/

:root {
    --gray: #ccc;
    --accent: #fa0;
    --warning: #ffd600;
    --error: #d50000;
    --success: #00c853;
    --info: #2962ff
}

.card {
    padding: 1em;
    margin-top: 1rem;
    background: var(--def);
    color: var(--fg)
}

@media(min-width:45em) {
    .col {
        display: table-cell
    }
    .\31 {
        width: 5%
    }
    .\33 {
        width: 22%
    }
    .\34 {
        width: 30%
    }
    .\35 {
        width: 40%
    }
    .\32 {
        width: 15%
    }
    .row {
        display: table;
        border-spacing: 1em 0
    }
}

.w-100,
.row {
    width: 100%
}

.w-50 {
    width: 50%
}

.white {
    color: #fff
}

.bg-white {
    background: #fff
}

.b-white {
    border-color: #fff
}

.gray {
    color: var(--gray)
}

.bg-gray {
    background: var(--gray)
}

.b-gray {
    border-color: var(--gray)
}

.black {
    color: #000
}

.bg-black {
    background: #000
}

.b-black {
    border-color: #000
}

.b-primary {
    border-color: var(--p)
}

.b-default {
    border-color: var(--b)
}

.accent {
    color: var(--accent)
}

.bg-accent {
    background: var(--accent)
}

.b-accent {
    border-color: var(--accent)
}

.warning {
    color: var(--warning)
}

.bg-warning {
    background: var(--warning)
}

.b-warning {
    border-color: var(--warning)
}

.error {
    color: var(--error)
}

.bg-error {
    background: var(--error)
}

.b-error {
    border-color: var(--error)
}

.success {
    color: var(--success)
}

.bg-success {
    background: var(--success)
}

.b-success {
    border-color: var(--success)
}

.info {
    color: var(--info)
}

.bg-info {
    background: var(--info)
}

.b-info {
    border-color: var(--info)
}

.inline {
    display: inline-block;
    margin: .5rem 0
}

.tacenter {
    text-align: center
}

.taleft {
    text-align: left
}

.taright {
    text-align: right
}

.pill {
    border-radius: 2rem;
    white-space: nowrap
}

.rounded {
    border-radius: 1rem
}

.mega {
    font-size: 4rem
}

.large {
    font-size: 2rem
}

.small {
    font-size: 1.4rem
}

.nano {
    font-size: 1.2rem
}

.normal {
    font-size: inherit
}

.vh-100 {
    height: 100vh;
    font-size: 1.8rem
}

.vc {
    position: relative;
    top: 40%;
    transform: perspective(.1rem) translateY(-45%)
}

.vc h1 {
    margin: 0
}

.p {
    padding: 1rem
}

.p04 {
    padding: .4rem
}

.ph {
    padding-left: 1rem;
    padding-right: 1rem
}

.ph04 {
    padding-left: .4rem;
    padding-right: .4rem
}

.pv {
    padding: 1rem;
    padding-bottom: 1rem
}

.pv04 {
    padding-top: .4rem;
    padding-bottom: .4rem
}

.m0 {
    margin: 0
}

.m {
    margin: 1rem
}

.mh {
    margin-left: 1rem;
    margin-right: 1rem
}

.mv {
    margin-top: 1rem;
    margin-bottom: 1rem
}

.border {
    border-style: solid;
    border-width: .1rem
}