#loading {
    position: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgb(0, 0, 0);
    z-index: 9999;
    color: white;
    transition: all 1s linear;
}
#loading.loaded {
    opacity: 0;
}
#loading-image {
    z-index: 100;
    width: 35%;
}
#loading .status {
    animation: fadeIn var(--dur1) linear forwards;
    text-align: center;
    font-size: 24px;
}

#loading .statusDot {
    animation: appear1 var(--dur1) var(--dur1) steps(1, start) infinite;
    display: inline-block;
}

#loading .statusDot:nth-child(2) {
    animation: appear2 var(--dur1) var(--dur1) steps(1, start) infinite;
}

#loading .statusDot:nth-child(3) {
    animation: appear3 var(--dur1) var(--dur1) steps(1, start) infinite;
}

#loading {
    --fg: #17181c;
    --shade1: #727274;
    --shade2: #cccdd1;
    --shade3: #f3f4f8;
    --shade4: #ffffff;
    --dur1: 1s;
    --dur2: 6s;
    font-size: calc(16px + (32 - 16) * (100vw - 320px) / (2560 - 320));
}


@keyframes move2 {
    from, 8% {
        transform: translate(0, 0);
        width: 3em;
        height: 3em;
    }
    12% {
        transform: translate(-4em, 0);
        width: 7em;
        height: 3em;
    }
    16%, 83% {
        transform: translate(-4em, 0);
        width: 3em;
        height: 3em;
    }
    87% {
        transform: translate(-4em, 0);
        width: 3em;
        height: 7em;
    }
    91%, to {
        transform: translate(-4em, 4em);
        width: 3em;
        height: 3em;
    }
}

@keyframes move3 {
    from, 33% {
        transform: translate(0, 0);
        height: 3em;
    }
    37% {
        transform: translate(0, -4em);
        height: 7em;
    }
    41%, to {
        transform: translate(0, -4em);
        height: 3em;
    }
}

@keyframes move4 {
    from, 58% {
        transform: translate(0, 0);
        width: 3em;
    }
    62% {
        transform: translate(0, 0);
        width: 7em;
    }
    66%, to {
        transform: translate(4em, 0);
        width: 3em;
    }
}


@keyframes appear1 {
    from {
        visibility: hidden;
    }
    33%, to {
        visibility: visible;
    }
}

@keyframes appear2 {
    from, 33% {
        visibility: hidden;
    }
    67%, to {
        visibility: visible;
    }
}

@keyframes appear3 {
    from, 67% {
        visibility: hidden;
    }
    to {
        visibility: visible;
    }
}

#loading .item {
    text-align: center;
    display: block;
    background-color: transparent;
    border: 1px solid transparent;
    margin-right: 10px;
    margin-bottom: 1px;
    float: left;
}