@font-face {
    font-family: 'Orbitron';
    src: url('orbitron-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}
@font-face {
    font-family: 'Play';
    src: url('play-700.woff2') format('woff2');
    font-style: normal;
    font-weight: 700;
}

body {
    margin: 0;

    .x-grid-body:after {
        content: ' ';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        background: url('images/skala.svg') no-repeat right bottom;
        background-size: auto 80%;
        opacity: 0.02;
        pointer-events: none;
        z-index: 1;
    }
    .x-window .x-grid-body:after {
        content: unset;
    }
}

/*
 * Logo and title
 */
.brand-logo,
.brand-title {
    font-family: Orbitron, 'Arial Black', sans-serif;
    font-weight: 700;
    text-shadow: 1px 1px 0 #616161;

    &::before {
        content: '425';
        color: #e0e0e0;
    }

    &::after {
        content: ' ОШП';
        font-family: Play, sans-serif;
        font-size: 1.1em;
        color: #e0e0e0;
    }
}

.brand-logo {
    font-size: 24px;
    line-height: 24px;
    margin: 0 16px;
    text-shadow: 1px 1px 0 #424242;
}

.brand-title {
    font-size: 1.2em;

    .theme-dark & {
        text-shadow: 1px 1px 0 #424242;
    }
}

/*
 * Wallpaper
 */
/*noinspection CssUnknownTarget*/
#brand-wallpaper {
    height: 100vh;

/ / background: #222317 url('images/425.png') no-repeat center center;
/ / background-size: auto 90 %;
/ / background: #222317 url('images/425.png') no-repeat center 320 px;
/ / background-size: auto 370 px;
/ / background: #222317 url('images/425-.png') no-repeat center 320 px;
/ / background-size: auto 430 px;
/ / background: #222317 url('images/425-.png') no-repeat center;
/ / background-size: auto 90 %;
/ / background: #222317 url('images/425-.png') no-repeat center 320 px;
/ / background-size: auto calc(100 % - 340 px);
/ / background-position: right 20 px bottom 20 px;
    background: #222317 url('images/425---.png') no-repeat bottom 10px center;
    background-size: contain;

    .theme-light & {
        background-color: #f5f5f5;

        &::before,
        &::after {
            text-shadow: 1px 1px 0 #616161;
        }
    }

    &::before,
    &::after {
        font-family: Orbitron, 'Arial Black', sans-serif;
        font-weight: 700;
        font-size: 200px;
        line-height: 200px;
        position: fixed;
        right: 20px;
        bottom: 15px;
        text-shadow: 1px 1px 0 #424242;
    }
    &::before {
        #content: '425';
        color: #e0e0e0;
        opacity: .05;
    }
    &::after {
        #content: 'ОШП';
        font-family: Play, sans-serif;
        font-size: 80px;
        color: #eeeeee;
    }

    &.error::before {
        color: #e57373;
    }

    &.error::after {
        color: #ef9a9a;
    }
}

/*
 * Loader
 */
#brand-loader {
    width: 100px;
    height: 100px;
    position: absolute;
    right: 47%; /* fallback */
    left: calc(50% - 50px);
    top: 30%;
    border-spacing: 0.3em;
}

#brand-loader td {
    background: #e0e0e0;
    opacity: 0;
    animation: flicker 0.6s ease-out infinite alternate;
}

#brand-loader tr:nth-child(1) td:nth-child(1) { animation-delay: .50s; }
#brand-loader tr:nth-child(1) td:nth-child(2) { animation-delay: .70s; }
#brand-loader tr:nth-child(1) td:nth-child(3) { animation-delay: .60s; }
#brand-loader tr:nth-child(2) td:nth-child(1) { animation-delay: .20s; }
#brand-loader tr:nth-child(2) td:nth-child(2) { animation-delay: .80s; }
#brand-loader tr:nth-child(2) td:nth-child(3) { animation-delay: .90s; }
#brand-loader tr:nth-child(3) td:nth-child(1) { animation-delay: .10s; }
#brand-loader tr:nth-child(3) td:nth-child(2) { animation-delay: .30s; }
#brand-loader tr:nth-child(3) td:nth-child(3) { animation-delay: .40s; }

@keyframes flicker {
    from, 20% {
        opacity: 0;
    }
    to, 100% {
        opacity: 1;
    }
}