body {
    cursor: none;
    background-image: url(images/gradient.png);
    background-size: cover;
    background-position: center;
}

.button1 {
    position: absolute;
    top: 50%;
    left: 20%;
    width: 350px;
    height: 350px;
    background-image: url('images/design_button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    font-family: 'Annie Use Your Telescope';
    color: white;
    font-size: 2em;

    animation: orbit 10s linear infinite;
    animation-delay: -3s;
}

.button2 {
    position: absolute;
    top: 60%;
    left: 70%;
    width: 350px;
    height: 350px;
    background-image: url('images/other_button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    font-family: 'Annie Use Your Telescope';
    font-size: 2em;
    color: white;

    animation: orbit 10s linear infinite;
    animation-delay: -9s;
}

.button3 {
    position: absolute;
    top: 30%;
    left: 45%;
    width: 350px;
    height: 350px;
    background-image: url('images/design_button.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    font-family: 'Annie Use Your Telescope';
    color: white;
    font-size: 2em;

    animation: orbit 10s linear infinite;
    animation-delay: 0s;
}


/* button animation */
@keyframes orbit {
    from {
        transform: translate(-30%, -50%) rotate(0deg) translateX(50px);
    }

    to {
        transform: translate(-30%, -50%) rotate(360deg) translateX(50px);
    }
}


#custom-cursor {
    position: absolute;
    width: 50px;
    height: 50px;
    background-image: url('images/cursor.png');
    background-size: cover;
    pointer-events: none;
    transition: transform 0.1s ease-out;
}