audio {
    position: fixed;
    top: -15%;
    left: 15%;
    min-width: 25%;
    min-height: 50%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background-size: cover;
    transition: 1s opacity;
}

    body {
    background-image: url('Obrázky/party.jpg');
    background-size: 100%;
}





#oi:hover {
    -webkit-animation: rotation 2s infinite linear;
}

@-webkit-keyframes rotation {
    from {
        -webkit-transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
    }
}

.hole {
    width: 22%;
    height: 22%
}

.comet {
    width: -300px;
    height: -380px;
    position:fixed;
    -webkit-animation: mymove 3s infinite; /* Safari 1.0 - 2.0 */
    -webkit-animation-timing-function:step-end; /* Safari 4.0 - 2.0 */
    animation: mymove 3s infinite;
    animation-timing-function: linear;
    z-index: +1;
}

.comet2 {
    width: 320px;
    height: 380px;
    position:relative;
    top: 1px;
    left: 500px;
    
    -webkit-animation: mymove 1s both; /* Safari 6.0 - 2.0 */
    -webkit-animation-timing-function: linear; /* Safari 4.0 - 2.0 */
    animation: mymove 8s infinite;
    animation-timing-function: unset;
    z-index: +1;
}



.planet {
    width: 500px;
    height: 500px;
    position: absolute;
    right: 0%;
    z-index: +3
}


    .planet:hover {
        animation: planet 2s infinite;
    }

@keyframes planet {

    25% {
        transform: skewX(3deg)
    }

    50% {
        transform: skewX(-3deg)
    }

    100% {
        transform: skewX(0deg)
    }
}

}




@-webkit-keyframes mymove {
    from {
        left: 0px;
    }

    to {
        top: 0px;
    }
}

@keyframes mymove {
    from {
        left: 400px;
        top: 1000px
    }

    to {
        left: 0px;
        top: -1000px
    }
}