@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes slide { 100% { left: calc(100% + 80vh) } }
@keyframes fall { 50% { top: -50vw } 100% { top: calc(100% + 50vw) } }
@keyframes push { 33% { top: calc(100% - 15vh) } 66% { top: calc(100% - 15vh) } 100% { top: 100% } }
@keyframes orbit { from { transform: rotate(360deg) translateX(25vw) } to { transform: rotate(0deg) translateX(25vw) } }
@keyframes orbit2 { from { transform: rotate(360deg) translateX(-25vw) scaleY(-1) } to { transform: rotate(0deg) translateX(-25vw) scaleY(-1) } }
@keyframes x { 100% { transform: translateX( calc(100vw - 24.6vw) ) } }
@keyframes y { 100% { transform: translateY( calc(100vh - 30vw) ) } }
@keyframes frog-jump {
    5% { left: 40%; bottom: 30vh; }
    10% { left: 80%; bottom: 0; }
    40% { left: 80%; bottom: 0; transform: scaleX(1) }
    50% { left: 80%; bottom: 0; transform: scaleX(-1) }
    55% { left: 40%; bottom: 30vh; transform: scaleX(-1) }
    60% { left: 0; bottom: 0; transform: scaleX(-1) }
    80% { left: 0; bottom: 0; transform: scaleX(-1) }
    90% { left: 0; bottom: 0; transform: scaleX(1) }
}
@keyframes dance {
    from { transform: rotateY(360deg) translateX(-60vw) } to { transform: rotateY(0) translateX(0vw) }
}
@keyframes dance2 {
    from { transform: rotateY(0) translateX(0vw) } to { transform: rotateY(360deg) translateX(40vw) }
}
@keyframes blink {
    0% { transform: scaleX(-1) }
    1% { transform: scaleX(1) }
    49% { transform: scaleX(1) }
    50% { transform: scaleX(-1) }
    99% { transform: scaleX(-1) }
}

html {
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
body {
    margin: 0;
    height: 100%;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.bg {
    position: relative;
    width: 100%;
    height: 100%;
}
.pavlo_container {
    width: 24.6vw;
    height: 30vw;
    position: absolute;
    left: 0;
    top: 0;
    animation: x 7s linear infinite alternate;
}
.pavlo_container_2 {
    width: 100%;
    height: 100%;
    animation: y 7s linear infinite alternate;
}
.pavlo {
    width: 100%;
    height: 100%;
    animation: spin 2s linear infinite;
}
.parik {
    position: absolute;
    height: 100vh;
    left: -80vh;
    top: 0;
    opacity: .3;
    animation: slide 4s linear infinite;
}
.yulia_dima {
    width: 30vh;
    position: absolute;
    top: 100%;
    left: calc(50% - 15vh);
    animation: push 4s linear infinite;
}
.marly {
    width: 20vw;
    bottom: 0;
    left: 0;
    position: absolute;
    transform: scaleX(1);
    animation: frog-jump 4s ease infinite;
}
.illia, .illia_king {
    width: 15vw;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-top: -10vw;
}
.illia {
    animation: orbit 4s linear infinite;
}
.illia_king {
    animation: orbit2 4s linear infinite;
}
.chupa, .ksyu {
    top: 10%;
    left: 50%;
    position: absolute;
}
.chupa {
    width: 20vw;
    animation: dance2 2s linear infinite alternate;
}
.ksyu {
    width: 30vw;
    animation: dance 2s linear infinite alternate;
}
.olia {
    width: 100%;
    top: -50vw;
    position: absolute;
    animation: fall 3s ease-in infinite;
}
.max {
    width: 10vh;
    position: absolute;
    top: 70%;
    left: calc(50% - 10vh);
    animation: blink 1s none infinite;
}
.form {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.input, button {
    font-size: 32px;
}
.result {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.result img {
    flex: 1 1 auto;
}