*,
*::after,
*::before {
    padding: 0;
    margin: 0;
}

.main {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    transition: all 1s;
}

.loader {
    border-radius: 50%;
    border: 1px solid #D4AF37;
    position: relative;
}

.loader__inner {
    width: 4rem;
    height: 4rem;
    animation: spin 1s infinite linear;
}

    .loader__inner::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        border-bottom: 6px solid #D4AF37;
    }

.loader__outer {
    position: absolute;
    top: -30px;
    left: -32px;
    width: 8rem;
    height: 8rem;
    animation: spin 1s infinite linear reverse;
}

    .loader__outer::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        width: 8rem;
        height: 8rem;
        border-radius: 50%;
        border-bottom: 6px solid #D4AF37;
    }

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}