body {
  margin: 0;
  height: 100vh;
  background: black url("images/background.png");
}




.firefly1, .firefly2, .firefly3, .firefly4, .firefly5,
.firefly6, .firefly7, .firefly8, .firefly9, .firefly10 {
        position: absolute;
        width: 500px;
        height: 500px;
        background-size: contain;
        background-position: center;
        animation: floating 20s linear infinite, glow 3s ease-in-out infinite alternate;
}


.firefly1 { background-image: url("images/firefly1.png"); left: 1%; top: 50%; animation-delay: 0s; }
.firefly2 { background-image: url("images/firefly2.png"); left: 20%; top: 40%; animation-delay: 2s; }
.firefly3 { background-image: url("images/firefly3.png"); left: 30%; top: 60%; animation-delay: 4s; }
.firefly4 { background-image: url("images/firefly4.png"); left: 40%; top: 30%; animation-delay: 6s; }
.firefly5 { background-image: url("images/firefly5.png"); left: 50%; top: 70%; animation-delay: 1s; }
.firefly6 { background-image: url("images/firefly6.png"); left: 60%; top: 50%; animation-delay: 3s; }
.firefly7 { background-image: url("images/firefly7.png"); left: 70%; top: 40%; animation-delay: 5s; }
.firefly8 { background-image: url("images/firefly8.png"); left: 80%; top: 60%; animation-delay: 7s; }
.firefly9 { background-image: url("images/firefly9.png"); left: 90%; top: 30%; animation-delay: 4s; }
.firefly10 { background-image: url("images/firefly10.png"); left: 10%; top: 70%; animation-delay: 8s; }



@keyframes floating {
        0%   { transform: translate(0, 0); }
        25%  { transform: translate(100px, -150px); }
        50%  { transform: translate(-400px, -300px); }
        75%  { transform: translate(300px, -400px); }
        100% { transform: translate(0, -500px); }
}

@keyframes glow {
        0%   { opacity: 0; }
        50%  { opacity: 1; }
        100% { opacity: 0; }
}