:root{

    --font-size-18px: 18px;
}

/* Reference expressive css : https://tailwindcss.com/ */
.font-extra-small {
    font-size: x-small!important;
}

.font-small {
    font-size: small!important;
}

.font-medium {
    font-size: medium!important;
}

.font-large {
    font-size: large!important;
}

.font-extra-large {
    font-size: x-large!important;
}

/* mobile device - sm */
@media (max-width: 640px) {

    .mt-small-1{
        margin-top: 0.25rem!important;
    }

    .mt-small-2{
        margin-top: 0.5rem!important;
    }

    .mt-small-3{
        margin-top: 1rem!important;
    }

    .mt-small-4{
        margin-top: 1.5rem!important;
    }

    .mt-small-5{
        margin-top: 3rem!important;
    }

    .mt-small-10{
        margin-top: 6rem!important;
    }

    .mt-small-n5 {
        margin-top: -3rem!important;
    }

    .mb-small-5{
        margin-bottom: 3rem!important;
    }

    .font-sm-extra-small {
        font-size: x-small!important;
    }

    .font-sm-small {
        font-size: small!important;
    }
    .font-sm-medium {
        font-size: medium!important;
    }
    .font-sm-large {
        font-size: large!important;
    }
    .font-sm-extra-large {
        font-size: x-large!important;
    }

    .w-sm-100{
        width: 100%!important;
    }
}