body{background-color:#87CEEB;
    position: absolute;
    perspective: 800px;
    transition: 2s;
    }
    
    
    .baslik{ 
    outline-style: double ;
    outline-width: 33px;
    color: rgb(184, 8, 8);
    top: 120px;
    text-align: center;
    border-radius: 5px;
    border-style:dashed ;
    border-color: black;
    background-color: rgb(169, 181, 207);
    position: relative;
    text-decoration:solid;
    font-style: oblique;
    width: 700px;
    margin: 50px;
    left: 29%;
    z-index: 20;
    
    }
    
    .bulut{
    
    position: relative;
    height: 400px;
    
    
    
    }
    
    
    
    .can{
      width: auto;
      animation: hay 7s infinite;
      position: relative;
    
    }
    
    
    
    @keyframes hay {
    
      0% {
        left: 00px;
      }
      25%{top: 0px;}
      
      75%{
        right: 600px;
      }
      100% {
        left: 100px;
      }
    }
    
    
    
    
    
    
    
    
    
    
    
    
    
    .top {
        position: relative;
        width: 340px;
        height: 120px;
        background-color: white;
        border-radius: 100px;
        top: 150px;
        left: 1200px;
        animation: bul 5s infinite;
      }
      
      .top::before {
        content: "";
        width: 100px;
        height: 100px;
        background-color: white;
        position: absolute;
        top: -40px;
        left: 50px;
        border-radius: 50%;
        padding: 30px;
        box-shadow: 75px -30px 0px 20px white;
      }
      
      .mid {
        position: relative;
        width: 250px;
        height: 100px;
        background-color: white;
        border-radius: 50px;
        top: -200px;
        left: 700px;
      }
      
      .mid::before {
        content: "";
        width: 80px;
        height: 80px;
        background-color: white;
        position: absolute;
        top: -20px;
        left: 30px;
        border-radius: 50%;
        padding: 20px;
        box-shadow: 60px -20px 0px 15px #fff;
      }
      
      .small {
        position: relative;
        width: 150px;
        height: 60px;
        background-color: white;
        border-radius: 30px;
        top: -200px;
        left: 200px;
      }
      
      .small::before {
        content: "";
        width: 50px;
        height: 50px;
        background-color: white;
        position: absolute;
        top: -10px;
        left: 20px;
        border-radius: 50%;
        padding: 10px;
        box-shadow: 35px -10px 0px 10px #fff;
      }
      
      .big {
        position: relative;
        width: 400px;
        height: 150px;
        background-color: white;
        border-radius: 150px;
        top: 100px;
        left: 700px;
      }
      
      .big::before {
        content: "";
        width: 120px;
        height: 120px;
        background-color: white;
        position: absolute;
        top: -50px;
        left: 60px;
        border-radius: 50%;
        padding: 40px;
        box-shadow: 90px -40px 0px 25px #fff;
      }
      
      .oval {
        position: relative;
        width: 280px;
        height: 80px;
        background-color: white;
        border-radius: 100px;
        top: 100px;
        left: 100px;
      }
      
      .oval::before {
        content: "";
        width: 90px;
        height: 90px;
        background-color: white;
        position: absolute;
        top: -30px;
        left: 40px;
        border-radius: 50%;
        padding: 25px;
        box-shadow: 70px -25px 0px 15px #fff;
      }
      
    
    #ada{
        position: relative;
      width: 400px;
      height: 500px;
      background-color: green;
      top: 100px;
      left: 500px;
      transform: scaleY(0.2);
     top: -300px;
      z-index: 2;
      border-width: px;
      border-bottom-left-radius: 95px;
      
      border-radius: 70spx;
      box-shadow: 0px 120px 15px 2px rgb(23, 139, 23);
      border-top-left-radius: 63px;
      border-top-right-radius: 55px;
    
    }
    
    
    
    .mountain1{
    
    
      
    
        position: relative;
        width: 0;
        height: 0;
        border-left: 40px solid transparent;
        border-right: 40px solid transparent;
        border-bottom: 70px solid #556B2F; 
        top: -730px;
        left: 600px;
      
        z-index: 2;
        transform: translateZ(70px);
       
      
    
    }
    
    
    
    
    
    .mountain {
    
      position: relative;
      width: 0;
      height: 0;
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid #556B2F; 
      top: -666px;
      left: 658px;
    
      z-index: 2;
      transform: translateZ(60px);
     
    }
    
    
    
    
    
    
    .mountain::before{
    content: "";
      border-left: 25px solid transparent;
      border-right: 25px solid transparent;
      border-bottom: 50px solid #333f1e; 
      
      top: 35px;
      left: 0px;
      width: 100px;
      height: 100px;
    
      z-index: 1;
      transform: translateZ(420px);
      margin: 22px;
      padding: 0px;
      position: relative;
    }
    
    .mountain::after{
    content: "";
      border-left: 50px solid transparent;
      border-right: 50px solid transparent;
      border-bottom: 100px solid #556B2F; 
      top: -10px;
      left: -80px;
      width: 100px;
      height: 200px;
     
      z-index: 1;
      transform: translateZ(50px);
      margin: 22px;
      padding: 0px;
      position: relative;
    
    
    }
    
    
    
    .snow{
    
    
    
      width: 0px;
      height: 0px;
      border-left: 13px solid transparent;
      border-right: 12px solid transparent;
      border-bottom: 25px solid #ffffff;
      
      background-color: transparent;
    top: -972px;
    position: relative;
    left: 813px;
    z-index: 2;
    
    
    }
     
    
    
    .man{
    
      position: relative;
      width: 100px;
      margin: 50px auto;
      top: -1400px;
      z-index: 1;
      animation: ay 6s infinite;
    
    }
    
    
    
    
    
    @keyframes ay{
    
     0%{left: 90px;}
     25%{left: 200px;}
     50%{left: 200px;}
     100%{left: 0px;}
    
    
    
    
    
    }
    
    .bod  
    {
    
    
    position: relative;
    width: 90px;
    height: 90px;
    background-color: rgb(176, 30, 30);
    border-radius: 50%;
    border: 2px #000;
    z-index: 2;
    
    }
    
    
    
    
    
    .mis{
    
    
      position: relative;
      width: 65px;
      height: 65px;
      background-color: rgb(176, 30, 30);
      border-radius: 50%;
      border: 2px #000;
      z-index:1 ;
       left:10px;
       top: -146px;
    
    }
    
    .he{
    
      position: relative;
      width: 55px;
      height: 55px;
      background-color: rgb(176, 30, 30);
      border-radius: 50%;
      border: 2px #000;
      z-index:1 ;
       left:13px;
       top: -250px;
    
    }
    
    .eye1{
    
      position: relative;
      width: 7px;
      height: 7px;
      background-color: black;
      border-radius: 50%;
      top: 8px;
      left: 12px;
      z-index: 2;
    
    }
    
    
    
    
    
    .eye2{
    
      position: relative;
      width: 8px;
      height: 8px;
      background-color: black;
      border-radius: 50%;
      top: 4px;
      left: 34px;
      z-index: 2;
      animation: goz 6s infinite;
    
    }
    
    @keyframes goz {
    
      0%{top: 0px;}
      25%{bottom: 10px;}
      50%{top: 25px;}
      100%{top: 100px;}
      
    }
    
    
    
    
    .nose{
    
      position: absolute;
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 7px solid orange;
      top: 19px;
      left: 20px;
    
    
    
    }
    
    
    
    
    .sm{
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -275px;
      left: 22px;
      z-index: 2;
    }
    
    .sm2{
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -275px;
      left: 26px;
      z-index: 2;
    
    
    }
    
    .sm3{
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -280px;
      left: 30px;
      z-index: 2;
    
    }
    
    
    .sm4{
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -285px;
      left: 35px;
      z-index: 2;
    
    
    }
    
    .sm5{
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -290px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    .sm6{
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -295px;
      left: 45px;
      z-index: 2;
    }
    
    .sm7{
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -305px;
      left: 49px;
      z-index: 2;
    
    
    }
    
    
    .sm8{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -290px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    .sm9{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -280px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    
    .sm10{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -270px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    
    .sm10{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -270px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    
    
    .sm10{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -270px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    
    
    .sm10{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -270px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    .sm11{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -260px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    .sm10{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -270px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    .sm12{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -250px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    .sm13{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -240px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    .sm14{
    
    
    
      position: relative;
      width: 5px;
      height: 5px;
      background-color: black;
      border-radius: 5%;
      top: -230px;
      left: 40px;
      z-index: 2;
    
    
    }
    
    
    
    .arm{
    
    
      
    
    
        border-radius: 100%;
        border-style: none;
        background-color: black;
        width: 2px;
        height: 120px;
        padding: 1px;
        top: -385px;
        left: -30px;
        z-index: 0;
        position: relative;
        box-shadow: 0px 0px 0px 0px #D19C29;
        border-left:  2px solid transparent;
        transform: rotateZ(-70deg);
        animation: ar 6s infinite;
        
    }
    
    
    
    
    
    
    
    
    .arm2{
    
    
    
      border-radius: 100%;
      border-style: none;
      background-color: black;
      width: 2px;
      height: 120px;
      padding: 1px;
      top: -500px;
      left: 115px;
      z-index: 0;
      position: relative;
      box-shadow: 0px 0px 0px 0px #D19C29;
      border-left:  2px solid transparent;
      transform: rotateZ(-100deg);
      
      
    
      
    }
    
    
    
    
    .water{
    position: relative;
    border-radius: 5px;
    background-color: #3399ff;
    border-left: 20px solid transparent;
    border-right: 30px solid transparent;
    width: 170px;
    height: 20px;
    top: -730px;
    left: 497px;
    z-index: 2;
    border-bottom-left-radius: 3px;
    border-bottom-left-radius: 3px;
    
    
    }
    
    .water::after{
    content: "";
      position: relative;
    border-radius: 5px;
    background-color: #3399ff;
    border-left: 20px solid transparent;
    border-right: 30px solid transparent;
    width: 100px;
    height: 20px;
    top: -16px;
    left: 170px;
    z-index: 2;
    box-shadow: 44px 0px 0px 0px  #3399ff;
    
    }
    .water1{
    
    
      position: relative;
      border-radius: 20px;
      background-color: #3399ff;
      border-left: 7px solid transparent;
      border-right: 30px solid transparent;
      width: 20px;
      height: 20px;
      top: -720px;
      left: 540px;
      z-index: 2;
    
    
    
      transform: rotateZ(90deg);
    
    
    }
    
    
    .water1::after{
    
    content: "";
    
      position: relative;
      border-radius: 20px;
      background-color: #3399ff;
      border-left: 7px solid transparent;
      border-right: 30px solid transparent;
      width: 20px;
      height: 20px;
      top: -660px;
      left: 37px;
      z-index: 2;
      top: 1px;
      
    }
    .Tree{
    
    border-radius: 2px;
    border-style:none;
    background-color: #1f2f3e;
    position: relative;
    width: 7px;
    height: 25px;
    top: -795px;
    left: 550px;
    z-index: 2;
    }
      
    
    .leaf{
    
    
    border-radius: 100%;
    border-style: none;
    background-color: #D19C29;
    width: 15px;
    height: 15px;
    padding: 0px;
    top: -7px;
    left: -4px;
    z-index: 2;
    position: relative;
    
    
    
    }
    
    
    
    
    
    
    .leaf2{
    
    
    border-radius: 100%;
    border-style: none;
    background-color: #D19C29;
    width: 2px;
    height: 30px;
    padding: 1px;
    top: -26px;
    left: -12px;
    z-index: 2;
    position: relative;
    box-shadow: 0px 0px 0px 0px #D19C29;
    border-left:  2px solid transparent;
    transform: rotateZ(-90deg);
    
    
    
    }
    
    
    
    
    
    
    .leaf3{
    
    
      border-radius: 100%;
      border-style: none;
      background-color: #D19C29;
      width: 2px;
      height: 30px;
      padding: 1px;
      top: -66px;
      left: -12px;
      z-index: 2;
      position: relative;
      box-shadow: 0px 0px 0px 0px #D19C29;
      border-left:  2px solid transparent;
      transform: rotateZ(-80deg);
      
      
      
      }
      
      
    
      .leaf4{
    
    
        border-radius: 100%;
        border-style: none;
        background-color: #D19C29;
        width: 2px;
        height: 30px;
        padding: 1px;
        top: -105px;
        left: -12px;
        z-index: 2;
        position: relative;
        box-shadow: 0px 0px 0px 0px #D19C29;
        border-left:  2px solid transparent;
        transform: rotateZ(-70deg);
        
    
        }
        
    
    
    
        .leaf5{
    
    
          border-radius: 100%;
          border-style: none;
          background-color: #D19C29;
          width: 2px;
          height: 30px;
          padding: 1px;
          top: -140px;
          left: -5px;
          z-index: 2;
          position: relative;
          box-shadow: 0px 0px 0px 0px #D19C29;
          border-left:  2px solid transparent;
          transform: rotateZ(-50deg);
          
      
          }
          
      
      
          .leaf6{
    
    
            border-radius: 100%;
            border-style: none;
            background-color: #D19C29;
            width: 2px;
            height: 30px;
            padding: 1px;
            top: -173px;
            left: 0px;
            z-index: 2;
            position: relative;
            box-shadow: 0px 0px 0px 0px #D19C29;
            border-left:  2px solid transparent;
            transform: rotateZ(-30deg);
            
        
            }
    
    
    
    
    
    
            .Tree2{
    
              border-radius: 2px;
              border-style:none;
              background-color: #1f2f3e;
              position: relative;
              width: 7px;
              height: 25px;
              top: -795px;
              left: 590px;
              z-index: 2;
              }
                
              
              .leafa{
              
              
              border-radius: 100%;
              border-style: none;
              background-color: #D19C29;
              width: 15px;
              height: 15px;
              padding: 0px;
              top: -7px;
              left: -4px;
              z-index: 2;
              position: relative;
              
              
              
              }
              
              
              
              
              
              
              .leaf2b{
              
              
              border-radius: 100%;
              border-style: none;
              background-color: #D19C29;
              width: 2px;
              height: 30px;
              padding: 1px;
              top: -26px;
              left: -12px;
              z-index: 2;
              position: relative;
              box-shadow: 0px 0px 0px 0px #D19C29;
              border-left:  2px solid transparent;
              transform: rotateZ(-90deg);
              
              
              
              }
              
              
              
              
              
              
              .leaf3c{
              
              
                border-radius: 100%;
                border-style: none;
                background-color: #D19C29;
                width: 2px;
                height: 30px;
                padding: 1px;
                top: -66px;
                left: -12px;
                z-index: 2;
                position: relative;
                box-shadow: 0px 0px 0px 0px #D19C29;
                border-left:  2px solid transparent;
                transform: rotateZ(-80deg);
                
                
                
                }
                
                
              
                .leaf4d{
              
              
                  border-radius: 100%;
                  border-style: none;
                  background-color: #D19C29;
                  width: 2px;
                  height: 30px;
                  padding: 1px;
                  top: -105px;
                  left: -12px;
                  z-index: 2;
                  position: relative;
                  box-shadow: 0px 0px 0px 0px #D19C29;
                  border-left:  2px solid transparent;
                  transform: rotateZ(-70deg);
                  
              
                  }
                  
              
              
              
                  .leaf5e{
              
              
                    border-radius: 100%;
                    border-style: none;
                    background-color: #D19C29;
                    width: 2px;
                    height: 30px;
                    padding: 1px;
                    top: -140px;
                    left: -5px;
                    z-index: 2;
                    position: relative;
                    box-shadow: 0px 0px 0px 0px #D19C29;
                    border-left:  2px solid transparent;
                    transform: rotateZ(-50deg);
                    
                
                    }
                    
                
                
                    .leaf6f{
              
              
                      border-radius: 100%;
                      border-style: none;
                      background-color: #D19C29;
                      width: 2px;
                      height: 30px;
                      padding: 1px;
                      top: -173px;
                      left: 0px;
                      z-index: 2;
                      position: relative;
                      box-shadow: 0px 0px 0px 0px #D19C29;
                      border-left:  2px solid transparent;
                      transform: rotateZ(-30deg);
                      
                  
                      }
              
    
    
    
            .Tree3{
    
              border-radius: 2px;
              border-style:none;
              background-color: #1f2f3e;
              position: relative;
              width: 7px;
              height: 25px;
              top: -795px;
              left: 660px;
              z-index: 2;
              }
                
              
              .leafg{
              
              
              border-radius: 100%;
              border-style: none;
              background-color: #D19C29;
              width: 15px;
              height: 15px;
              padding: 0px;
              top: -7px;
              left: -4px;
              z-index: 2;
              position: relative;
              
              
              
              }
              
              
              
              
              
              
              .leafb{
              
              
              border-radius: 100%;
              border-style: none;
              background-color: #D19C29;
              width: 2px;
              height: 30px;
              padding: 1px;
              top: -26px;
              left: -12px;
              z-index: 2;
              position: relative;
              box-shadow: 0px 0px 0px 0px #D19C29;
              border-left:  2px solid transparent;
              transform: rotateZ(-90deg);
              
              
              
              }
              
              
              
              
              
              
              .leafc{
              
              
                border-radius: 100%;
                border-style: none;
                background-color: #D19C29;
                width: 2px;
                height: 30px;
                padding: 1px;
                top: -66px;
                left: -12px;
                z-index: 2;
                position: relative;
                box-shadow: 0px 0px 0px 0px #D19C29;
                border-left:  2px solid transparent;
                transform: rotateZ(-80deg);
                
                
                
                }
                
                
              
                .leafd{
              
              
                  border-radius: 100%;
                  border-style: none;
                  background-color: #D19C29;
                  width: 2px;
                  height: 30px;
                  padding: 1px;
                  top: -105px;
                  left: -12px;
                  z-index: 2;
                  position: relative;
                  box-shadow: 0px 0px 0px 0px #D19C29;
                  border-left:  2px solid transparent;
                  transform: rotateZ(-70deg);
                  
              
                  }
                  
              
              
              
                  .leafe{
              
              
                    border-radius: 100%;
                    border-style: none;
                    background-color: #D19C29;
                    width: 2px;
                    height: 30px;
                    padding: 1px;
                    top: -140px;
                    left: -5px;
                    z-index: 2;
                    position: relative;
                    box-shadow: 0px 0px 0px 0px #D19C29;
                    border-left:  2px solid transparent;
                    transform: rotateZ(-50deg);
                    
                
                    }
                    
                
                
                    .leaff{
              
              
                      border-radius: 100%;
                      border-style: none;
                      background-color: #D19C29;
                      width: 2px;
                      height: 30px;
                      padding: 1px;
                      top: -173px;
                      left: 0px;
                      z-index: 2;
                      position: relative;
                      box-shadow: 0px 0px 0px 0px #D19C29;
                      border-left:  2px solid transparent;
                      transform: rotateZ(-30deg);
                      
                  
                      }
              
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
                @keyframes titel {
    
                    0% { color: #ff0000; }
                    20% { color: #ff9900; }
                    40% { color: #33cc33; }
                    60% { color: #3399ff; }
                    80% { color: #9900cc; }
                    100% { color: #ff0000; }
    
                                                    }
    
    
    
    
    .geceler{
    
        width: 55px;
        height: 55px;
        position: absolute;
       
    }
    .geceler:hover{cursor: pointer;}
    
    .sun{
    
    background-color: transparent;
     box-shadow: -70px 90px 20px 0px #deded1 ;
    border-radius: 70%;
    width: 70px;
    height: 70px;
    transition: 2s;
    position: relative;
    background-color: rgb(223, 236, 235);
    top:-2300px;
    left: 1600px;
    margin: auto;
    border-style:groove;
    border-color: rgb(173, 94, 29);
    border-width: 0px;
    border-top-left-radius: 63px;
    border-bottom-right-radius: 30px;
    
    
    }
    
    .moon{
        background-color:#e7f735;
        box-shadow: 0px 0px 400px 40px  #D19C29;
        box-shadow: -70px 90px 20px 0px #cac712 ;
        border-radius: 70% ;
        width: 100px;
        height: 100px;
        transition: 2s;
        position: relative;
        top: -2300px;
        left: 1500px;
        border-width: 33px;
       
    }
    .sun :hover{
        cursor: pointer;
    }
    
    
    
    
    
    
    
    
    
    
    
    .rain {
      position: absolute;
      top: 300px; 
      left: 50%; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall 0.5s linear infinite; 
    }
    
    @keyframes fall {
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }
    
    
    
    
    
    .rain1 {
      position: absolute;
      top: 900px; 
      left: 70%; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain1::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall1 0.5s linear infinite; 
    }
    
    @keyframes fall1 {
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }
    
    
    
    
    .rain2 {
      position: absolute;
      top: 900px; 
      left: 70%; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain2::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall2 0.5s linear infinite; 
    }
    
    @keyframes fall2 {
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }
    
    
    
    .rain3 {
      position: absolute;
      top: 200px; 
      left: 60%; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain3::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall3 0.5s linear infinite; 
    }
    
    @keyframes fall3 {
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }
    
    .rain4 {
      position: absolute;
      top: 200px; 
      left: 60%; 
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain4::before {
      content: "";
      position: absolute;
      top: 400px;
      right:  20px;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall4 0.5s linear infinite; 
    }
    
    @keyframes fall4 {
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }
    
    
    .rain5 {
      position: absolute;
      top: 500px;
      right:  100px;
      width: 100%; 
      height: 100%; 
      overflow: hidden; 
      z-index: 2;
    }
    
    .rain5::before {
      content: "";
      position: absolute;
      top: 0;
      left: 50%;
      width: 2px; 
      height: 20px;
      background-color: blue; 
      animation: fall5 0.5s linear infinite; 
    }
    
    @keyframes fall5{
      0% {
          transform: translateY(0); 
          opacity: 5;
          transform: translateX(33);
      }
      100% {
          transform: translateY(100vh); 
          opacity: 0; 
      }
    }