body, h1{
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none; /* IE 10 and IE 11 */
    user-select: none; /* Standard syntax */
}


@keyframes mymove {
    0%   {background-color: #fff;}
    10%  {background-color: #dcdca5;}
    20%  {background-color: #a8a8ef;}
    30% {background-color: #acf3ac;}
    40% {background-color: #eed3d7;}
    50% {background-color: #a0d7d1;}
    60% {background-color: #dcb89f;}
    70% {background-color: #c588db;}
    80% {background-color: #9ba6d0;}
    90% {background-color: #bf82b0;}
    100% {background-color: #fff;}
}


@keyframes movement {
    0% {
        left: calc(32pt);
    }
    50% {
        left: calc(100% - 64pt)
    }
    100% {
        left: calc(32pt);
    }
}

@keyframes iiindex {
    50% {
        z-index: 10;
    }
    100% {
        z-index: 9;
    }
}

@keyframes iiindexback {
    50% {
        z-index: 9;
    }
    100% {
        z-index: 10;
    }
}

@keyframes toptop {
    0% {
        left: 10pt;
    }
    50% {
        left: 10pt;
    }
    51% {
        left: 6pt;
    }
    100% {
        left: 6pt;
    }
}

@keyframes circle{
    0%{
        transform:rotate(0deg)
        translate(-165px)
        rotate(0deg);

    }
    100%{
        transform:rotate(360deg)
        translate(-165px)
        rotate(-360deg);
    }
}