:root {
    --main-color: #ecf0f1;
    --point-color: #555;
    --size: 5px;
    --duration: 0.1s;
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    background-color: #000c18;
    /* Dark background */
    color: #CCCCCC;
    font-family: "Roboto Condensed", sans-serif;
    font-weight: lighter;
}

.loader {
    overflow: hidden;
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    align-content: center;
    justify-content: center;
    z-index: 100000;
}

.loader__element {
    border-radius: 100%;
    font-size: 2.5rem;
    letter-spacing: 0.5rem;
    margin: calc(var(--size)*2);
    opacity: 0.01;
}

#loader1 .loader__element:nth-child(1) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-20) infinite;
}

#loader1 .loader__element:nth-child(2) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-18) infinite;
}

#loader1 .loader__element:nth-child(3) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-16) infinite;
}


#loader1 .loader__element:nth-child(4) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-14) infinite;
}


#loader1 .loader__element:nth-child(5) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-12) infinite;
}


#loader1 .loader__element:nth-child(6) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-10) infinite;
}


#loader2 .loader__element:nth-child(1) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-8) infinite;
}


#loader2 .loader__element:nth-child(2) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-6) infinite;
}


#loader2 .loader__element:nth-child(3) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-4) infinite;
}


#loader2 .loader__element:nth-child(4) {
    animation: preloader calc(var(--duration)*20) ease-in-out calc(var(--duration)*-2) infinite;
}


@keyframes preloader {

    0%,
    70%,
    100% {
        opacity: .05
    }

    30% {
        opacity: 1
    }
}