body {
    display: flex;
    justify-content: center;
    background-color: rgb(66, 66, 66);
}

.canvas {
    width: 981px;
    height: 608px;
    border: 3px solid black;
    background-color: white;
}

.word {
    position: absolute;
}

.btn {
    opacity: 0;
    position: absolute;
    animation-name: radiobtn;
    animation-duration: 0.5s;
    animation-delay: 2.5s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
}

.cursor {
    position: absolute;
    margin-left: 300px;
    margin-top: 500px;
    animation-name: cursormove;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: 1;
}

.cursorA {
    position: absolute;
    margin-left: 300px;
    margin-top: 500px;
    animation-name: cursormove2, click, cursormove3;
    animation-duration: 2s, 0.5s, 1s;
    animation-delay: 0s, 2.6s, 3s;
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    z-index: 1;
}


@keyframes cursormove {
    0% {

    }

    91% {
        opacity: 100;
    }

    92% {
        opacity: 0;
    }


    100% {
        margin-left: 763px;
        margin-top: 260px;
        opacity: 0;
    }
}

@keyframes cursormove2 {
    0% {
        opacity: 0;
    }

    91% {
        opacity: 0;
    }

    92% {
        opacity: 100;
    }


    100% {
        margin-left: 763px;
        margin-top: 260px;
        opacity: 100;
    }
}

@keyframes cursormove3 {
    0% {
        margin-left: 763px;
        margin-top: 260px;
    }

    100% {
        margin-left: 696px;
        margin-top: 212px;
        width: 35px;
        height: 35px;
    }
}

@keyframes click {
    0% {
        width: 85px;
        height: 85px;
    }

    50% {
        width: 75px;
        height: 75px;
    }

    100% {
        width: 85px;
        height: 85px;
    }
}

@keyframes radiobtn {
    0% {
        opacity: 0;
    }

    99% {
        opacity: 0;
    }

    100% {
        opacity: 100;
    }
}