body{
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ozadje {
  position: fixed;
  padding: 0;
  margin: 0;
  width: 100vw;
  height: 88vh
}

section{
  height: 100vh;
}

#particles{
  width: 100%;
  height: 100%;
}

img{
  width: 12vw;
  height: auto;
}

.fish{
  position: absolute;
}

.fish01{
  top: 10%;
  animation: animateD 10s linear infinite;
  -webkit-animation: animateD 10s linear infinite;
}

.fish02{
  top: 20%;
  animation: animateL 12s linear infinite;
  -webkit-animation: animateL 12s linear infinite;
}

.fish03{
  top: 30%;
  animation: animateD 14s linear infinite;
  -webkit-animation: animateD 14s linear infinite;
}

.fish04{
  top: 40%;
  animation: animateL 16s linear infinite;
  -webkit-animation: animateL 16s linear infinite;
}

.fish05{
  top: 50%;
  animation: animateD 18s linear infinite;
  -webkit-animation: animateD 18s linear infinite;
}

.fish06{
  top: 60%;
  animation: animateL 20s linear infinite;
  -webkit-animation: animateL 20s linear infinite;
}

.fish07{
  top: 70%;
  animation: animateD 22s linear infinite;
  -webkit-animation: animateD 22s linear infinite;
}

.fish08{
  top: 35%;
  animation: animateL 24s linear infinite;
  -webkit-animation: animateL 24s linear infinite;
}

.fish09{
  top: 45%;
  animation: animateD 26s linear infinite;
  -webkit-animation: animateD 26s linear infinite;
}

.fish10{
  top: 65%;
  animation: animateL 28s linear infinite;
  -webkit-animation: animateL 28s linear infinite;
}

.potapljac{
  top: 50%;
  width: 40vw;
  height: auto;
  animation: animateD 10s linear infinite;
  -webkit-animation: animateD 10s linear infinite;
}

@keyframes animateL{
  0%{
    transform: translateY(-5vh);
    left: 150%;
    -webkit-transform: translateY(-5vh);
    -moz-transform: translateY(-5vh);
    -ms-transform: translateY(-5vh);
    -o-transform: translateY(-5vh);
}
  25%{
    transform: translateY( 0vh);
    -webkit-transform: translateY( 0vh);
    -moz-transform: translateY( 0vh);
    -ms-transform: translateY( 0vh);
    -o-transform: translateY( 0vh);
}
  50%{
    transform: translateY(5vh);
    -webkit-transform: translateY(5vh);
    -moz-transform: translateY(5vh);
    -ms-transform: translateY(5vh);
    -o-transform: translateY(5vh);
}
  75%{
    transform: translateY( 0vh);
    -webkit-transform: translateY( 0vh);
    -moz-transform: translateY( 0vh);
    -ms-transform: translateY( 0vh);
    -o-transform: translateY( 0vh);
}
  100%{
    transform: translateY(-5vh);
    left: -25%;
    -webkit-transform: translateY(-5vh);
    -moz-transform: translateY(-5vh);
    -ms-transform: translateY(-5vh);
    -o-transform: translateY(-5vh);
}

}

@keyframes animateD{
  100%{
    transform: translateY(-5vh);
    left: 150%;
    -webkit-transform: translateY(-5vh);
    -moz-transform: translateY(-5vh);
    -ms-transform: translateY(-5vh);
    -o-transform: translateY(-5vh);
}
  75%{
    transform: translateY( 0vh);
    -webkit-transform: translateY( 0vh);
    -moz-transform: translateY( 0vh);
    -ms-transform: translateY( 0vh);
    -o-transform: translateY( 0vh);
}
  50%{
    transform: translateY(5vh);
    -webkit-transform: translateY(5vh);
    -moz-transform: translateY(5vh);
    -ms-transform: translateY(5vh);
    -o-transform: translateY(5vh);
}
  25%{
    transform: translateY( 0vh);
    -webkit-transform: translateY( 0vh);
    -moz-transform: translateY( 0vh);
    -ms-transform: translateY( 0vh);
    -o-transform: translateY( 0vh);
}
  0%{
    transform: translateY(-5vh);
    left: -25%;
    -webkit-transform: translateY(-5vh);
    -moz-transform: translateY(-5vh);
    -ms-transform: translateY(-5vh);
    -o-transform: translateY(-5vh);
}

}