util.css

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Kanit&display=swap');

/* =================== JUSTIFY CONTENT ================ */

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

.jc-space-around {
    justify-content: space-around;
}

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

.jc-baseline{
    justify-content: baseline;
}

.jc-end{
    justify-content: end;
}

.jc-first-baseline{
    justify-content: first baseline;
}

.jc-flex-end{
    justify-content: flex-end;
}

.jc-flex-start{
    justify-content:flex-start;
}

.jc-last-baseline{
    justify-content: last baseline;
}

.jc-left{
    justify-content: left;
}

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

.jc-safe{
    justify-content: safe;
}

/* ===================== MARGIN ======================== */

.margin-auto {
    margin: auto;
}


/* ===================== TEXT ALIGN ====================*/

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

.ta-end{
    text-align: end;
}

.ta-justify{
    text-align: justify;
}

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

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

.ta-start{
    text-align: start;
}

.ta-inherit{
    text-align: inherit;
}

.ta-initial{
    text-align: initial;
}

.ta-unset{
    text-align: unset;
}
/* ====================== ALIGN ITEM ==================== */

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


/* ======================= LIST ========================= */

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


/* ==================== FLEX ELEMENT ===================== */

.flex {
    display: flex;
}

.f-flow-row-wrap {
    flex-flow: row wrap;
}

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

.f-flow-column{
    flex-flow: column;
}

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

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

.f-direction-row{
    flex-direction: row;
}

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

/* =================== BG-COLOR =================== */

.bgColor-171717{
    background-color: #171717;
}

.bgColor-282828{
    background-color: #282828;
}

.bgColor-0E0E0E{
    background-color: #0E0E0E;
}


/* ==================== COLOR ===================== */

.color-D6CD00{
    color: #D6CD00;
}


/* ==================== FONTS ===================== */

.font-inter{
    font-family: 'inter';
}

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

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

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

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

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

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

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

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

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

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

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

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

.color-white{
    color: white;
}

/* OVERFLOW */

.overflow-auto{
    overflow: auto;
}


/* POSITION */

.psn-fixed{
    position: fixed;
}

.psn-absolute{
    position: absolute;
}

.psn-relative{
    position: relative;
}

.cr-pointer{
    cursor: pointer;
}