@keyframes el-1 {
    from {
        top: 10%;
        left: 15%;
    }
    to {
        top: 15%;
        left: 20%;
        scale: 110%;
        rotate: 20deg;
    }
}
@keyframes el-2 {
    from {
        left: 40%;
        top: 90%;
        scale: 100%;
    }
    to {
        top: 85%;
        left: 35%;
        scale: 110%;
        rotate: 45deg;
    }
}
@keyframes el-3 {
    from {
        left: 75%;
        top: 95%;
        scale: 80%;
    }
    to {
        top: 90%;
        left: 70%;
        scale: 90%;
        rotate: 15deg;
    }
}
@keyframes el-4 {
    from {
        left: 80%;
        top: 10%;
        scale: 100%;
    }
    to {
        top: 5%;
        left: 70%;
        scale: 80%;
        rotate: 25deg;
    }
}
@keyframes el-5 {
    from {
        left: 10%;
        top: 50%;
        scale: 100%;
    }
    to {
        top: 45%;
        left: 5%;
        scale: 90%;
        rotate: 10deg;
    }
}
@keyframes el-6 {
    from {
        left: 5%;
        top: 70%;
        scale: 100%;
    }
    to {
        top: 65%;
        left: 10%;
        scale: 90%;
        rotate: 60deg;
    }
}
@keyframes el-7 {
    from {
        left: 85%;
        top: 65%;
        scale: 100%;
    }
    to {
        top: 70%;
        left: 80%;
        scale: 90%;
        rotate: 70deg;
    }
}
@keyframes el-8 {
    from {
        left: 80%;
        top: 35%;
        scale: 100%;
    }
    to {
        top: 30%;
        left: 75%;
        scale: 90%;
        rotate: -40deg;
    }
}
@keyframes el-9 {
    from {
        left: 25%;
        top: 85%;
        scale: 100%;
    }
    to {
        top: 80%;
        left: 20%;
        scale: 90%;
        rotate: -90deg;
    }
}
.element1 {
    width: 158px;
    height: 151px;
    background-image: url(pictures/corn1.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}
.element2 {
    width: 158px;
    height: 151px;
    background-image: url(pictures/corn2.png);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    z-index: 2;
    overflow: hidden;
}
#el-1 {
    left: 10%;
    animation-name: el-1;
    animation-duration: 10s;
    animation-timing-function: cubic-bezier(1, 1, 1, 1);
    animation-iteration-count: infinite;
    animation-direction: alternate;
}
#el-2 {
    left: 40%;
    top: 90%;
    animation: el-2 7s cubic-bezier(1, 1, 1, 1) infinite alternate-reverse;
}
#el-3 {
    left: 70%;
    top: 70%;
    animation: el-3 9s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
#el-4 {
    left: 80%;
    top: 15%;
    animation: el-4 8s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
#el-5 {
    left: 20%;
    top: 60%;
    animation: el-5 5s cubic-bezier(1, 1, 1, 1) infinite alternate-reverse;
}
#el-6 {
    left: 20%;
    top: 60%;
    animation: el-6 8s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
#el-7 {
    left: 85%;
    top: 45%;
    animation: el-7 11s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
#el-8 {
    left: 80%;
    top: 30%;
    animation: el-8 15s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
#el-9 {
    display: none;
    left: 45%;
    top: 0;
    animation: el-9 9s cubic-bezier(1, 1, 1, 1) infinite alternate;
}
@keyframes top {
    from {
        scale: 98%;
    }
    to {
        scale: 100%;
    }
}
@keyframes bottom {
    from {
        top: 0;
    }
    to {
        top: 100px;
    }
}
.letter {
    position: relative;
    animation: top 1s cubic-bezier(0.2, 0.2, 0.2, 0.2) infinite alternate;
}

@media screen and (max-width: 1280px) {
    @keyframes el-2 {
        from {
            left: 40%;
            top: 80%;
            scale: 100%;
        }
        to {
            top: 75%;
            left: 35%;
            scale: 110%;
            rotate: 45deg;
        }
    }
}
@media screen and (max-width: 1600px) {
    /* .element1,
    .element2 {
        width: 100px;
        height: 96px;
    } */
}
@media screen and (max-width: 900px) {
    /* .element1,
    .element2 {
        width: 90px;
        height: 86px;
    } */
    #el-9 {
        display: block;
    }
    #el-1{
        display: none;
    }
    @keyframes el-1 {
        from {
            top: 0%;
            left: 5%;
        }
        to {
            top: 0%;
            left: 10%;
            scale: 110%;
            rotate: 20deg;
        }
    }
    @keyframes el-2 {
        from {
            left: 85%;
            top: 75%;
            scale: 90%;
        }
        to {
            top: 70%;
            left: 90%;
            scale: 100%;
            rotate: 45deg;
        }
    }
    @keyframes el-3 {
        from {
            left: 0%;
            top: 95%;
            scale: 100%;
        }
        to {
            top: 90%;
            left: 5%;
            scale: 110%;
            rotate: 15deg;
        }
    }
    @keyframes el-4 {
        from {
            left: 90%;
            top: 10%;
            scale: 100%;
        }
        to {
            top: 5%;
            left: 85%;
            scale: 80%;
            rotate: 25deg;
        }
    }
    @keyframes el-5 {
        from {
            left: 10%;
            top: 65%;
            scale: 100%;
        }
        to {
            top: 60%;
            left: 5%;
            scale: 90%;
            rotate: 10deg;
        }
    }
    @keyframes el-6 {
        from {
            left: 10%;
            top: 35%;
            scale: 100%;
        }
        to {
            top: 30%;
            left: 15%;
            scale: 90%;
            rotate: 60deg;
        }
    }
    @keyframes el-7 {
        from {
            left: 0%;
            top: 0%;
            scale: 100%;
            rotate: -90deg;
        }
        to {
            top: 10%;
            left: 5%;
            scale: 90%;
            rotate: -70deg;
        }
    }
    #el-8{
        display: none;
    }
    @keyframes el-8 {
        from {
            left: 90%;
            top: 50%;
            scale: 100%;
        }
        to {
            top: 45%;
            left: 85%;
            scale: 90%;
            rotate: -40deg;
        }
    }
    @keyframes el-9 {
        from {
            left: 40%;
            top: -10%;
            scale: 100%;
        }
        to {
            top: -5%;
            left: 45%;
            scale: 90%;
            rotate: -90deg;
        }
    }
}
@media screen and (max-width: 520px) {
    /* .element1,
    .element2 {
        width: 90px;
        height: 86px;
    } */
    #el-9 {
        display: block;
    }
    #el-1{
        display: none;
    }
    @keyframes el-1 {
        from {
            top: 0%;
            left: 5%;
        }
        to {
            top: 0%;
            left: 10%;
            scale: 110%;
            rotate: 20deg;
        }
    }
    @keyframes el-2 {
        from {
            left: 85%;
            top: 75%;
            scale: 90%;
        }
        to {
            top: 70%;
            left: 90%;
            scale: 100%;
            rotate: 45deg;
        }
    }
    @keyframes el-3 {
        from {
            left: -10%;
            top: 95%;
            scale: 100%;
        }
        to {
            top: 90%;
            left: 0%;
            scale: 110%;
            rotate: 15deg;
        }
    }
    @keyframes el-4 {
        from {
            left: 90%;
            top: 10%;
            scale: 100%;
        }
        to {
            top: 5%;
            left: 85%;
            scale: 80%;
            rotate: 25deg;
        }
    }
    @keyframes el-5 {
        from {
            left: 10%;
            top: 65%;
            scale: 100%;
        }
        to {
            top: 60%;
            left: 5%;
            scale: 90%;
            rotate: 10deg;
        }
    }
    @keyframes el-6 {
        from {
            left: -10%;
            top: 35%;
            scale: 100%;
        }
        to {
            top: 30%;
            left: -5%;
            scale: 90%;
            rotate: 60deg;
        }
    }
    @keyframes el-7 {
        from {
            left: -10%;
            top: 0%;
            scale: 100%;
            rotate: -90deg;
        }
        to {
            top: 10%;
            left: -5%;
            scale: 90%;
            rotate: -70deg;
        }
    }
    #el-8{
        display: none;
    }
    @keyframes el-8 {
        from {
            left: 90%;
            top: 50%;
            scale: 100%;
        }
        to {
            top: 45%;
            left: 85%;
            scale: 90%;
            rotate: -40deg;
        }
    }
    @keyframes el-9 {
        from {
            left: 40%;
            top: -10%;
            scale: 100%;
        }
        to {
            top: -5%;
            left: 45%;
            scale: 90%;
            rotate: -90deg;
        }
    }
}
/* @media screen and (max-width: 520px) {
    @keyframes el-8 {
        from {
            left: 80%;
            top: 50%;
            scale: 100%;
        }
        to {
            top: 45%;
            left: 75%;
            scale: 90%;
            rotate: -40deg;
        }
    }
    @keyframes el-3 {
        from {
            left: 75%;
            top: 60%;
            scale: 100%;
        }
        to {
            top: 65%;
            left: 80%;
            scale: 110%;
            rotate: 5deg;
        }
    }
    @keyframes el-7 {
        from {
            left: 75%;
            top: 30%;
            scale: 100%;
        }
        to {
            top: 35%;
            left: 70%;
            scale: 90%;
            rotate: 70deg;
        }
    }
    @keyframes el-2 {
        from {
            left: 40%;
            top: 70%;
            scale: 100%;
        }
        to {
            top: 65%;
            left: 35%;
            scale: 110%;
            rotate: 45deg;
        }
    }
} 
*/