body{
    background: #222;
    color: white;
    width: 100vw;
    min-height: 100vh;
    padding: 0;
    margin: 0;
}

.flex{display: flex;}
.justify-center{justify-content: center;}
.align-center{align-items: center;}
.flex-col{flex-direction: column;}
.flex-row{flex-direction: row;}
.text-center{text-align: center;}
.min-h-screen{min-height: 100vh;}
.w-full{width: 100%;}
.h-full{height: 100%;}

.rounded{border-radius: 0.5rem;}

/*===>>> margin <<<==== */
.m-1{margin: 0.25rem;}
.m-2{margin: 0.5rem;}
.m-4{margin: 1rem;}
.m-6{margin: 1.5rem;}
.m-8{margin: 2rem;}
.m-10{margin: 2.5rem;}
.m-12{margin: 3rem;}
.m-14{margin: 3.5rem;}
.m-16{margin: 4rem;}
.m-18{margin: 4.5rem;}
.m-20{margin: 5rem;}

.mt-1{margin-top: 0.25rem;}
.mt-2{margin-top: 0.5rem;}
.mt-4{margin-top: 1rem;}
.mt-6{margin-top: 1.5rem;}
.mt-8{margin-top: 2rem;}
.mt-10{margin-top: 2.5rem;}
.mt-12{margin-top: 3rem;}
.mt-14{margin-top: 3.5rem;}
.mt-16{margin-top: 4rem;}
.mt-18{margin-top: 4.5rem;}
.mt-20{margin-top: 5rem;}

.mb-1{margin-bottom: 0.25rem;}
.mb-2{margin-bottom: 0.5rem;}
.mb-4{margin-bottom: 1rem;}
.mb-6{margin-bottom: 1.5rem;}
.mb-8{margin-bottom: 2rem;}
.mb-10{margin-bottom: 2.5rem;}
.mb-12{margin-bottom: 3rem;}
.mb-14{margin-bottom: 3.5rem;}
.mb-16{margin-bottom: 4rem;}
.mb-18{margin-bottom: 4.5rem;}
.mb-20{margin-bottom: 5rem;}

.ml-1{margin-left: 0.25rem;}
.ml-2{margin-left: 0.5rem;}
.ml-4{margin-left: 1rem;}
.ml-6{margin-left: 1.5rem;}
.ml-8{margin-left: 2rem;}
.ml-10{margin-left: 2.5rem;}
.ml-12{margin-left: 3rem;}
.ml-14{margin-left: 3.5rem;}
.ml-16{margin-left: 4rem;}
.ml-18{margin-left: 4.5rem;}
.ml-20{margin-left: 5rem;}

.mr-1{margin-right: 0.25rem;}
.mr-2{margin-right: 0.5rem;}
.mr-4{margin-right: 1rem;}
.mr-6{margin-right: 1.5rem;}
.mr-8{margin-right: 2rem;}
.mr-10{margin-right: 2.5rem;}
.mr-12{margin-right: 3rem;}
.mr-14{margin-right: 3.5rem;}
.mr-16{margin-right: 4rem;}
.mr-18{margin-right: 4.5rem;}
.mr-20{margin-right: 5rem;}

/*===>>> padding <<<==== */
.p-1{padding: 0.25rem;}
.p-2{padding: 0.5rem;}
.p-4{padding: 1rem;}
.p-6{padding: 1.5rem;}
.p-8{padding: 2rem;}
.p-10{padding: 2.5rem;}
.p-12{padding: 3rem;}
.p-14{padding: 3.5rem;}
.p-16{padding: 4rem;}
.p-18{padding: 4.5rem;}
.p-20{padding: 5rem;}

.pt-1{padding-top: 0.25rem;}
.pt-2{padding-top: 0.5rem;}
.pt-4{padding-top: 1rem;}
.pt-6{padding-top: 1.5rem;}
.pt-8{padding-top: 2rem;}
.pt-10{padding-top: 2.5rem;}
.pt-12{padding-top: 3rem;}
.pt-14{padding-top: 3.5rem;}
.pt-16{padding-top: 4rem;}
.pt-18{padding-top: 4.5rem;}
.pt-20{padding-top: 5rem;}

.pb-1{padding-bottom: 0.25rem;}
.pb-2{padding-bottom: 0.5rem;}
.pb-4{padding-bottom: 1rem;}
.pb-6{padding-bottom: 1.5rem;}
.pb-8{padding-bottom: 2rem;}
.pb-10{padding-bottom: 2.5rem;}
.pb-12{padding-bottom: 3rem;}
.pb-14{padding-bottom: 3.5rem;}
.pb-16{padding-bottom: 4rem;}
.pb-18{padding-bottom: 4.5rem;}
.pb-20{padding-bottom: 5rem;}

.pl-1{padding-left: 0.25rem;}
.pl-2{padding-left: 0.5rem;}
.pl-4{padding-left: 1rem;}
.pl-6{padding-left: 1.5rem;}
.pl-8{padding-left: 2rem;}
.pl-10{padding-left: 2.5rem;}
.pl-12{padding-left: 3rem;}
.pl-14{padding-left: 3.5rem;}
.pl-16{padding-left: 4rem;}
.pl-18{padding-left: 4.5rem;}
.pl-20{padding-left: 5rem;}

.pr-1{padding-right: 0.25rem;}
.pr-2{padding-right: 0.5rem;}
.pr-4{padding-right: 1rem;}
.pr-6{padding-right: 1.5rem;}
.pr-8{padding-right: 2rem;}
.pr-10{padding-right: 2.5rem;}
.pr-12{padding-right: 3rem;}
.pr-14{padding-right: 3.5rem;}
.pr-16{padding-right: 4rem;}
.pr-18{padding-right: 4.5rem;}
.pr-20{padding-right: 5rem;}