/* create the paw prints */

:root {
    --loader-color: rgba(185,225,229,1.0);
    --header-color: rgb(185,225,229);
}

.loader {
    top: 0px;
    position: sticky;
    z-index: 9999999999;
    background: var(--loader-color); 
    height: 100vh;
}

.pad {
    width: 25px;
    height: 27px;
    background-color: #62519c;
    -webkit-border-radius: 63px 63px 63px 63px / 108px 108px 72px 72px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    display: block;
    position: absolute;
}

.large {
    width: 70px;
    height: 80px;
    transform: rotate(80deg);
    left: 100px;
    top: 50px;
}

.small-1 {
    transform: rotate(50deg);
    left: 145px;
    top: 28px;
}

.small-2 {
    transform: rotate(65deg);
    left: 174px;
    top: 50px;
}

.small-3 {
    transform: rotate(98deg);
    position: absolute;
    left: 178px;
    top: 87px;
}

.small-4 {
    transform: rotate(140deg);
    position: absolute;
    left: 158px;
    top: 117px;
}

/* position and animate */

.paw-print-1 {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 1101px;
    transform: rotate(-92deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite;
    animation: /*keyframe*/ walk /*duration*/ 3s /*transition*/ linear /*repeat*/ infinite;
    border: 10px solid black;
}

.paw-print-2 {
    opacity: 0;
    position: absolute;
    left: calc(50% + 100px);
    top: 923px;
    transform: rotate(-78deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 0.25s;
    animation: walk 3s linear infinite /*delay*/ 0.25s;
}

.paw-print-3 {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 811px;
    transform: rotate(-98deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 0.5s;
    animation: walk 3s linear infinite 0.5s;
}

.paw-print-4 {
    opacity: 0;
    position: absolute;
    left: calc(50% + 100px);
    top: 639px;
    transform: rotate(-78deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 0.75s;
    animation: walk 3s linear infinite 0.75s;
}

.paw-print-5 {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 507px;
    transform: rotate(-104deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 1s;
    animation: walk 3s linear infinite 1s;
}

.paw-print-6 {
    opacity: 0;
    position: absolute;
    left: calc(50% + 100px);
    top: 325px;
    transform: rotate(-76deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 1.25s;
    animation: walk 3s linear infinite 1.25s;
}

.paw-print-7 {
    opacity: 0;
    position: absolute;
    left: 50%;
    top: 218px;
    transform: rotate(-97deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 1.5s;
    animation: walk 3s linear infinite 1.5s;
}

.paw-print-8 {
    opacity: 0;
    position: absolute;
    left: calc(50% + 100px);
    top: 84px;
    transform: rotate(-75deg) translateY(-120px);
    -webkit-animation: walk 3s linear infinite 1.75s;
    animation: walk 3s linear infinite 1.75s;
}

/* walking effect animation keyframes */

@-webkit-keyframes walk {
    25% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes walk {
    /* appear */
    25% {
        opacity: 1;
    }
    /* disappear */
    100% {
        opacity: 0;
    }
}