/* CSS Document */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: beige;
}

/* Add an absolute position to h1: top 50px, and left 500px. To make the p text follow the h1, change the p text to inline sub tag in the html. Brighten the color of the text and add a text-shadow to make the text more readable.).*/

h1, p {
  position:absolute;
  top:50px;
  left:500px;
  text-align: center;
  margin:20px 20px 0 0;
  font-family: Helvetica, Arial, "sans-serif";
  color: #fafafa;
  text-shadow: 2px 2px 4px #000000;
  z-index: 3;
}

p {
  font-family: Helvetica, Arial, "sans-serif";
}
/* To make our animaiton a bit more resposnsive, we need to add a relative postion to the containers. This will keep the falling leaves inside the containers. The leave postion is absolute to the parent element (the containers).*/

#container {
  position:relative;
  background-image: linear-gradient(rgb(8, 146, 209), yellow);
  background-repeat: no-repeat;
  width:100%;
  max-width: 1000px;
  height:600px;
  margin:0 auto;
}

#container2 {
  position:relative;
  background-image: url('images/tree-1658814_1280.png');
  background-repeat: no-repeat;
  background-size: 700px;
  background-position-x: -100px;
  background-position-y: -50px;
  width:100%;
  max-width: 1000px;
  height:600px;
  margin:0 auto;
  border:2px solid black;
}



img[alt|=leaf1] {
  position:absolute ;
  top:-50px;
  left:500px;
  z-index:3;
  //animation-name: falling1;
  //animation-duration: 9s;
  //animation-timing-function: linear;
  //animation-fill-mode: forwards;
  animation: falling1 9s linear forwards;
  
}
img[alt|=leaf2] {
  position:absolute;
  top:-50px;
  left:450px;
  z-index:3;
  animation-name: falling2 ;
  animation-duration: 7s;
  animation-delay: 1s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;
  
}

img[alt|=leaf3] {
  position:absolute;
  top:-50px;
  left:400px;
  z-index:3;
  animation-name: falling3;
  animation-duration: 5s;
  animation-delay: 2s;
  animation-timing-function:ease-in-out;
  animation-fill-mode: forwards;

}

@keyframes falling1 {
  from {transform: translateY(0) rotate(0);}
  to { transform: translateY(590px) rotateY(350deg)}
}

@keyframes falling2 {
  0% { transform: rotate(15deg) rotateY(0) translate(0);}
  25% { transform: rotate(15deg) rotateY(350deg) translateY(300px);}
  50% { transform: rotate(5deg) rotateY(750deg) translateY(400px);}
  75% { transform: rotate(15deg) rotateY(360deg) translateY(500px);}
  100% { transform: rotate(5deg) rotateY(360deg) translateY(590px);}

}

@keyframes falling3 {
  0% { transform: rotate(5deg) rotateY(0) translate(0);}
  25% { transform: rotate(15deg) rotateY(350deg) translateY(300px);}
  50% { transform: rotate(5deg) rotateY(750deg) translateY(400px);}
  75% { transform: rotate(15deg) rotateY(360deg) translateY(500px);}
  100% { transform: rotate(5deg) rotateY(360deg) translateY(590px);}

}

/* To make this animation fit into mobile view we need to add a media query.
In container2 - you will need to change the background (tree) size and position. Remove the boarder (will need to add a - margin at top). Finally change the horizontal positon of the leaves. For faster streaming on a mobile device, the animation is often simplified (such as reducing down to only one leaf falling).*/

@media screen and (max-width: 580px) {

  
  #container2 {
    background-image: url('images/tree-1658814_1280.png');
    background-repeat: no-repeat;
    background-size: 600px;
    background-position-x: -250px;
    background-position-y: -50px;
    margin-top:-25px;
    border:none;

  }
  h1, p {
    left:50px;

  }

img[alt|=leaf1] {
  position:absolute;
  top:-50px;
  left:250px;
}

img[alt|=leaf2] {
  position:absolute;
  top:-50px;
  left:150px;
}

img[alt|=leaf2] {
  position:absolute;
  top:-50px;
  left:100px;
}