.bg-color1 {
    background-color: var(--color1);
}

.bg-color2 {
    background-color: var(--color2);
}

.bg-color4 {
    background-color: var(--color4);
}

.bg-color5 {
    background-color: var(--color5);
}

.bg-color6 {
    background-color: var(--color6);
}

.bg-color9 {
    background-color: var(--color9);
}

.fg-color1 {
    color: var(--color1) !important;
}

.fg-color2 {
    color: var(--color2) !important;
}

.fg-color4 {
    color: var(--color4) !important;
}

.hover-fg-color1:hover {
    color: var(--color1) !important;
}

.fg-color3 {
    color: var(--color3) !important;
}

.fg-color6 {
    color: var(--color6) !important;
}

.hover-bg-color4:hover {
    background-color: var(--color4);
}

.hover-bg-color1:hover {
    color: var(--color1);
}

.opacity-1 {
    opacity: 0.1;
}

.opacity-2 {
    opacity: 0.2;
}

.opacity-3 {
    opacity: 0.3;
}

.opacity-4 {
    opacity: 0.4;
}

.opacity-5 {
    opacity: 0.5;
}

.opacity-6 {
    opacity: 0.6;
}

.opacity-7 {
    opacity: 0.7;
}

.opacity-8 {
    opacity: 0.8;
}

.opacity-9 {
    opacity: 0.9;
}

/* fonts */

.font-mono {
    font-family: monospace;
}

.font-sans {
    font-family: sans-serif;
}

.font-serif {
    font-family: serif;
}

.font-bold {
    font-weight: bold;
}

.text-xs {
    font-size: 0.6rem;
}

.text-sm {
    font-size: 0.8rem;
}

.text-lg {
    font-size: 1.2rem;
    line-height: 1.2rem;
}

.text-xl {
    font-size: 2.5rem;
    line-height: 2.5rem;
}

.text-xxl {
    font-size: 4rem;
    line-height: 4rem;
}

.text-xxxl {
    font-size: 6rem;
    line-height: 6rem;
}

.strike-through {
    text-decoration:line-through;
}

.clear {
    clear: both;
}

/* margins */

.mt-5 {
    margin-top: 5px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}

.mt-150 {
    margin-top: 150px;
}

.mt-200 {
    margin-top: 200px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-60 {
    margin-bottom: 60px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-40 {
    margin-left: 40px;
}

.ml-60 {
    margin-left: 60px;
}

.ml-80 {
    margin-left: 80px;
}

.ml-200 {
    margin-left: 200px;
}

.ml-1\/3 {
    margin-left: 33%;
}

.ml-1\/2 {
    margin-left: 50%;
}

.ml-2\/3 {
    margin-left: 66%;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

/* paddings */

.p-5 {
    padding: 5px;
}

.p-10 {
    padding: 10px;
}

.p-20 {
    padding: 20px;
}

.pt-20 {
    padding-top: 20px;
}

.pt-40 {
    padding-top: 40px;
}

.pt-100 {
    padding-top: 100px;
}

.pb-20 {
    padding-bottom: 20px;
}

.pb-40 {
    padding-bottom: 40px;
}

.pb-50 {
    padding-bottom: 50px;
}

.pb-100 {
    padding-bottom: 100px;
}

.px-4 {
    padding-left: 4px;
    padding-right: 4px;
}

.px-5 {
    padding-left: 5px;
    padding-right: 5px;
}

.px-25 {
    padding-left: 25px;
    padding-right: 25px;
}


/* borders */
.border-4 {
    border: 4px;
}

.border-bottom-1 {
    border-bottom: 1px;
}

.border-bottom-5 {
    border-bottom: 5px;
}

.border-bottom-10 {
    border-bottom: 10px;
}

.border-bottom-none {
    border-bottom: none !important;
}

.border-top-5 {
    border-top: 5px;
}

.border-top-10 {
    border-top: 10px;
}

.border-top-20 {
    border-top: 20px;
}

.border-solid {
    border-style: solid;
}

.border-top-solid {
    border-top-style: solid;
}

.border-top-dashed {
    border-top-style: dashed;
}

.border-dotted {
    border-style: dotted;
}

.border-top-dotted {
    border-top-style: dotted;
}

.border-bottom-dotted {
    border-bottom-style: dotted;
}

.border-color4 {
    border-color: var(--color4);
}

.border-color6 {
    border-color: var(--color6);
}

.border-pink {
    border-color: pink;
}

.border-none {
    border: none !important;
}

.justify-center {
    justify-content: center;
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.space-evenly {
    justify-content: space-evenly;
}

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

.center {
    align-self: center;
    text-align: center;
}

.right {
    align-self: flex-end;
    text-align: right;
}

.float-right {
    float: right;
}

.lowercase {
    text-transform: lowercase;
}

.uppercase {
    text-transform: uppercase;
}

.skew-5 {
    transform: skewY(-5deg);
}

.flex {
    display: flex;
}

.flex-1 {
    flex: 1;
}

.flex-auto {
    flex: 1 1 auto;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1\/3 {
    flex: 32%;
    max-widh: 32%;
}

.h-auto {
    height: auto;
}

.w-full {
    width: 100%;
}

.w-350 {
    width: 350px;
}

.w-min-75 {
    min-width: 75px;
}

.w-max-header {
    max-width: var(--header-max-width);
}

.w-max-content {
    max-width: var(--content-max-width);
}

.w-max-readable {
    max-width: var(--readable-max-width);
}

.w-max-500 {
    max-width: 500px;
}

.inline {
    display: inline;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

/* creative utilities */

.red {
    color: red;
}

.pink {
    color: pink;
}

.green {
    color: green;
}

.green2 {
    color: #00a020;
}

.brown {
    color: brown;
}

.gold {
    color: gold;
}

.gray {
    color: gray;
}

.fg-rainbow {
    background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red);
    -webkit-background-clip: text;
    color: transparent;
}

.ls-l {
    letter-spacing: 5px;
}

.ls-xl {
    letter-spacing: 10px;
}

.ls-xxl {
    letter-spacing: 15px;
}

.ls-xxxl {
    letter-spacing: 20px;
}

.lh-l {
    line-height: 2rem;
}

.lh-xl {
    line-height: 4rem;
}

.text-mirror {
    transform: scale(-1,1);
}

.text-vertical-rl {
    writing-mode: vertical-rl;
}

.text-vertical-lr {
    writing-mode: vertical-lr;
}