/*Loading page text*/
html, body {
    width: 100%;
    height:100%;
}
body {
    margin: 0;
    padding: 0;
    font-family: monospace;
    background: linear-gradient(-45deg, #F53844, #42378F, #6D17CB, #2876F9);
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
}
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
.whole-body{
    cursor: url("images/normal.cur"), auto;
}
a{cursor: url("images/link.cur"), auto;}
li{cursor: url("images/link.cur"), auto;}
i{cursor: url("images/link.cur"), auto;}
p{cursor: url("images/link.cur"), auto;}
h1{cursor: url("images/link.cur"), auto;}

.center{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.loader{
    display: flex;
    justify-content: center;
    align-items: center;
}
.circle{
    height: 20px;
    width: 20px;
    margin: 0 10px;
    border-radius: 50%;
    animation: animate 2s infinite linear;
    background: navajowhite;
    box-shadow: 4px 3px 10px black ,
    -4px 3px 5px #888888
}
.circle:nth-child(1){
    animation-delay: 0.5s;
}
.circle:nth-child(2){
    animation-delay: 1s;
}
.circle:nth-child(3){
    animation-delay: 1.5s;
}
@keyframes animate {

    0%,
    10%{
        transform: translateY(5px);
    }

    50%{
        transform:
        translateY(-25px);
    }
}