Zigmundo redesign 2020 CSS

<style>
/* Pop-falling */
.pop_area {
width: 100%;
height:100vh;
background-image: url("http://code2.kubanavratil.com/user/documents/upload/Res/2020/Zigmundo redesign/background_pattern.svg");
background-size: 33%;
pointer-events: none;
}

.kernels {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}

.kernels li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
animation: animate 25s linear infinite;
top: -150px;
filter: drop-shadow(2px 4px 6px black);
}

.kernels li:nth-child(1) {
left: 40%;
width: 100px;
height: 100px;
animation-delay: 0s;
animation-duration: 6s;
z-index: 2;
}
.kernels li:nth-child(2) {
left: 65%;
width: 40px;
height: 40px;
animation-delay: 3s;
animation-duration: 4s;
z-index: 2;
}
.kernels li:nth-child(3) {
left: 84%;
width: 80px;
height: 80px;
animation-delay: 0s;
animation-duration: 5s;
}
.kernels li:nth-child(4) {
left: 15%;
width: 50px;
height: 50px;
animation-delay: 2s;
animation-duration: 2s;
}
.kernels li:nth-child(5) {
left: 35%;
width: 20px;
height: 20px;
animation-delay: 3s;
animation-duration: 3s;
}
.kernels li:nth-child(6) {
left: 95%;
width: 40px;
height: 40px;
animation-delay: 1s;
animation-duration: 7s;
}
.kernels li:nth-child(7) {
left: 60%;
width: 40px;
height: 40px;
animation-delay: 3s;
animation-duration: 5s;
}

@keyframes animate {
0%{
transform: translateY(0) rotate(0deg);
opacity: 1;
}
100%{
transform: translateY(1400px) rotate(720deg);
}
}

#red_z {
position: absolute;
width: 50%;
left: -5%;
top: -5%;
z-index: 1;
}
.in-index .overall-wrapper {
width:100%;
position: absolute;
top: 0;
}
#header {
z-index: 1;
position: relative;
}
.in-index #header, .in-index .navigation-in, .in-index .content-wrapper {
background-color: transparent;
}
.navigation-buttons, .navigation-buttons a[data-target="search"], .navigation-buttons a[data-target="login"], .navigation-buttons a[data-target="navigation"], .navigation-buttons a[data-target="cart"] {
background-color: transparent;
border: none;
}
.navigation-buttons a[data-target="search"]:hover, .navigation-buttons a[data-target="login"]:hover, .navigation-buttons a[data-target="navigation"]:hover, .navigation-buttons a[data-target="cart"]:hover {
background-color: #e71d2c;
}
.in-index .banners-row {
height: calc(100vh - 80px);
}
.wide-carousel {
height: calc(100vh - 80px);
position: relative;
}
#carousel {
position: absolute;
bottom: 0;
}

/* Top menu */
@media (min-width: 992px) {
.fitted .navigation-in ul {
justify-content: center;
}
}

/* */
/* */
/* */
</style>