:root {
    --xs: 5px;
    --sm: 10px;
    --md: 15px;
    --nm: 20px;
    --lg: 30px;
    --xl: 40px;
}

* { box-sizing: border-box; }
img { max-width: 100%; width: auto; height: auto; }
html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
html { font-size: 10px; }
body { display: flex; flex-direction: column; }
a { text-decoration: none; }
p { margin-top: 1em; margin-bottom: 1em; }
li { margin-bottom: 1em; }

.page { flex-grow: 1; }

.block { display: block; }
.relative { position: relative; }
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.clear { clear: both; }
.underline { text-decoration: underline; }
.italic { font-style: italic; }

.black { font-weight: 900; }
.bold { font-weight: 700; }
.strong { font-weight: 600; }
.medium { font-weight: 500; }
.normal { font-weight: 400; }
.light { font-weight: 300; }

/* Margins */
.mx-auto { margin-left: auto; margin-right: auto; }
.m-left-auto { margin-left: auto; }
.m-right-auto { margin-right: auto; }

.m-0  { margin: 0; }
.m-5  { margin: var(--xs); }
.m-10 { margin: var(--sm); }
.m-15 { margin: var(--md); }
.m-20 { margin: var(--nm); }
.m-30 { margin: var(--lg); }
.m-40 { margin: var(--xl); }

.mx-0  { margin-left: 0;  margin-right: 0; }
.mx-5  { margin-left: var(--xs); margin-right: var(--xs); }
.mx-10 { margin-left: var(--sm); margin-right: var(--sm); }
.mx-15 { margin-left: var(--md); margin-right: var(--md); }
.mx-20 { margin-left: var(--nm); margin-right: var(--nm); }
.mx-30 { margin-left: var(--lg); margin-right: var(--lg); }
.mx-40 { margin-left: var(--xl); margin-right: var(--xl); }

.my-0  { margin-top: 0;  margin-bottom: 0; }
.my-5  { margin-top: var(--xs); margin-bottom: var(--xs); }
.my-10 { margin-top: var(--sm); margin-bottom: var(--sm); }
.my-15 { margin-top: var(--md); margin-bottom: var(--md); }
.my-20 { margin-top: var(--nm); margin-bottom: var(--nm); }
.my-30 { margin-top: var(--lg); margin-bottom: var(--lg); }
.my-40 { margin-top: var(--xl); margin-bottom: var(--xl); }

.m-top-0  { margin-top: 0; }
.m-top-5  { margin-top: var(--xs); }
.m-top-10 { margin-top: var(--sm); }
.m-top-15 { margin-top: var(--md); }
.m-top-20 { margin-top: var(--nm); }
.m-top-30 { margin-top: var(--lg); }
.m-top-40 { margin-top: var(--xl); }

.m-btm-0  { margin-bottom: 0; }
.m-btm-5  { margin-bottom: var(--xs); }
.m-btm-10 { margin-bottom: var(--sm); }
.m-btm-15 { margin-bottom: var(--md); }
.m-btm-20 { margin-bottom: var(--nm); }
.m-btm-30 { margin-bottom: var(--lg); }
.m-btm-40 { margin-bottom: var(--xl); }

.m-left-0  { margin-left: 0; }
.m-left-5  { margin-left: var(--xs); }
.m-left-10 { margin-left: var(--sm); }
.m-left-15 { margin-left: var(--md); }
.m-left-20 { margin-left: var(--nm); }
.m-left-30 { margin-left: var(--lg); }
.m-left-40 { margin-left: var(--xl); }

.m-right-0  { margin-right: 0; }
.m-right-5  { margin-right: var(--xs); }
.m-right-10 { margin-right: var(--sm); }
.m-right-15 { margin-right: var(--md); }
.m-right-20 { margin-right: var(--nm); }
.m-right-30 { margin-right: var(--lg); }
.m-right-40 { margin-right: var(--xl); }

/* Paddings */
.p-0  { padding: 0; }
.p-5  { padding: var(--xs); }
.p-10 { padding: var(--sm); }
.p-15 { padding: var(--md); }
.p-20 { padding: var(--nm); }
.p-30 { padding: var(--lg); }
.p-40 { padding: var(--xl); }

.px-0  { padding-left: 0;  padding-right: 0; }
.px-5  { padding-left: var(--xs); padding-right: var(--xs); }
.px-10 { padding-left: var(--sm); padding-right: var(--sm); }
.px-15 { padding-left: var(--md); padding-right: var(--md); }
.px-20 { padding-left: var(--nm); padding-right: var(--nm); }
.px-30 { padding-left: var(--lg); padding-right: var(--lg); }
.px-40 { padding-left: var(--xl); padding-right: var(--xl); }

.py-0  { padding-top: 0;  padding-bottom: 0; }
.py-5  { padding-top: var(--xs); padding-bottom: var(--xs); }
.py-10 { padding-top: var(--sm); padding-bottom: var(--sm); }
.py-15 { padding-top: var(--md); padding-bottom: var(--md); }
.py-20 { padding-top: var(--nm); padding-bottom: var(--nm); }
.py-30 { padding-top: var(--lg); padding-bottom: var(--lg); }
.py-40 { padding-top: var(--xl); padding-bottom: var(--xl); }

.p-top-0  { padding-top: 0; }
.p-top-5  { padding-top: var(--xs); }
.p-top-10 { padding-top: var(--sm); }
.p-top-15 { padding-top: var(--md); }
.p-top-20 { padding-top: var(--nm); }
.p-top-30 { padding-top: var(--lg); }
.p-top-40 { padding-top: var(--xl); }

.p-btm-0  { padding-bottom: 0; }
.p-btm-5  { padding-bottom: var(--xs); }
.p-btm-10 { padding-bottom: var(--sm); }
.p-btm-15 { padding-bottom: var(--md); }
.p-btm-20 { padding-bottom: var(--nm); }
.p-btm-30 { padding-bottom: var(--lg); }
.p-btm-40 { padding-bottom: var(--xl); }

.p-left-0  { padding-left: 0; }
.p-left-5  { padding-left: var(--xs); }
.p-left-10 { padding-left: var(--sm); }
.p-left-15 { padding-left: var(--md); }
.p-left-20 { padding-left: var(--nm); }
.p-left-30 { padding-left: var(--lg); }
.p-left-40 { padding-left: var(--xl); }

.p-right-0  { padding-right: 0; }
.p-right-5  { padding-right: var(--xs); }
.p-right-10 { padding-right: var(--sm); }
.p-right-15 { padding-right: var(--md); }
.p-right-20 { padding-right: var(--nm); }
.p-right-30 { padding-right: var(--lg); }
.p-right-40 { padding-right: var(--xl); }

.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

@media screen and (max-width: 640px) {
    :root {
        --xs: 3px;
        --sm: 5px;
        --md: 8px;
        --nm: 10px;
        --lg: 20px;
        --xl: 30px;
    }
}