html { font-size: 16px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

@media all {
    @font-face {
        font-family: 'icons';
        font-style: normal;
        font-weight: 400;
        src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url('../fonts/MaterialIcons-Regular-new.woff2') format('woff2'),
        url('../fonts/MaterialIcons-Regular-new.woff') format('woff'),
        url('../fonts/MaterialIcons-Regular-new.ttf') format('truetype');
    }

    @font-face {
        font-family: 'brands';
        font-style: normal;
        font-weight: 400;
        src: local('brands'),
        local('brands'),
        url('../fonts/brands.woff2') format('woff2'),
        url('../fonts/brands.woff') format('woff'),
        url('../fonts/brands.ttf') format('truetype'),
        url('../fonts/brands.svg#svgFontName') format('svg');
    }

    html { padding: 0; margin: 0; width: 100%; height: 100%; }

    body { display: flex; flex-direction: column; width: 100%; /*height: 100%;*/ padding: 0; margin: 0;  font-family: Roboto, sans-serif; background-color: var(--panel); color:var(--default-text); }

    * { box-sizing: border-box; }

    ::-webkit-scrollbar { width: 6px; height: 6px; background-color: #bababa }

    ::-webkit-scrollbar-track { border-radius: 3px; }

    ::-webkit-scrollbar-thumb {
        border-radius: 3px;
        background-color: #454545
    }

    button,input { outline: none; }

    input:invalid { border: 1px solid indianred; }

    input:invalid + .hint { color: gray; display: inline-block; font-size: 0.8rem; margin-bottom: 2rem; }
    input:not(:invalid) + .hint { display: none; }

    button {
        border-radius: 0.4rem;
        color: var(--cta-text-color);
        padding: 1rem 2rem;
        border: none;
        cursor: pointer;
        font-family: sans-serif !important;
        display: flex;
        flex-direction: row;
        align-items: center;
        font-weight: 500;
        font-size: 1.1rem;
        letter-spacing: 0.1rem;
    }

    button.transparent { background-color: transparent; border: none; color: var(--default-text); }
    button.cta { background-color: var(--cta-color); }
    button.cta:hover { background-color: var(--cta-active-color); }
    button.cta svg { stroke: var(--cta-color); }

    button.disabled { opacity: 0.8; pointer-events: none; }

    button:not(transparent){
        box-shadow: 0.25rem 0.5rem 0.5rem rgba(0,0,0,0.1);
    }

    button.secondary { background-color: var(--gray-three); }

    button svg:not(:first-child) { margin-left: 1rem; }
    button.secondary svg { stroke:var(--complementary); }

    button.max { width: 100%; justify-content: center; }

    button.alert { background-color: var(--alert-color); }

    input, textarea {
        background-color: var(--almost-white);
        border: 1px solid transparent;
        padding: 0.5rem 0.75rem;
        border-radius: 0.2rem;
    }

    input { height: 3rem; }

    input:focus { border-color: var(--border); }

    input[type="checkbox"],input[type="radio"] { accent-color: var(--header-green); }

    input.max { width: 100%; }

    a { color: var(--default-text); text-decoration: none; }
    a:active { color: var(--default-text); }
    a:visited { color: var(--default-text); }

    p {
        color: var(--complementary);
        font-size: 1rem;
        line-height: 1.5rem;
        font-weight: 400;
        letter-spacing: 0.02em;
    }


    .panel { color: var(--default-text); background-color: var(--panel); }
    /*.panel.bright { color: var(--panel-bright-text); background-color: var(--panel-bright); }
    .panel.dark { color: var(--panel-dark-text); background-color: var(--panel-dark); }*/

    /*BASE LAYOUT*/
    body > header, body > main, body > footer { width: 100%; }

    /*@HEADER*/
    body > header { position: sticky; top:0; background-color: var(--dark-green); text-align: center; z-index: 1; cursor: pointer; }
    body > header { border-bottom: 1px solid var(--outline); }

    /*@LOGO*/
    body > header #logo {
        max-width: calc(100% - 8rem);
        margin-top: 1rem;
    }

    body > header > h2 {
        margin-top: 0.5rem;
        font-weight: 400;
        letter-spacing: 0.15rem;
        opacity: 0.5;
    }

    /*@SEARCH*/
    body > header > section.search input {
        flex-grow: 1;
        height: 100%;
        background-color: transparent;
        border: none;
        color: var(--default-text);
    }
    body > header > section.search svg {
        flex-shrink: 0;
        width: 1.25rem;
        height: 1.25rem;
        margin-left: 1rem;
    }

    body > header > section.search input:not(:focus)::placeholder {
        color: #FFFFFF55;
    }

        /*MAIN MENU*/


    body > header section.nav button {
        font-weight: 700;
        font-size: 0.875rem;
    }

    body > header section.nav nav button:not(:last-child) {
        padding: 0;
        margin-right: 2rem;
        letter-spacing: 0.1em;
    }

    body > header section.nav a {
        padding: 0.75rem 1.5rem 0.75rem 1.5rem;
        font-weight: 700;
        font-size: 0.75rem;
        line-height: 1rem;
        text-transform: uppercase;
        border-radius: 3rem;
        letter-spacing: 0.1em;
        border: 1px solid var(--red);
        cursor: pointer;
    }

        /*@USER*/
    body > header > section.user {
        padding: 0 1.5rem 0 1.5rem;
    }

    body > header > section.user .avatar {
        border-radius: 50%;
        background-color: #454545;
        width: 3rem;
        height: 3rem;
        border: 2px rgba(255,255,255,0.1) solid;
    }

    /*@INSTALL*/
    body > section#install {
        width: 100%;
        background-color: var(--green-tr85);
        padding: 2rem 1rem;
        border-top: 1px solid var(--almost-white);
        border-bottom: 1px solid var(--almost-white);
    }

    body[installed] > section#install { display: none; }

    body > section#install button { width: 100%; justify-content: center; }

    body > section#install .info { text-align: center; font-size: 1.2rem; }

    body > section#install .info span { vertical-align: bottom; }

    body > section#install:not(.info) .info { display: none; }
    body > section#install.info button { display: none; }

    /*@MAIN*/
    body > main { flex-grow: 1;  }
    body > main > section { max-height: 100%; overflow: hidden; }
    body > main > section h2 { font-weight: 500; margin: 0; letter-spacing: 0.05rem; }
    /*color: transparent; -webkit-text-stroke: 0.5px var(--white); text-stroke: 0.5px var(--white);*/

    body > footer { background-color: var(--panel-dark); }
    body > footer > .upper {
        overflow:hidden;
    }


    body > footer > .upper > div {
        position: relative;
        left:-2rem;
        margin: 2rem 0 1.5rem 0;
        font-size: 18.75rem;
        line-height: 20rem;
        white-space: nowrap;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--black);
    }

    body > footer > .inner {
        display: flex;
        flex-direction: row;
        border-top: 1px solid var(--outline);
        border-bottom: 1px solid var(--outline);
        font-weight: 400;
        line-height: 1.25rem;
    }

    body > footer > .inner > * {
        flex-grow: 1;
    }


    body > footer > .inner nav > div {
        font-weight: 400;
        font-size: 1.25rem;
        cursor: pointer;
        margin-bottom: 0.5rem;
    }

    body > footer > .inner > nav > div:not(:last-child) {
        margin-bottom: 1.5rem;
    }

    body > footer > .inner > * > .title {
        font-size: 1.25rem;
        line-height: 1.5rem;
    }

    body > footer > .inner .links .entries {
        display: flex;
        align-items: center;
    }

    body > footer > .inner a {
        display: inline-flex;
        align-items: center;
        margin-right: 2rem;
    }

    body > footer > .inner a span:last-child {
        margin-left: 0.25rem;
    }

    /*body > footer > *:not(.upper) > *:not(nav) *:not(.title) {
        color: var(--complementary);
    }*/

    body > footer > .lower > *:not(:last-child) { margin-right: 1.5rem; }

    /*FOOTER MODIFIERS FOR GENERAL LOOK*/
    body > footer > .upper > div {
        font-size: 11.875rem;
        line-height: 8.75rem;
    }

    body > footer > .inner {
        display: flex;
        flex-direction: column;
        border-top: 1px solid var(--outline);
        border-bottom: 1px solid var(--outline);
        font-weight: 400;
        line-height: 1.25rem;
    }

    body > footer > .inner > * {
        padding: 2.5rem 1rem 2.5rem 1rem;
    }

    body > footer > .inner > * > .title {
        margin-bottom: 1.5rem;
    }

    body > footer > .inner > * {
        border-bottom: 1px solid var(--outline);
    }

    body > footer > .inner .contacts > div .category {
        font-weight: 500;
        margin-bottom: 0.5rem;
    }

    body > footer > .inner .contacts > div:not(.title):not(:last-child) {
        margin-bottom: 2rem;
    }

    body > footer  a {
        display: inline-block;
        color: var(--cta-color) !important;
        /*border-radius: 0.25rem;
        border: 1px solid var(--border);
        padding: 0.25rem 0.5rem;*/
    }

    body > footer > .inner .contacts a:not(:last-child) {
        margin-bottom: 0.75rem;
    }

    body > footer > .lower {
        padding: 3rem 1rem;
    }

    body > footer > .lower > span {
        display: block;
        margin-bottom: 0.5rem;
    }




    /*ASSETS*/
    .loader { position: fixed; top:0; left: 0; bottom: 0; right: 0; transition: opacity 1s ease-out; }

    body > .loader { z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: var(--black); }
    body > .loader .logo { font-size: 3rem; font-weight: 800; }
    body > .loader .logo span:first-child { color: var(--white); }
    body > .loader .logo span:last-child { color: var(--magenta); }
}