body {
    margin: 0;
    height: 0;
    background-color: rgb(255, 255, 255);
}

.emad {
    opacity: 0;
    display: none;
    transition: opacity 1s ease-in;
}

.loader {
    width: 50px;
    position: absolute;
    top:  210px;
    left: 700px;
    transform-origin: bottom center;
    animation: rotate 1s linear infinite;
}

.circle {
    display: inline-block;
    background-color: rgb(44, 44, 44);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    transform: scale(0);
    animation: grow 1.5s linear infinite;
    margin: 0px;
}

.circle:nth-child(2) {
    background-color:   #aeb647;
    animation-delay: 0.1s;
}

.circle:nth-child(3) {
    animation-delay: 0.3s;
    background-color:  #3f568b;
}

@keyframes rotate {
to {
transform: rotate(360deg);
}  }

@keyframes grow {
50%{
    transform: scale(1);
}
}


@media screen and (max-width: 930px) {
   
    .loader {
        position: absolute;
        top:  270px;
        left: 430px;
    }
}

@media screen and (max-width: 630px) {
   
    .loader {
        position: absolute;
        top:  270px;
        left: 240px;
    }
}