* {
box-sizing: border-box;
}

body {
font-family: "Arial", sans-serif;
}
.scene {
width: 100%;
height: 100%;
min-height: 500px;
position: relative;
top: 0;
left: 0;
background-color: #B0E0E6;
transform: translate3d(0, 0, 0);
}

.animation-sloi-1 {
animation: animation_fg linear 30s infinite both;
background: url(https://w7.pngwing.com/pngs/93/580/png-transparent-body-of-water-sea-texture-blue-computer-thumbnail.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 512px;
}

.animation-sloi-2 {
animation: animation_fg linear 55s infinite both;
background: url(https://w7.pngwing.com/pngs/69/773/png-transparent-landscape-graphy-of-desert-sand-pattern-desert-desert-border-texture-border-texture-orange.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 345px;
}

.animation-sloi-3 {
animation: animation_fg linear 75s infinite both;
background: url(https://img.favpng.com/23/16/4/scorpion-png-favpng-fZf3bhhmJJYq7ZZV9reC9rDTP.jpg) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 295px;
}

.animation-sloi-5 {
animation: animation_fg linear 120s infinite both;
background: url(https://raw.githubusercontent.com/n1mple02/panasyuk/main/24-bScTlQ59V-transformed.png) 0 100% repeat-x;
z-index: 1;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-size: auto 94px;
}

.animation-sloi-6 {
background: url(https://raw.githubusercontent.com/n1mple02/panasyuk/main/изображение_2023-05-28_141758983.png) 0 100% no-repeat;
z-index: 1;
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 188px;
animation: animation_star linear 10s infinite both;
}

.animation-sloi-7 {
background: url(https://raw.githubusercontent.com/n1mple02/panasyuk/main/1644632404_4-adonius-club-p-ptitsi-animatsiya-na-prozrachnom-fone-24-transformed.png) 0 100% no-repeat;
z-index: 1;
position: absolute;
bottom: 100px;
left: 0;
width: 100%;
height: 100%;
background-size: auto 75px;
animation: animation_octopus linear 15s infinite both;
}
@keyframes animation_fg {
0% {
background-position: 2765px 100%;
}
100% {
background-position: 550px 100%;
}
}
@keyframes animation_star {
0% {
background-position: -300px 100%;
}
100% {
background-position: 2000px 100%;
}
}
@keyframes animation_octopus {
0% {
background-position: -300px 100%;
}
100% {
background-position: 2000px 100%;
}
}
