/* ----------- variables ----------- */
/* ----------- flamingos ----------- */
body {
  background: linear-gradient(to bottom, #4068ed, #c2cff0 27%, #5b5b46 42%, #6e7c56 49%, #eae9d3 59%, #49b3dd 90%, #49b3dd 100%);
  overflow: hidden;
  background-attachment: fixed;
}

#holder {
  position: absolute;
  overflow: hidden;
  display: flex;
  transform: scale(1.25);
  bottom: 6.5rem;
  z-index: 0;
}

/* ----------- flying birds ----------- */
#flock {
  margin-top: -200px;
}

/* Media Queries */
@media only screen and (min-device-width: 200px) and (max-device-width: 400px) {
  #holder {
    transform: scale(2.5) translate(-10px, 5px);
  }

  #container1 {
    transform: translateX(30vw);
  }

  #container2 {
    transform: translateX(10vw);
  }

  #container3 {
    transform: translateX(-2vw);
  }

  #container4 {
    transform: translateX(-12vw);
  }

  #container5 {
    transform: translateX(-20vw);
    display: none;
  }

  #container6 {
    transform: translateX(-28vw);
  }
}
@media only screen and (min-device-width: 401px) and (max-device-width: 600px) and (orientation: portrait) {
  #holder {
    transform: scale(2.5) translate(-10px, 5px);
  }

  #container1 {
    transform: translateX(30vw);
  }

  #container2 {
    transform: translateX(22vw);
  }

  #container3 {
    transform: translateX(-6vw);
  }

  #container4 {
    transform: translateX(-12vw);
  }

  #container5 {
    transform: translateX(-22vw);
  }

  #container6 {
    transform: translateX(-32vw);
  }
}
@media only screen and (min-device-width: 601px) and (max-device-width: 999px) and (orientation: portrait) {
  #holder {
    transform: scale(1.75) translate(45px, -20px);
  }

  #container1 {
    transform: translateX(45vw);
  }

  #container2 {
    transform: translateX(5vw);
  }

  #container3 {
    transform: translateX(5vw);
  }

  #container4 {
    transform: translateX(-13vw);
  }

  #container5 {
    transform: translateX(-18vw);
  }

  #container6 {
    transform: translateX(-32vw);
  }
}
@media only screen and (min-device-width: 601px) and (max-device-width: 999px) and (orientation: landscape) {
  #holder {
    transform: scale(1.5) translate(100px, 60px);
  }

  #container1 {
    transform: translateX(45vw);
  }

  #container2 {
    transform: translateX(-2vw);
  }

  #container3 {
    transform: translateX(5vw);
  }

  #container4 {
    transform: translateX(-13vw);
  }

  #container5 {
    transform: translateX(-18vw);
  }

  #container6 {
    transform: translateX(-32vw);
  }
}
@media only screen and (min-device-width: 1000px) and (orientation: landscape) {
  #holder {
    transform: scale(1.5) translate(100px, 50px);
  }

  #container1 {
    transform: translateX(45vw);
  }

  #container2 {
    transform: translateX(-2vw);
  }

  #container3 {
    transform: translateX(5vw);
  }

  #container4 {
    transform: translateX(-13vw);
  }

  #container5 {
    transform: translateX(-18vw);
  }

  #container6 {
    transform: translateX(-32vw);
  }
}