/*
Arrow keys to move
Space to shoot
:D

Play in full page view and F11 for no lag and more fps.
*/



















*{
            overflow: hidden;
        }
        body{
            background-color: lightskyblue;
        }


/*---------------------------------------------game_area--------------------------------------*/

        #cloud{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
        }
        #cloud1{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            width: 150px;
            height: 70px;
            background-color: white;
            border-radius: 50%;
            box-shadow: 0px 0px 40px white;
            filter: blur(8px);
            transform: translateX(0px) translateY(-300px) translateZ(0px);
        }




        #container{
            overflow: visible;
            position: absolute;
            left: 50%;
            top: 50%;
            perspective: 380px;
        }

        #main{
            position: absolute;
            overflow: visible;
            transform-style: preserve-3d;
            transform: translateZ(230px) translateY(200px);
        }

        #globe{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            animation: spin 3.5s linear infinite;
        }

        @keyframes spin {
            0%{
                transform: rotate3d(0,0,0,0);
            }
            100%{
                transform: rotate3d(1,0,0,-360deg);
            }
        }


        #one{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateY(-50px);
        }
        #two{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-50px) translateY(-50px);
        }
        #three{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(50px) translateY(-50px);
        }

        #left1{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-100px) translateY(-50px);
        }
        #left2{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-150px) translateY(-50px);
        }
        #left3{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-200px) translateY(-50px);
        }
        #left4{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-250px) translateY(-50px);
        }
        #left5{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-300px) translateY(-50px);
        }

        #right1{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(100px) translateY(-50px) rotateX(-11deg);
        }
        #right2{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(150px) translateY(-50px);
        }
        #right3{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(200px) translateY(-50px);
        }
        #right4{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(250px) translateY(-50px);
        }
        #right5{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(300px) translateY(-50px);
        }

        #left11{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(-350px) translateY(-50px) rotateX(10deg);
        }

        #right11{
            position: absolute;
            transform-style: preserve-3d;
            overflow: visible;
            transform: translateX(350px) translateY(-50px) rotateX(-10deg);
        }





        #circles1{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
        }
        #circles2{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(30deg) translateZ(-30px);
        }
        #circles3{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            transform: rotateX(60deg) translateZ(-50px) translateY(-20px);
        }



        #circle1{
            overflow: visible;
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(to right, darkgreen, green);
            transform: translateX(-50px) translateY(00px) translateZ(-100px) rotateX(0deg);
        }
        #circle2{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(to right, darkgreen, green);
            transform: translateX(-50px) translateY(00px) translateZ(100px) rotateX(0deg);
        }
        #circle3{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(to right, darkgreen, green);
            transform: translateX(-50px) translateY(-100px) translateZ(00px) rotateX(90deg);
        }
        #circle4{
            position: absolute;
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: linear-gradient(to right, darkgreen, green);
            transform: translateX(-50px) translateY(100px) translateZ(00px) rotateX(90deg);
        }



        #shade{
            position: absolute;
            bottom: -150px;
            width: 3000px;
            left: -500px;
            height: 800px;
            border-top-left-radius: 45%;
            border-top-right-radius: 45%;
            background: rgb(74, 120, 136);
            filter: blur(50px);
            opacity: 0.7;
        }





/*------------------------------------------character----------------------------------------*/


        #character{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            left: 50%;
            top: 50%;
            perspective: 1000px;
        }



        #plane{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            perspective: 1000px;
            transform: translateZ(300px);
            left: 0;
            top: 0;
        }
        #guy{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
        }


        #front{
            overflow: visible;
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-25px) translateY(-25px) translateZ(100px);
        }
        #back{
            overflow: visible;
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-25px) translateY(-25px) translateZ(-100px);
        }

        #left{
            overflow: visible;
            position: absolute;
            width: 200px;
            height: 50px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-75px) translateY(-25px) translateZ(0px) rotateY(90deg);
        }
        #right{
            overflow: visible;
            position: absolute;
            width: 200px;
            height: 50px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-125px) translateY(-25px) translateZ(0px) rotateY(90deg);
        }

        #top{
            overflow: visible;
            position: absolute;
            width: 50px;
            height: 200px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-25px) translateY(-125px) translateZ(0px) rotateX(90deg);
        }
        #bottom{
            overflow: visible;
            position: absolute;
            width: 50px;
            height: 200px;
            background-color: red;
            border: 3px solid darkred;
            transform: translateX(-25px) translateY(-75px) translateZ(0px) rotateX(90deg);
        }

/*-------------------------------------------shot----------------------------------------*/

        #shoot{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            transform: translateZ(-120px);
            animation: 0.2s linear infinite;
        }


        #ft{
            overflow: visible;
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-5px) translateY(-5px) translateZ(15px);
        }
        #bk{
            overflow: visible;
            position: absolute;
            width: 10px;
            height: 10px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-5px) translateY(-5px) translateZ(-15px);
        }

        #lf{
            overflow: visible;
            position: absolute;
            width: 30px;
            height: 10px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-10px) translateY(-5px) translateZ(0px) rotateY(90deg);
        }
        #rt{
            overflow: visible;
            position: absolute;
            width: 30px;
            height: 10px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-20px) translateY(-5px) translateZ(0px) rotateY(90deg);
        }

        #tp{
            overflow: visible;
            position: absolute;
            width: 10px;
            height: 30px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-5px) translateY(-20px) translateZ(0px) rotateX(90deg);
        }
        #bt{
            overflow: visible;
            position: absolute;
            width: 10px;
            height: 30px;
            background-color: orange;
            border: 2px solid rgb(175, 114, 0);
            transform: translateX(-5px) translateY(-10px) translateZ(0px) rotateX(90deg);
        }


        @keyframes fires {
            0%{
                transform: translateZ(-120px);
            }
            100%{
                transform: translateZ(-1000px);
            }
        }


/*-------------------------------------------propel--------------------------------------*/


        #propel{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            animation: propeler 1s linear infinite;
        }
        #propeler{
            position: absolute;
            overflow: visible;
            transform-style: preserve-3d;
            transform: translateX(5px) translateY(5px) translateZ(100px);
        }
        @keyframes propeler {
            0%{
                transform: rotateZ(0deg);
            }
            100%{
                transform: rotateZ(720deg);
            }
        }

        #first{
            overflow: visible;
            position: absolute;
            width: 90px;
            height: 15px;
            background-color: gray;
            transform: translateX(-45px) translateY(-7.5px) translateZ(-210px);
        }
        #second{
            overflow: visible;
            position: absolute;
            width: 90px;
            height: 15px;
            background-color: gray;
            transform: translateX(-45px) translateY(-7.5px) translateZ(-210px) rotateZ(90deg);
        }

/*-------------------------------------------------wings-------------------------------------------*/


        #wings{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
        }
        #wingfront{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            width: 300px;
            height: 40px;
            background-color: blue;
            border: 5px solid darkblue;
            transform: translateX(-150px) translateY(0px) translateZ(-50px) rotateX(90deg);
        }

        #wingback{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            width: 150px;
            height: 40px;
            background-color: blue;
            border: 5px solid darkblue;
            transform: translateX(-75px) translateY(-10px) translateZ(70px) rotateX(90deg);
        }

        #wingtop{
            overflow: visible;
            position: absolute;
            transform-style: preserve-3d;
            width: 90px;
            height: 40px;
            background-color: blue;
            border: 5px solid darkblue;
            transform: translateX(20px) translateY(0px) translateZ(40px) rotateY(90deg);
        }