@font-face { font-family: 'AvaliScratch';           src: url('/deps/fonts/AvaliScratchExtended-Regular.ttf'); }
@font-face { font-family: 'EMP-Bold';               src: url('/deps/fonts/EMprint-Bold.ttf'); }
@font-face { font-family: 'EMP-BoldItalic';         src: url('/deps/fonts/EMprint-BoldItalic.ttf'); }
@font-face { font-family: 'EMP-CondensedBold';      src: url('/deps/fonts/EMprint-CondensedBold.ttf'); }
@font-face { font-family: 'EMP-CondensedBoldIt';    src: url('/deps/fonts/EMprint-CondensedBoldIt.ttf'); }
@font-face { font-family: 'EMP-CondensedItalic';    src: url('/deps/fonts/EMprint-CondensedItalic.ttf'); }
@font-face { font-family: 'EMP-CondensedLight';     src: url('/deps/fonts/EMprint-CondensedLight.ttf'); }
@font-face { font-family: 'EMP-CondensedLightIt';   src: url('/deps/fonts/EMprint-CondensedLightIt.ttf'); }
@font-face { font-family: 'EMP-CondensedRegular';   src: url('/deps/fonts/EMprint-CondensedRegular.ttf'); }
@font-face { font-family: 'EMP-CondensedSemiBold';  src: url('/deps/fonts/EMprint-CondensedSemiBold.ttf'); }
@font-face { font-family: 'EMP-CondSemiBoldIt';     src: url('/deps/fonts/EMprint-CondSemiBoldIt.ttf'); }
@font-face { font-family: 'EMP-Light';              src: url('/deps/fonts/EMprint-Light.ttf'); }
@font-face { font-family: 'EMP-LightItalic';        src: url('/deps/fonts/EMprint-LightItalic.ttf'); }
@font-face { font-family: 'EMP-Regular';            src: url('/deps/fonts/EMprint-Regular.ttf'); }
@font-face { font-family: 'EMP-RegularItalic';      src: url('/deps/fonts/EMprint-RegularItalic.ttf'); }
@font-face { font-family: 'EMP-SemiBold';           src: url('/deps/fonts/EMprint-SemiBold.ttf'); }
@font-face { font-family: 'EMP-SemiBoldItalic';     src: url('/deps/fonts/EMprint-SemiBoldItalic.ttf'); }

:root, .default-font {
    --font:    'EMP-Regular';
    --font_sb: 'EMP-SemiBold';
    --font_b:  'EMP-Bold';
    --multiplier_font: 1rem;
    --border_radius: 0.5rem;
    font-family: var(--font);
}

.f-avali {
    --font:     'AvaliScratch';
    --font_sb:  'AvaliScratch';
    --font_b:   'AvaliScratch';
    --multiplier_font: 1.2rem;
    font-family: var(--font);
}

@media screen and (max-width: 640px) {
    :root, .default-font {
        --font: 'EMP-Regular';
        --font_sb: 'EMP-SemiBold';
        --font_b: 'EMP-Bold';
        --multiplier_font: 0.83rem;
    }
    .avali {
        --font: 'AvaliScratch';
        --font_sb: 'AvaliScratch';
        --font_b: 'AvaliScratch';
        --multiplier_font: 0.93rem;
    }    
}
@media screen and (max-width: 440px) {
    :root, .default-font {
        --font: 'EMP-Regular';
        --font_sb: 'EMP-SemiBold';
        --font_b: 'EMP-Bold';
        --multiplier_font: 0.75rem;
    }
    .avali {
        --font: 'AvaliScratch';
        --font_sb: 'AvaliScratch';
        --font_b: 'AvaliScratch';
        --multiplier_font: 0.93rem;
    }
}

* {
    box-sizing: border-box;
    font-family: var(--font);
    font-size: var(--multiplier_font);
    margin: 0;
    padding: 0;
}

html {
    width: 100%;
    height: 100%;
    margin: 0;
    min-width: 360px;
    line-height: inherit;
}

body {
    color: black;
    min-height: 100vh;
    display: flex;
    padding: 0;
    margin: 0;
    flex-direction: column;
}

header {
    width: 100%;
    padding: 1.5rem 2rem;
    margin: 0;
    flex: 0 0 auto;
    background: hsl(185, 90%, 80%);
    box-shadow: 0 0 10px 1px hsla(0, 0%, 0%, 0.9);
    z-index: 3;
    transition: background 0.2s ease-in-out;
}
header:hover {
    background: hsl(185, 90%, 82%);
    transition: background 0.2s ease-in-out;
}

main {
    width: 100%;
    padding: 2rem;
    flex: 1 0 auto;
    box-shadow: 0 0 10px 1px hsla(0, 0%, 0%, 0.6);
    background-color: hsl(0, 0%, 95%);
    z-index: 2;
}

footer {
    width: 100%;
    padding: 1.5rem 2rem;
    margin: 0;
    flex: 0 0 auto;
    background: hsl(134, 30%, 30%);
    box-shadow: 0 10px 0 10px hsl(134, 30%, 30%);
    color: white;
    z-index: 1;
    transition: background 0.2s ease-in-out;
}
footer:hover {
    background: hsl(134, 30%, 32%);
    transition: background 0.2s ease-in-out;
}

section  {
    border-radius: var(--border_radius);
    padding: 1.5rem 1.8rem;
    margin: 1.5rem 0;
    box-shadow: inset 0 0 0 0.25rem hsl(0, 0%, 85%), 0 0 0 0.25rem hsl(0, 0%, 85%);
    background: hsl(0, 0%, 97%);
    transition: all 0.1s ease-in-out;
}
section.c-noborder {
    box-shadow: none;
    background: inherit;
    padding: 0.75rem 0.9rem;
    margin: 0.75rem 0;
}

hr {
    border: 1px solid hsl(0, 0%, 70%);
    border-radius: 8px;
    margin: 1em 0;
}
hr.vertical {
    margin: 0 1rem;
    border: 1px hsla(0, 0%, 0%, 0.3) solid;
}
hr.c-noborder {
    border-color: transparent;
}

a,
a:visited,
a:active {
    color: inherit;
    text-decoration: none;
}

a:hover, a:focus {
    color: inherit;
    text-decoration: underline;
    text-shadow: 1px 1px 1px hsla(0, 0%, 0%, 0.2);
}

ul, ol {    
    padding-inline-start: 0;
    margin-inline-start: 0;
}

ul li, ol li {
    padding: 0.2rem 0;
    list-style-type: none;
}

li::before {
    content: attr(dot, '↪ ');
}

p {
    text-align: justify;
    text-align-last: left;
    text-indent: 1.2rem;
    margin: 0.3em 0;
}

:is(h1,h2,h3,h4,h5,h6) {
    margin: 2rem 0 1rem;
}
* + :is(h1,h2,h3,h4,h5,h6) {
    font-weight: 400;
    margin-top: 1em;
}
:is(section,div) > :is(h1,h2,h3,h4,h5,h6,p) {
    margin: 0.3rem 0 0.6rem;
}
.inline > :is(h1,h2,h3,h4,h5,h6,p) {
    margin: 0.3rem 0 0.6rem;
}

h1 { font-size: calc(2.00 * var(--multiplier_font)); }
h2 { font-size: calc(1.75 * var(--multiplier_font)); }
h3 { font-size: calc(1.50 * var(--multiplier_font)); }
h4 { font-size: calc(1.30 * var(--multiplier_font)); }
h5 { font-size: calc(1.20 * var(--multiplier_font)); }
h6 { font-size: calc(1.10 * var(--multiplier_font)); }

video, img {
    width: 100%;
    height: auto;
}

input {
    display: block;
    padding: 0.5em 1em;
    border-radius: var(--border_radius);
    border: 2px solid hsla(0, 0%, 40%, 0.3);
    margin: 0.5rem 0;
    transition: border 0.3s ease-in-out;
}
input:hover, input:focus {
    border: 2px solid hsla(0, 0%, 40%, 0.90);
    transition: border 0.3s ease-in-out;
}

button {
    font-family: var(--font_sb);
    text-decoration: none;
    transition: 0.5s ease;
    padding: 0.8em 3.2em;
    margin: 0.1em;
    border-radius: var(--border_radius);
    background: hsl(274, 40%, 45%);
    color: white;
    border: none;
}

button:hover, button:focus {
    transform: scale(1.01);
    background: hsl(274, 70%, 60%);
    box-shadow: 0 0 1px 1px hsl(0, 0%, 0%, 0.4), inset 0 0 0 1px hsl(0, 0%, 0%, 0.4);
    transition: all 0.3s;
}
button:active {
    transform: scale(0.97);
    background: hsl(274, 75%, 55%);
    box-shadow: 0 0 2px -1px hsl(0, 0%, 0%, 0.4), inset 0 0 2px -1px hsl(0, 0%, 0%, 0.7);
    transition: all 0.03s;
}

button.disabled {
    background: hsl(274, 20%, 45%);
}
button.disabled:hover, button.disabled:focus {
    transform: none;
    filter: blur(1px);
    background: hsl(274, 10%, 45%);
    box-shadow: none;
}
button.disabled:active{
    transform: none;
    filter: blur(1px);
    background: hsl(274, 10%, 45%);
    box-shadow: none;
}

.uppercase {
    text-transform: uppercase;
}
.lowercase {
    text-transform: lowercase;
}
.capitalize {
    text-transform: capitalize;
}

iframe {
    border-radius: var(--border_radius);
    width: 100%;
    height: 20rem;
}

.italic {
    font-family: var(--font);
    font-style: italic;
}
.bold {
    font-family: var(--fontb);
    font-weight: 900;
}