body {
  position: relative;
  margin: 0 auto;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

img {
  --duration: 40s;
  --name: float-up-1;
  position: absolute;
  top: 0;
  left: 0;
  width: 20vw;

  animation: var(--name) var(--duration) linear infinite;
  box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.5);
  z-index: 1;
}

@keyframes moveUp { 
    0% { 
        transform: translateY(100vh); 
    }     
    100% { 
        transform: translateY(-50vh); 
    } 
}

.image:hover {
  -webkit-animation-play-state:paused;
  -moz-animation-play-state:paused;
  animation-play-state:paused;
  z-index: 999;
  position: relative;
}

.chuiko img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 0vw;
  }

.chuiko {
	  width: 20vw;
  animation: moveUp 40s linear infinite;
  animation-delay: 0s;
}

.kravchenko img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 80vw;
  }

.kravchenko {
	  width: 20vw;
  animation: moveUp 40s linear infinite;
  animation-delay: -3s;
}

.lavrinenkov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 5vw;
  }

.lavrinenkov {
	  width: 20vw;
  animation: moveUp 20s linear infinite;
  animation-delay: -6s;
}

.gagarin img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 30vw;
  }

.gagarin {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -12s;
}

.vorozheikin img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 60vw;
  }

.vorozheikin {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -15s;
}

.kozhedub img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 20vw;
  }

.kozhedub {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -18s;
}

.popkov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 65vw;
  }

.popkov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -21s;
}

.klubov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 30vw;
  }

.klubov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -24s;
}

.amet-khan img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 60vw;
  }

.amet-khan {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -27s;
}

.leonov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 40vw;
  }

.leonov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -30s;
}

.smushkevich img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 70vw;
  }

.smushkevich {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -33s;
}

.deinekin img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 30vw;
  }

.deinekin {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -36s;
}

.chelnokov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 10vw;
  }

.chelnokov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -39s;
}

.begeldinov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 75vw;
  }

.begeldinov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -42s;
}

.chkalov img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 5vw;
  }

.chkalov {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -45s;
}

.evstigneev img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 0vw;
  }

.evstigneev {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -48s;
}

.gritsevets img {
  width: 20vw;
  height: auto;
  border: none;
  box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
  margin-left: 45vw;
  z-index: 1000;
  }

.gritsevets {
	  width: 20vw;
  animation: moveUp 30s linear infinite;
  animation-delay: -9s;
  z-index: 1000;
}

#arrow {
  fill: #000;
  width: 68px;
  height: 22px;
  float: right;
}

.arrow__container {
  position: fixed;
  bottom: 8rem;
  right: 4rem;
  z-index: 1;
}