###### Navigation

Menu comes in two modes: dark & light

###### Top Nav

Choose your liked color mode

###### Scrollable Header

#### Spacing

##### Padding

A wide range of shorthand responsive padding utility classes to modify an element’s appearance.

.pl-30
.pt-30
.pb-30
.pr-30
.px-30
.py-30

Class | Values
--- | ---
`class="pa-[value]"` `class="pl-[value]"` `class="pt-[value]"` `class="pb-[value]"` `class="pr-[value]"` `class="px-[value]"` `class="py-[value]"` | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)

##### Media Query Padding

A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.

Class | Values
--- | ---
`class="pa-[size]-[value]"` `class="pl-[size]-[value]"` `class="pt-[size]-[value]"` `class="pb-[size]-[value]"` `class="pr-[size]-[value]"` `class="px-[size]-[value]"` `class="py-[size]-[value]"` | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)

##### Margin

A wide range of shorthand responsive margin utility classes to modify an element’s appearance.

.ml-30
.ml-50

Class | Values
--- | ---
`class="ma-[value]"` `class="ml-[value]"` `class="mt-[value]"` `class="mb-[value]"` `class="mr-[value]"` `class="mx-[value]"` `class="my-[value]"` | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)

##### Media Query Margin

A wide range of shorthand media query utility classes for xl, lg, md and sm sizes.

Class | Values
--- | ---
`class="ma-[size]-[value]"` `class="ml-[size]-[value]"` `class="mt-[size]-[value]"` `class="mb-[size]-[value]"` `class="mr-[size]-[value]"` `class="mx-[size]-[value]"` `class="my-[size]-[value]"` | 0 / 5 / 10 / 15 / 20 ... / 100 (step of 5)