html,
body {
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    margin: 0;
    background-color: #101010;
}

.app-loader {
    position: fixed;
    z-index: 999999;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #101010;

    &:not(:first-of-type) {
        display: none;
    }
}

.app-loader:first-of-type:not(:last-of-type) {
    opacity: 0;
    z-index: -1;
    transition: opacity, z-index 0.2s ease-in-out;
}

.spinner {
    display: inline-block;
    position: relative;
    width: 80px;
    height: 20px;
}

.point {
    position: absolute;
    top: 0;
    border-radius: 50%;
    background: #fff;
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    width: 13px;
    height: 13px;

    &:nth-child(1) {
        left: 8px;
        animation: lds-ellipsis1 0.6s infinite;
    }

    &:nth-child(2) {
        left: 8px;
        animation: lds-ellipsis2 0.6s infinite;
    }

    &:nth-child(3) {
        left: 32px;
        animation: lds-ellipsis2 0.6s infinite;
    }

    &:nth-child(4) {
        left: 58px;
        animation: lds-ellipsis3 0.6s infinite;
    }
}

@keyframes lds-ellipsis1 {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes lds-ellipsis2 {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(24px, 0);
    }
}

@keyframes lds-ellipsis3 {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(0);
    }
}