body {
    background: var(--color-grey-light);
}

#app {
    width: 100%;
    min-height: 100%;
}

.spinner-container {
    width: 100vw;
    height: 100vh;
}

.spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
}
.spinner hr {
    border: 0;
    margin: 0;
    width: 40%;
    height: 40%;
    position: absolute;
    border-radius: 50%;
    animation: spin 2s ease infinite;
}

.spinner :first-child {
    background: var(--spinner-first-item-color);
    animation-delay: -1.5s;
}
.spinner :nth-child(2) {
    background: var(--spinner-second-item-color);
    animation-delay: -1s;
}
.spinner :nth-child(3) {
    background: var(--spinner-third-item-color);
    animation-delay: -0.5s;
}
.spinner :last-child {
    background: var(--spinner-fourth-item-color);
}

@keyframes spin {
    0%, 100% { transform: translate(0); }
    25% { transform: translate(160%); }
    50% { transform: translate(160%, 160%); }
    75% { transform: translate(0, 160%); }
}