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

body {
    margin: 0;
}

/*
 * 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: 'Orion';
        color: #e0e0e0;
    }

    &::after {
        content: ' Admin';
        color: #c0c0c0;
    }
}

.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-color: #25292d;

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

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

    &::before,
    &::after {
        font-family: Orbitron, 'Arial Black', sans-serif;
        font-weight: 700;
        font-size: 70px;
        line-height: 70px;
        position: absolute;
        right: 20px;
        bottom: 15px;
        text-shadow: 1px 1px 0 #424242;
    }
    &::before {
        content: 'Orion Admin';
        color: #5c6770;
    }
    &::after {
        content: 'Admin';
        color: #4e575f;
    }

    &.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;
    }
}