/* Box-sizing and margin reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-transition: all 0.2s linear;
    -moz-transition: all 0.2s linear;
    -o-transition: all 0.2s linear;
    transition: all 0.2s linear;
}


:root {
    /* --primary: #121212;
    --secondary: #555555;
    --border: rgba(18, 18, 18, 0.08);
    --theme: #121212;
    --black: #121212;
    --black-2: #555555;
    --white: #FFFFFF;
    --white-2: #999999;
    --action: #FFCD4D; */
  }


  :root .dark {
    /* --primary: #ffffff;
    --secondary: #999999;
    --border: rgba(255, 255, 255, 0.08); */
  }
  

/* Margin Top (mt) */
.mt-1 { margin-top: 5px; }
.mt-2 { margin-top: 10px; }
.mt-3 { margin-top: 15px; }
.mt-4 { margin-top: 20px; }
.mt-5 { margin-top: 30px; }

/* Margin Bottom (mb) */
.mb-1 { margin-bottom: 5px; }
.mb-2 { margin-bottom: 10px; }
.mb-3 { margin-bottom: 15px; }
.mb-4 { margin-bottom: 20px; }
.mb-5 { margin-bottom: 30px; }

/* Margin Left (ml) */
.ml-1 { margin-left: 5px; }
.ml-2 { margin-left: 10px; }
.ml-3 { margin-left: 15px; }
.ml-4 { margin-left: 20px; }
.ml-5 { margin-left: 30px; }

/* Margin Right (mr) */
.mr-1 { margin-right: 5px; }
.mr-2 { margin-right: 10px; }
.mr-3 { margin-right: 15px; }
.mr-4 { margin-right: 20px; }
.mr-5 { margin-right: 30px; }

/* Margin All Sides (m) */
.m-1 { margin: 5px; }
.m-2 { margin: 10px; }
.m-3 { margin: 15px; }
.m-4 { margin: 20px; }
.m-5 { margin: 30px; }


/* Padding Top (pt) */
.pt-1 { padding-top: 5px; }
.pt-2 { padding-top: 10px; }
.pt-3 { padding-top: 15px; }
.pt-4 { padding-top: 20px; }
.pt-5 { padding-top: 30px; }

/* Padding Bottom (pb) */
.pb-1 { padding-bottom: 5px; }
.pb-2 { padding-bottom: 10px; }
.pb-3 { padding-bottom: 15px; }
.pb-4 { padding-bottom: 20px; }
.pb-5 { padding-bottom: 30px; }

/* Padding Left (pl) */
.pl-1 { padding-left: 5px; }
.pl-2 { padding-left: 10px; }
.pl-3 { padding-left: 15px; }
.pl-4 { padding-left: 20px; }
.pl-5 { padding-left: 30px; }

/* Padding Right (pr) */
.pr-1 { padding-right: 5px; }
.pr-2 { padding-right: 10px; }
.pr-3 { padding-right: 15px; }
.pr-4 { padding-right: 20px; }
.pr-5 { padding-right: 30px; }

/* Padding All Sides (p) */
.p-1 { padding: 5px; }
.p-2 { padding: 10px; }
.p-3 { padding: 15px; }
.p-4 { padding: 20px; }
.p-5 { padding: 30px; }


/* Width (w) */
.w-100 { width: 100%; }
.w-90  { width: 90%; }
.w-80  { width: 80%; }
.w-75  { width: 75%; }
.w-70  { width: 70%; }
.w-60  { width: 60%; }
.w-50  { width: 50%; }
.w-40  { width: 40%; }
.w-30  { width: 30%; }
.w-25  { width: 25%; }
.w-20  { width: 20%; }
.w-10  { width: 10%; }

/* Max Width (mw) */
.mw-100 { max-width: 100%; }
.mw-75  { max-width: 75%; }
.mw-50  { max-width: 50%; }
.mw-25  { max-width: 25%; }


/* Height (h) */
.h-100 { height: 100%; }
.h-90  { height: 90%; }
.h-80  { height: 80%; }
.h-75  { height: 75%; }
.h-70  { height: 70%; }
.h-60  { height: 60%; }
.h-50  { height: 50%; }
.h-40  { height: 40%; }
.h-30  { height: 30%; }
.h-25  { height: 25%; }
.h-20  { height: 20%; }
.h-10  { height: 10%; }

/* Max Height (mh) */
.mh-100 { max-height: 100%; }
.mh-75  { max-height: 75%; }
.mh-50  { max-height: 50%; }
.mh-25  { max-height: 25%; }



/* Font Sizes (fs) */
.fs-1 { font-size: 12px; }
.fs-2 { font-size: 14px; }
.fs-3 { font-size: 16px; }
.fs-4 { font-size: 18px; }
.fs-5 { font-size: 20px; }
.fs-6 { font-size: 24px; }
.fs-7 { font-size: 30px; }
.fs-8 { font-size: 36px; }
.fs-9 { font-size: 48px; }
.fs-10 { font-size: 60px; }

/* Font Weights (fw) */
.fw-100 { font-weight: 100; }
.fw-200 { font-weight: 200; }
.fw-300 { font-weight: 300; }
.fw-400 { font-weight: 400; }
.fw-500 { font-weight: 500; }
.fw-600 { font-weight: 600; }
.fw-700 { font-weight: 700; }
.fw-800 { font-weight: 800; }
.fw-900 { font-weight: 900; }


/* Text Alignment */
.text-left    { text-align: left; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.text-justify { text-align: justify; }


/* Display (d) */
.d-block { display: block; }
.d-inline { display: inline; }
.d-inline-block { display: inline-block; }
.d-flex { display: flex; }
.d-none { display: none; }


/* Border Radius (rounded) */
.rounded { border-radius: 5px; }
.rounded-sm { border-radius: 10px; }
.rounded-md { border-radius: 15px; }
.rounded-lg { border-radius: 20px; }
.rounded-xl { border-radius: 30px; }

/* Border Width */
.border-1 { border-width: 1px; }
.border-2 { border-width: 2px; }
.border-3 { border-width: 3px; }
.border-4 { border-width: 4px; }
.border-5 { border-width: 5px; }

/* Border Color */
.border-primary { border-color: #007bff; }
.border-secondary { border-color: #6c757d; }
.border-success { border-color: #28a745; }
.border-danger { border-color: #dc3545; }
.border-warning { border-color: #ffc107; }
.border-info { border-color: #17a2b8; }