/* color of up:#bbcacc */
 * {
     padding: 0;
     margin: 0;
     box-sizing: border-box;
 }

 body {
     background-color: #bbcacc;
     height: 250vh;
 }

 .main {
     width: 100%;
     height: 100vh;
     background-color: #bbcacc;
     position: fixed;

     /* border: 2px solid green; */
     >h2 {
         font-family: "Dancing Script", cursive;
         font-size: 60px;
         color: white;
         position: absolute;
         /* background-color: cadetblue; */
         top: 20px;
         left: 50%;
         transform: translateX(-50%);
         animation: sunrise 1 linear;
         animation-timeline: scroll();

     }

     >img {
         position: absolute;
         width: 100%;
         /* animation: anime 0.2s linear; */
         height: 100vh;
         /* animation-timeline: scroll(); */
         bottom: 0;

     }

     #sunrise {
         background-color: #da402161;
         height: 100%;
         width: 100%;
         position: absolute;
         bottom: 0;
         opacity: 1;
         animation: sunrise 1 linear;
         animation-timeline: scroll();
     }

     #sun {
         animation: up 0.2s linear;
         animation-timeline: scroll();
         bottom: 100px;
     }

     #mountain {
         animation: down-slow 0.2 linear, scale-up 0.2 linear;
         animation-timeline: scroll();
     }

     #frontmountain {
         animation: down-slow 0.2 linear, scale-up 0.2 linear;
         animation-timeline: scroll();
     }

     #rightrees {
         animation: down-fast 0.2 linear, move-right 0.2 linear;
         animation-timeline: scroll();
     }

     #undertrees {
         animation: down-fast 0.2 linear;
         animation-timeline: scroll();
     }

     #lefttrees {
         animation: complete-down 0.2 linear, scale-super 0.2 linear;
         animation-timeline: scroll();
     }
 }

 @keyframes up {
     to {
         bottom: 200px;
     }
 }

 @keyframes down-slow {
     to {
         bottom: -100px;
     }
 }

 @keyframes down-fast {
     to {
         bottom: -800px;
     }
 }

 @keyframes complete-down {
     to {
         bottom: -1600px;
     }
 }

 @keyframes move-right {
     to {
         transform: translateX(800px);
     }

 }

 @keyframes scale-super {
     to {
         scale: 2;
     }
 }

 @keyframes sunrise {
     to {
         opacity: 0;
     }
 }

 @keyframes scale-up {
     to {
         scale: 1.5;
     }
 }