.heading-h1 {
    font-size: var(--font-xxxlarge);
}

.heading-h2 {
    font-size: var(--font-xlarge);
}

.mt-0 {
    margin-top: 0 !important;
}

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

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

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

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

.mt-3 {
    margin-top: 15px;
}

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

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

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


.mb-0 {
    margin-bottom: 0px !important;
}

.mb-1 {
    margin-bottom: 5px;
}

.mb-2 {
    margin-bottom: 10px;
}

.-mb-2 {
    margin-bottom: -10px;
}

.mb-3 {
    margin-bottom: 15px;
}

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

.mb-5 {
    margin-bottom: 25px;
}

.mb-8 {
    margin-bottom: 40px;
}

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

.my-0 {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

.my-1 {
    margin-top: 5px;
    margin-bottom: 5px;
}

.my-2 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.my-3 {
    margin-top: 15px;
    margin-bottom: 15px;
}

.my-4 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.my-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
}

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

.mx-2 {
    margin-left: 10px;
    margin-right: 10px;
}

.mx-5 {
    margin-left: 25px;
    margin-right: 25px;
}


.mr-0 {
    margin-right: 0px!important;
}

.mr-1 {
    margin-right: 5px;
}

.mr-2 {
    margin-right: 10px;
}

.mr-4 {
    margin-right: 20px;
}

.ml-auto {
    margin-left: auto;
}

.ml-1 {
    margin-left: 5px;
}

.ml-2 {
    margin-left: 10px;
}

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


.pt-0 {
    padding-top: 0px!important;
}
.pt-1 {
    padding-top: 5px;
}
.pt-2 {
    padding-top: 10px;
}

.pl-0 {
    padding-left: 0;
}
.pl-4 {
    padding-left: 20px;
}

.px-2 {
    padding-left: 10px;
    padding-right: 10px;
}
.px-4 {
    padding-left: 20px;
    padding-right: 20px;
}

.p-1 {
    padding: 5px !important;
}

.p-5 {
    padding: 30px;
}

.pr-1 {
    padding-right: 5px;
}

.pr-2 {
    padding-right: 10px;
}

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

.py-1 {
    padding-top: 5px!important;
    padding-bottom: 5px!important;
}

.py-2 {
    padding-top: 10px!important;
    padding-bottom: 10px!important;
}

.w-3 {
    width: 120px;
}

.w-280 {
    width: 280px;
}

.w-300 {
    width: 300px;
}

.w-350 {
    width: 350px;
}

.w-auto {
    width: auto!important;
}

.w-full {
    width: 100%;
}

.w-90 {
    width: 90%;
}

.w-half {
    width: 50%;
}

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

.h-full {
    height: 100%;
}

.h-max-content {
    height: max-content;
}

.min-h-auto {
    min-height: auto !important;
}

.max-h-full {
    max-height: 100%;
}

.rounded-sm {
    border-radius: 3px !important;
}

.rounded-md {
    border-radius: 5px !important;
}

.rounded-full {
    border-radius: 9999px !important;
}

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

.block {
    display: block;
}

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

.flex {
    display: flex !important;
}

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

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

.grow {
    flex-grow: 1;
}

.basis-full {
    flex-basis: 100%;
}

.basis-1\/5 {
    flex-basis: 20%;
}

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

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

.justify-left {
    justify-content: left !important;
}

.justify-right {
    justify-content: right;
}

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

.items-start,
.align-start { /*TODO: remove align-start and convert to items-start */
    align-items: flex-start;
}

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

.self-start {
    align-self: flex-start;
}

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

.gap-1 {
    gap: 2px;
}

.gap-2 {
    gap: 4px;
}

.gap-3 {
    gap: 8px;
}

.gap-4 {
    gap: 16px;
}

.gap-25 {
    gap: 25px;
}

.gap-50 {
    gap: 50px !important;
}

.align-super{
    vertical-align: super;
}

.align-middle {
    vertical-align: middle;
}

.align-bottom {
    vertical-align: bottom;
}

.font-italic {
    font-style: italic;
}

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

.font-normal {
    font-weight: normal!important;
}

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

.text-left {
    text-align: left;
}

.text-right {
    text-align: right;
}


/* Normal (text-dark) or inverted (text-bright) text color */
.text-dark {
    color: var(--text-color);
}
.text-bright {
    color: var(--bright-text-color);
}


/* Medal colors */
.text-gold {
    color: var(--color-gold);
}
.text-silver {
    color: var(--color-silver);
}
.text-bronze {
    color: var(--color-bronze);
}


/* Basic Colors */
.text-red {
    color: var(--color-red);
}
.text-orange {
    color: var(--color-orange);
}
.text-yellow {
    color: var(--color-yellow);
}
.text-green-50 {
    color: var(--color-green-50);
}
.text-green-100 {
    color: var(--color-green-100);
}
.text-blue-100 {
    color: var(--color-light-blue);
}
.text-blue-200 {
    color: var(--link-color);
}
.text-purple {
    color: var(--color-purple);
}

.text-gray-100 {
    color: var(--color-light-gray-2);
}

.text-gray-200 {
    color: var(--color-medium-gray);
}


/* Functional Colors */
.text-success {
    color: var(--success-text-color);
}
.text-warning {
    color: var(--color-warning);
}
.text-error {
    color: var(--color-error);
}

.text-easy {
    /* Not technically correct, but feels overkill to make a new color here since the class is not even used yet... (?) */
    color: var(--success-text-color);
}
.text-medium {
    color: var(--color-medium);
}
.text-hard {
    color: var(--color-hard);
}


.text-3xs {
    font-size: var(--font-xxxsmall)
}

.text-2xs {
    font-size: var(--font-xxsmall)
}

.text-xs {
    font-size: var(--font-xsmall)
}

.text-sm {
    font-size: var(--font-small);
}

.text-lg {
    font-size: var(--font-large);
}

.text-xl {
    font-size: var(--font-xlarge);
}

.text-2xl {
    font-size: var(--font-xxlarge);
}

.text-3xl {
    font-size: var(--font-xxxlarge);
}

.monospace {
    font-family: monospace;
    font-variant-ligatures: none;
}

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

.leading-5	{
    line-height: 1.25rem; /* 20px */
}

.leading-6	{
    line-height: 1.5rem; /* 24px */
}

:hover.hover\:no-underline {
    text-decoration: none;
}

.whitespace-nowrap {
    white-space: nowrap;
}

.whitespace-normal-wrap {
    white-space: normal;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.right-2 {
    right: 10px;
}

.bottom-2 {
    bottom: 10px;
}

.list-none {
    list-style-type: none;
}

.cursor-pointer {
    cursor: pointer;
}

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

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

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

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

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

.overflow-y-auto {
    overflow-y: auto;
}

.overflow-y-hidden {
    overflow-y: hidden;
}

.is-hidden {
    display: none !important;
}

.visibility-hidden {
    visibility: hidden !important;
}

.pointer-events-none {
    pointer-events: none;
}

@media (min-width: 770px) {
    .basis-1\/3\@md {
        flex-basis: 33%;
    }

    .basis-2\/3\@md {
        flex-basis: 66%;
    }

    .flex-row\@md {
        flex-direction: row;
    }

    .mt-0\@md {
        margin-top: 0;
    }

    .mb-0\@md {
        margin-bottom: 0;
    }

    .mr-3\@md {
        margin-right: 15px;
    }

    .is-hidden\@md {
        display: none !important;
    }

    .inline-block\@md {
        display: inline-block !important;
    }

    .w-auto\@md {
        width: auto;
    }

    .max-w-120\@md {
        max-width: 120px!important;
    }

    .max-w-180\@md {
        max-width: 180px!important;
    }

    .max-w-250\@md {
        max-width: 250px!important;
    }

    .max-w-300\@md {
        max-width: 300px;
    }

    .max-w-400\@md {
        max-width: 400px;
    }

    .max-w-600\@md {
        max-width: 600px;
    }
}