:root {
    --button-vertical-padding: var(--rem-14px);
    --button-horizontal-padding: var(--rem-30px);
    --button-wide-vertical-padding: var(--rem-14px);
    --button-wide-horizontal-padding: var(--rem-48px);
    --button-large-vertical-padding: var(--rem-20px);
    --button-large-horizontal-padding: var(--rem-36px);
    --button-small-vertical-padding: var(--rem-4px);
    --button-small-horizontal-padding: var(--rem-12px);

    --rem-05: 0.5rem;
    --rem-1: 1rem;
    --rem-2: 2rem;
    --rem-3: 3rem;
    --rem-4: 4rem;
    --rem-5: 5rem;
    --rem-6: 6rem;
    --rem-7: 7rem;
    --rem-8: 8rem;
    --rem-4px: 0.25rem;
    --rem-8px: 0.5rem;
    --rem-12px: 0.75rem;
    --rem-14px: 0.875rem;
    --rem-20px: 1.25rem;
    --rem-30px: 1.875rem;
    --rem-32px: 2rem;
    --rem-36px: 2.25rem;
    --rem-48px: 3rem;
}

/*MARGIN*/

.mh-a {
    margin-left: auto;
    margin-right: auto;
}

.mv-a {
    margin-top: auto;
    margin-bottom: auto;
}

.m-0 {
    margin:0;
}

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

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

.mt-0 {
    margin-top: 0rem;
}

.mb-0 {
    margin-bottom: 0rem;
}

.mr-0 {
    margin-right: 0;
}

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

.mh-05 {
    margin-left: var(--rem-05);
    margin-right: var(--rem-05);
}

.mv-05 {
    margin-top: var(--rem-05);
    margin-bottom: var(--rem-05);
}

.mt-05 {
    margin-top: var(--rem-05);
}

.mb-05 {
    margin-bottom: var(--rem-05);
}

.mr-05 {
    margin-right: var(--rem-05);
}

.ml-05 {
    margin-left: var(--rem-05);
}

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

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

.mt-1 {
    margin-top: var(--rem-1);
}

.mb-1 {
    margin-bottom:var(--rem-1);
}

.mr-1 {
    margin-right: var(--rem-1);
}

.ml-1 {
    margin-left: var(--rem-1);
}

.mh-2 {
    margin-left: var(--rem-2);
    margin-right: var(--rem-2);
}

.mv-2 {
    margin-top: var(--rem-2);
    margin-bottom: var(--rem-2);
}

.mt-2 {
    margin-top: var(--rem-2);
}

.mb-2 {
    margin-bottom:var(--rem-2);
}

.mr-2 {
    margin-right: var(--rem-2);
}

.ml-2 {
    margin-left: var(--rem-2);
}

.mh-3 {
    margin-left: var(--rem-3);
    margin-right: var(--rem-3);
}

.mv-3 {
    margin-top: var(--rem-3);
    margin-bottom: var(--rem-3);
}

.mt-3 {
    margin-top: var(--rem-3);
}

.mb-3 {
    margin-bottom:var(--rem-3);
}

.mr-3 {
    margin-right: var(--rem-3);
}

.ml-3 {
    margin-left: var(--rem-3);
}

.mh-4 {
    margin-left: var(--rem-4);
    margin-right: var(--rem-4);
}

.mv-4 {
    margin-top: var(--rem-4);
    margin-bottom: var(--rem-4);
}

.mt-4 {
    margin-top: var(--rem-4);
}

.mb-4 {
    margin-bottom:var(--rem-4);
}

.mr-4 {
    margin-right: var(--rem-4);
}

.ml-4 {
    margin-left: var(--rem-4);
}

.mh-5 {
    margin-left: var(--rem-5);
    margin-right: var(--rem-5);
}

.mv-5 {
    margin-top: var(--rem-5);
    margin-bottom: var(--rem-5);
}

.mt-5 {
    margin-top: var(--rem-5);
}

.mb-5 {
    margin-bottom:var(--rem-5);
}

.mr-5 {
    margin-right: var(--rem-5);
}

.ml-5 {
    margin-left: var(--rem-5);
}

.mh-6 {
    margin-left: var(--rem-6);
    margin-right: var(--rem-6);
}

.mv-6 {
    margin-top: var(--rem-6);
    margin-bottom: var(--rem-6);
}

.mt-6 {
    margin-top: var(--rem-6);
}

.mb-6 {
    margin-bottom:var(--rem-6);
}

.mr-6 {
    margin-right: var(--rem-6);
}

.ml-6 {
    margin-left: var(--rem-6);
}

.mh-7 {
    margin-left: var(--rem-7);
    margin-right: var(--rem-7);
}

.mv-7 {
    margin-top: var(--rem-7);
    margin-bottom: var(--rem-7);
}

.mt-7 {
    margin-top: var(--rem-7);
}

.mb-7 {
    margin-bottom:var(--rem-7);
}

.mr-7 {
    margin-right: var(--rem-7);
}

.ml-7 {
    margin-left: var(--rem-7);
}

.mh-8 {
    margin-left: var(--rem-8);
    margin-right: var(--rem-8);
}

.mv-8 {
    margin-top: var(--rem-8);
    margin-bottom: var(--rem-8);
}

.mt-8 {
    margin-top: var(--rem-8);
}

.mb-8 {
    margin-bottom:var(--rem-8);
}

.mr-8 {
    margin-right: var(--rem-8);
}

.ml-8 {
    margin-left: var(--rem-8);
}


/*PADDING*/

.ph-u {
    padding-left: unset;
    padding-right: unset;
}

.pv-u {
    padding-top: unset;
    padding-bottom: unset;
}

.p-0 {
    padding:0;
}

.ph-0 {
    padding-left: var(--rem-0);
    padding-right: var(--rem-0);
}

.pv-0 {
    padding-top: var(--rem-0);
    padding-bottom: var(--rem-0);
}

.pt-0 {
    padding-top: var(--rem-0);
}

.pb-0 {
    padding-bottom: var(--rem-0);
}

.pr-0 {
    padding-right: var(--rem-0);
}

.pl-0 {
    padding-left: var(--rem-0);
}

.ph-05 {
    padding-left: var(--rem-05);
    padding-right: var(--rem-05);
}

.pv-05 {
    padding-top: var(--rem-05);
    padding-bottom: var(--rem-05);
}

.pt-05 {
    padding-top: var(--rem-05);
}

.pb-05 {
    padding-bottom: var(--rem-05);
}

.pr-05 {
    padding-right: var(--rem-05);
}

.pl-05 {
    padding-left: var(--rem-05);
}

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

.pv-1 {
    padding-top: var(--rem-1);
    padding-bottom: var(--rem-1);
}

.pt-1 {
    padding-top: var(--rem-1);
}

.pb-1 {
    padding-bottom:var(--rem-1);
}

.pr-1 {
    padding-right: var(--rem-1);
}

.pl-1 {
    padding-left: var(--rem-1);
}

.ph-2 {
    padding-left: var(--rem-2);
    padding-right: var(--rem-2);
}

.pv-2 {
    padding-top: var(--rem-2);
    padding-bottom: var(--rem-2);
}

.pt-2 {
    padding-top: var(--rem-2);
}

.pb-2 {
    padding-bottom:var(--rem-2);
}

.pr-2 {
    padding-right: var(--rem-2);
}

.pl-2 {
    padding-left: var(--rem-2);
}

.ph-3 {
    padding-left: var(--rem-3);
    padding-right: var(--rem-3);
}

.pv-3 {
    padding-top: var(--rem-3);
    padding-bottom: var(--rem-3);
}

.pt-3 {
    padding-top: var(--rem-3);
}

.pb-3 {
    padding-bottom:var(--rem-3);
}

.pr-3 {
    padding-right: var(--rem-3);
}

.pl-3 {
    padding-left: var(--rem-3);
}

.ph-4 {
    padding-left: var(--rem-4);
    padding-right: var(--rem-4);
}

.pv-4 {
    padding-top: var(--rem-4);
    padding-bottom: var(--rem-4);
}

.pt-4 {
    padding-top: var(--rem-4);
}

.pb-4 {
    padding-bottom:var(--rem-4);
}

.pr-4 {
    padding-right: var(--rem-4);
}

.pl-4 {
    padding-left: var(--rem-4);
}

.ph-5 {
    padding-left: var(--rem-5);
    padding-right: var(--rem-5);
}

.pv-5 {
    padding-top: var(--rem-5);
    padding-bottom: var(--rem-5);
}

.pt-5 {
    padding-top: var(--rem-5);
}

.pb-5 {
    padding-bottom:var(--rem-5);
}

.pr-5 {
    padding-right: var(--rem-5);
}

.pl-5 {
    padding-left: var(--rem-5);
}

.ph-6 {
    padding-left: var(--rem-6);
    padding-right: var(--rem-6);
}

.pv-6 {
    padding-top: var(--rem-6);
    padding-bottom: var(--rem-6);
}

.pt-6 {
    padding-top: var(--rem-6);
}

.pb-6 {
    padding-bottom:var(--rem-6);
}

.pr-6 {
    padding-right: var(--rem-6);
}

.pl-6 {
    padding-left: var(--rem-6);
}

.ph-7 {
    padding-left: var(--rem-7);
    padding-right: var(--rem-7);
}

.pv-7 {
    padding-top: var(--rem-7);
    padding-bottom: var(--rem-7);
}

.pt-7 {
    padding-top: var(--rem-7);
}

.pb-7 {
    padding-bottom:var(--rem-7);
}

.pr-7 {
    padding-right: var(--rem-7);
}

.pl-7 {
    padding-left: var(--rem-7);
}

.ph-8 {
    padding-left: var(--rem-8);
    padding-right: var(--rem-8);
}

.pv-8 {
    padding-top: var(--rem-8);
    padding-bottom: var(--rem-8);
}

.pt-8 {
    padding-top: var(--rem-8);
}

.pb-8 {
    padding-bottom:var(--rem-8);
}

.pr-8 {
    padding-right: var(--rem-8);
}

.pl-8 {
    padding-left: var(--rem-8);
}


/*GAP*/

.gap-0 {
    gap: var(--rem-0);
}

.gap-row-0 {
    row-gap: var(--rem-0);
}

.gap-col-0 {
    column-gap: var(--rem-0);
}

.gap-05 {
    gap: var(--rem-05);
}

.gap-row-05 {
    row-gap: var(--rem-05);
}

.gap-col-05 {
    column-gap: var(--rem-05);
}

.gap-1 {
    gap: var(--rem-1);
}

.gap-row-1 {
    row-gap: var(--rem-1);
}

.gap-col-1 {
    column-gap: var(--rem-1);
}

.gap-2 {
    gap: var(--rem-2);
}

.gap-row-2 {
    row-gap: var(--rem-2);
}

.gap-col-2 {
    column-gap: var(--rem-2);
}

.gap-3 {
    gap: var(--rem-3);
}

.gap-row-3 {
    row-gap: var(--rem-3);
}

.gap-col-3 {
    column-gap: var(--rem-3);
}

.gap-4 {
    gap: var(--rem-4);
}

.gap-row-4 {
    row-gap: var(--rem-4);
}

.gap-col-4 {
    column-gap: var(--rem-4);
}


/*FLEXBOX ALIGNMENT*/

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

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

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

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

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