/*-------------------------------------------Background Image---------------------------------------------*/
#bg {
    width: 100%;
    height: auto;
}


/*-------------------------------------------Redirect Button---------------------------------------------*/
.redirect-btn {
    top: 31%;
}

.redirect-btn img {
    width:60%;
    animation: pulse 0.9s  infinite linear;
}

.element1{
    top: 82%;
}

.element1 img {
    width: 90%;
}

.element2 {
    top: 52%;
    right: 40%;
}

.element2 img {
    width: 15%;
    animation: floatGentle 0.9s  infinite linear;
}

.element3 {
    top: 40%;
    left: 40%;
}

.element3 img {
    width: 25%;
    animation: floatCircle 0.9s  infinite linear;
}

.element4 {
    top: 90%;
    left: 45%;
    z-index: 1;
}

.element4 img {
    width: 30%;
    animation: floatCircleSway 0.9s infinite linear;
}


/*-------------------------------------------Keyframe Animation---------------------------------------------*/
@keyframes pulse {
    0% {
        transform: scale(0.9);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(0.9);
    }
}

@keyframes floatGentle {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  25% {
    transform: translate(3px, -2px) rotate(0.5deg);
  }
  50% {
    transform: translate(-4px, 3px) rotate(-0.5deg);
  }
  75% {
    transform: translate(2px, -3px) rotate(0.3deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

@keyframes floatCircle {
  0% {
    transform: translate(0px, 0px);
  }
  25% {
    transform: translate(15px, -15px);
  }
  50% {
    transform: translate(30px, 0px);
  }
  75% {
    transform: translate(15px, 15px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}

@keyframes floatCircleSway {
  0% {
    transform: translate(0px, 0px);
  }
  20% {
    transform: translate(10px, -10px);
  }
  40% {
    transform: translate(20px, 0px);
  }
  60% {
    transform: translate(10px, 10px);
  }
  80% {
    transform: translate(-10px, 5px);
  }
  100% {
    transform: translate(0px, 0px);
  }
}





/*-------------------------------------------Multi Device Screen Size---------------------------------------------*/
/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    #bg {
        height: 100vh;
    }
}