@font-face {
    font-weight: 400;
    font-family: "PTSans";
    font-style: normal;
    src: url("../fonts/PTSans-Regular.ttf") format("truetype");
}

body {
    font-size: 100%;
    font-weight: 400;
    color: #ffffff;
    margin: 0;
    padding: 0;
    clear: both;
    overflow: hidden;
    user-select: none;
    font-family: "PTSans", Arial, Helvetica, sans-serif;
}
.splash-wrapper {
    width: 21.875rem;
    height: 14.563rem;
    box-sizing: border-box;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    background: url("../images/splash-bg.png");
    background-size: cover;
    > div {
        width: 14rem;
        &.loader {
            width: 11.5rem;
        }
    }
}
.logo-wrapper {
    margin-bottom: 1.5rem;
}
.version {
    font-size: 0.875rem;
    margin-bottom: 0.313rem;
}
.status {
    font-size: 13px;
    margin-bottom: 1rem;
}
.copyright {
    font-size: 13px;
}

// Loader
$boxes: 20;
$durationAll: 1.1s;
$duration: -$durationAll / $boxes;
$color: #1c89ea;

.loader {
    height: 1px;
    display: flex;
    transform: translateZ(0);
    margin-bottom: 1rem;
    -webkit-mask-image: -webkit-gradient(
        linear,
        left 0%,
        right 100%,
        from(#000),
        to(#0000)
    );
    div {
        flex: 1;
        background: #{$color};
        animation: go #{$durationAll} infinite alternate ease;
        box-shadow: 0 0 10px #{$color};

        @for $i from 1 through $boxes {
            &:nth-child(#{$i}) {
                animation-delay: $duration * ($boxes - $i);
            }
        }
    }
    @keyframes go {
        100% {
            background: transparent;
            flex: 10;
            box-shadow: 0 0 0 transparent;
        }
    }
}
