.cloudy {
  background-image: url("clouds2.jpg");
}

.ally {
  background-image: url("idontthinksotim.png"), url("clouds2.jpg") !important;
  background-repeat: repeat;
}

.content {
  max-width: 640px;
  margin: auto;

  font-family: fantasy;
}


.excuse-me {

  color: darkorchid;
}

button {
  width: 200px;
  height: 100px;
  font-size: 28px;

  font-family: monospace;
}




@keyframes drop-from-top {
  from {
    top: -275px;
  }
  to {
    top: 40vh;
  }

}


@keyframes grow {
  from {
    width: 100%;
    height: 100%;
    left: 30vw;
  }
  to {
    width: 300%;
    height: 300%;
    left: 0vw;
  }
}

.moving-al {
  animation-name: drop-from-top;
  animation-duration: 5s;
}

.growing-al {
  animation-name: grow;
  animation-duration: 4s;
}

#al {
  position: fixed;
  left: 30vw
}

.al-initial-position {
  top: -275px;
}

.al-final-position {
  top: 40vh;
}