SALING BOAT ANIMATION (CSS Script)

SAILING BOAT ANIMATION:-

CSS script:-

body{
            background-color: #0066ff;
            margin:0px;
        }
        .boat{
            border-top: 85px solid #ff6347;
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            height: 0;
            width:230px;
            position: absolute;
            top:65%;
            left:1%;
            animation-iteration-count: infinite;
            animation-name: sail;
            animation-duration:15s;
           
            transform:scale(0.5);
           
    }
        @keyframes sail{
            0%{
                left:0%;
            }
           
            100%{
                left:50%;
            }
           
        }
        .edge{
            width: 150px;
            height: 50px;
            transform: skew(-42deg);
            background: #ff6347;
            position: relative;
            bottom:130px;
            left:162px;
            z-index: 10;
        }
        .p1{
            width:150px;
            height:100px;
            background-color: #ffffff;
            position: relative;
            bottom:242px;
            left:90px;
        }
        .p2{
            width:120px;
            height:60px;
            background-color: #ffffff;
            position: relative;
            bottom:305px;
            right:20px;
        }
        .b1{
            width:250px;
            height: 12px;
            background-color:#4d4d4d;
            border-radius: 15px;
            position: relative;
            bottom:90px;
            right:80px;
            z-index: 8;
        }
        .b2{
            width:160px;
            height: 12px;
            background-color:#4d4d4d;
            border-radius: 15px;
            position: relative;
            bottom:0px;
            right:7px;
           
        }
        .windr1{
            width: 27px;
            height: 27px;
            border-radius: 50%;
            background-color:#00ffff ;
            border:5px solid #a6a6a6;
            position: relative;
            bottom:355px;
            right:10px;

        }
        .windr2{
            width: 27px;
            height: 27px;
            border-radius: 50%;
            background-color:#00ffff ;
            border:5px solid #a6a6a6;
            position: relative;
            bottom:392px;
            left:45px;
        }
        .winds1{
            width:45px;
            height:40px;
            background-color: #00ffff;
            border:3px solid #a6a6a6;
            position: relative;
            bottom:465px;
            left:100px;
        }
        .winds2{
            width:65px;
            height:40px;
            background-color: #00ffff;
            border-top:3px solid #a6a6a6;
            border-bottom: 3px solid #a6a6a6;
            border-left:3px solid #a6a6a6;
            position: relative;
            bottom:512px;
            left:172px;
        }
        .pole{
            height:150px;
            width:10px;
            border-radius:15px;
            background-color:#4d4d4d;
            position: relative;
            bottom:650px;
            left:275px;
        }
        .flag{
            position: relative;
            top:2px;
            left:13px;
            width: 0;
            height: 0;
            border-top: 28px solid transparent;
            border-left: 56px solid #ff6347;
            border-bottom: 28px solid transparent;
        }
        .b3{
            width:120px;
            height: 12px;
            background-color:#4d4d4d;
            border-radius: 15px;
            position: relative;
            top:30px;
            right:120px;
            z-index: 8;
        }
        .b4{
            width:160px;
            height: 12px;
            background-color:#4d4d4d;
            border-radius: 15px;
            position: relative;
            bottom:46px;
            left:105px;
            z-index: 8;
        }
        .chimney{
            height:90px;
            width:35px;
            background-color: #ff6347;
            position: relative;
            bottom:770px;
            left:40px;
        }
        .b5{
            width:39px;
            height: 12px;
            background-color:#4d4d4d;
           
            position: relative;
            bottom:6px;
            right: 2px;
            z-index: 8;
        }
        .sea{
            background-color: #b3ffff;
            width:150%;
            height:340px;
            position: absolute;
        }
        .c1{
            position: absolute;
            top:15%;
            left:70%;
             height:50px;
             width:200px;
             border-radius: 35px;
             background-color: #ffffff;
             transform:scale(0.7);
        }
        .c2{
            position: absolute;
            top:33%;
            left:10%;
             height:50px;
             width:200px;
             border-radius: 35px;
             background-color: #ffffff;
             transform:scale(0.7);
        }
        .cir1,.cir2,.cir3{
            height: 80px;
            width: 80px;
            border-radius: 50%;
            background-color: #ffffff;
            position: relative;
        }
        .cir1{
            bottom:40px;
            left:15px;
        }
        .cir2{
            bottom:150px;
            left:70px;
        }
        .cir3{
            bottom: 200px;
            left:110px;
        }
        .sm1,.sm2,.sm3{
            position: relative;
            height: 40px;
            width: 40px;
            border-radius: 50%;
            background-color:rgba(89, 89, 89,0.2);
            z-index: 5;
        }
        .sm1{
            bottom:60px;
            right:18px;
        }
        .sm2{
            bottom:140px;
            right:50px;
            background-color: rgba(204, 204, 204,0.5)
        }
        .sm3{
            bottom:170px;
            right:35px;
            background-color:rgba(140, 140, 140,0.2);
        }
        .sun{
            position:absolute;
            left: 70%;
            top:5.2%;
            height:70px;
            width: 70px;
            border-radius: 50%;
            background-color: #ff9933;
            box-shadow:0 0 15px #ffbf00  ;
            transform:scale(0.7);

           
        }