*, *::before, *::after {
    box-sizing: border-box;
}


/*.container {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    transform: rotate(45deg);
}
*/
/*.center {
    width: 8px;
    height: 8px;
    background-color: red;
    border-radius: 50%;
}
*/
.inner, .outer {
    position: absolute;
    display: grid;
    gap: 4px;
    grid-template-columns: 1fr 1fr;
    align-content: space-around;
    justify-content: space-between;
    animation: anim_inner 2000ms ease-in-out infinite;
}

.inner__item, .outer__item {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #f8961e;
}

.outer {
    gap: 16px;
    animation: anim_outer 2000ms ease-in-out 200ms infinite;
}

.outer__item {
    width: 10px;
    height: 10px;
    background-color: #43aa8b;
}

@keyframes anim_outer {
    from {
        transform: rotate(0deg)
    }

    30% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes anim_inner {
    from {
        transform: rotate(0deg)
    }

    30% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(360deg)
    }
}

@keyframes blink {
    50% {
        color: transparent
    }
}

.loading__dot {
    animation: 2s blink infinite
}

    .loading__dot:nth-child(2) {
        animation-delay: 250ms
    }

    .loading__dot:nth-child(3) {
        animation-delay: 500ms
    }