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

.text-white{
    color: white;
}

.bold{
    font-weight: bold;
}

.text-small{
    font-size: 0.7em;
}

.text-underline{
    text-decoration: underline;
}

.w-100{
    width: 100%;
}

.h-100{
    height: 100%;
}

.border-secondary{
    border: 2px solid var(--color-secondary);
}


/********* FLEX *********/

.flex{
    display: flex;
}

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

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


/* GAP */

.gap-1{
    gap: .2em;
}

.gap-2{
    gap: .4em;
}

.gap-3{
    gap: .6em;
}

.gap-4{
    gap: .8em;
}

.gap-5{
    gap: 1em;
}


/* FLEX JUSTIFY */

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

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

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

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

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


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

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

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




/********* MARGIN & PADDING *********/

/* RESETS */
.m-0{
    margin-top: 0;
    margin-left: 0;
    margin-bottom: 0;
    margin-right: 0;
}

.p-0{
    padding-top: 0;
    padding-left: 0;
    padding-bottom: 0;
    padding-right: 0;
}


/* VERTICAL PADDING */
.py-1{
    padding-top: .25em;
    padding-bottom: .25em;
}

.py-2{
    padding-top: .50em;
    padding-bottom: .50em;
}

.py-3{
    padding-top: .75em;
    padding-bottom: .75em;
}

.py-4{
    padding-top: 1em;
    padding-bottom: 1em;
}

.py-5{
    padding-top: 1.25em;
    padding-bottom: 1.25em;
}

.py-6{
    padding-top: 1.50em;
    padding-bottom: 1.50em;
}

.py-7{
    padding-top: 1.75em;
    padding-bottom: 1.75em;
}

.py-8{
    padding-top: 2em;
    padding-bottom: 2em;
}


/* HORIZONTAL PADDING */
.px-1{
    padding-left: .25em;
    padding-right: .25em;
}

.px-2{
    padding-left: .50em;
    padding-right: .50em;
}

.px-3{
    padding-left: .75em;
    padding-right: .75em;
}

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

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

.px-6{
    padding-left: 1.50em;
    padding-right: 1.50em;
}

.px-7{
    padding-left: 1.75em;
    padding-right: 1.75em;
}

.px-8{
    padding-left: 2em;
    padding-right: 2em;
}


/* VERTICAL MARGIN */

.my-1{
    margin-top: .25em;
    margin-bottom: .25em;
}

.my-2{
    margin-top: .50em;
    margin-bottom: .50em;
}

.my-3{
    margin-top: .75em;
    margin-bottom: .75em;
}

.my-4{
    margin-top: 1em;
    margin-bottom: 1em;
}

.my-5{
    margin-top: 1.25em;
    margin-bottom: 1.25em;
}

.my-6{
    margin-top: 1.50em;
    margin-bottom: 1.50em;
}

.my-7{
    margin-top: 1.75em;
    margin-bottom: 1.75em;
}

.my-8{
    margin-top: 2em;
    margin-bottom: 2em;
}


/* HORIZONTAL MARGIN */

.mx-1{
    margin-left: .25em;
    margin-right: .25em;
}

.mx-2{
    margin-left: .50em;
    margin-right: .50em;
}

.mx-3{
    margin-left: .75em;
    margin-right: .75em;
}

.mx-4{
    margin-left: 1em;
    margin-right: 1em;
}

/* MARGIN BOTTOM */
.mb-1{
    margin-bottom: .25em;
}

.mb-2{
    margin-bottom: .50em;
}

.mb-3{
    margin-bottom: .75em;
}

.mb-4{
    margin-bottom: 1em;
}

.mb-5{
    margin-bottom: 1.25em;
}


.mb-6{
    margin-bottom: 1.50em;
}


.mb-7{
    margin-bottom: 1.75em;
}

.mb-8{
    margin-bottom: 2em;
}



/* MARGIN TOP */

.mt-1{
    margin-top: .25em;
}

.mt-2{
    margin-top: .50em;
}

.mt-3{
    margin-top: .75em;
}

.mt-4{
    margin-top: 1em;
}