#floaty {

    position: fixed;
    font-size: xx-large;
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
    font-weight: 700;
    left: 50dvw;
    top: 50dvh;
}

#ball {
    position: fixed;
    left: 45%;
    top: 40%;
}


@keyframes spin {
    0% {
        -webkit-transform: rotate(630deg) translateX(60dvh) rotate(-630deg);
    }

    45% {
        -webkit-transform: rotate(360deg) translateX(40dvh) rotate(-360deg);

    }

    75% {
        -webkit-transform: rotate(180deg) translateX(20dvh) rotate(-180deg);
    }

    100% {

        -webkit-transform: rotate(0deg) translateX(0dvh) rotate(0deg);
    }
}

span {
    position: absolute;
    animation: spin 10s infinite linear;
}

@keyframes origin {

    100% {
        left: initial;
        top: initial;
    }
}




span:nth-of-type(2) {
    animation-delay: 400ms;
}

span:nth-of-type(3) {
    animation-delay: 800ms;
}

span:nth-of-type(4) {
    animation-delay: 1200ms;
}

span:nth-of-type(5) {
    animation-delay: 1600ms;
}

span:nth-of-type(6) {
    animation-delay: 2000ms;
}

span:nth-of-type(7) {
    animation-delay: 2400ms;
}

span:nth-of-type(8) {
    animation-delay: 2800ms;
}

span:nth-of-type(9) {
    animation-delay: 3200ms;
}

span:nth-of-type(10) {
    animation-delay: 3600ms;
}

span:nth-of-type(11) {
    animation-delay: 4000ms;
}

span:nth-of-type(12) {
    animation-delay: 4400ms;
}

span:nth-of-type(13) {
    animation-delay: 4800ms;
}

span:nth-of-type(14) {
    animation-delay: 5200ms;
}



#links {

    padding-top: 10%;
}