body{
    overflow: hidden;
}

main {
    background: url("image/sky2.jpg");/*now eka*/
    /*background: url("image/sky_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/sky_green.png");!*furer level  testing*!*/
    /*background: url("image/last_sky.png");!*furer level  testing*!*/
    width: 100vw;
    height: 100vh;
    background-size: cover;
}


#cloud1{
    position: absolute;
    left: 21px;
    top: 7px;
    width: 151px;
    height: 71px;
    background: url("image/gray-clouds.jpg");/*now*/
    /*background: url("image/cloud_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/cloud_green.png");!*furer level  testing*!*/
    background-size: cover;
    background-position: center ;
    /*visibility: hidden;!*furer level wala eka testing*!*/
}

#cloud2{
    position: absolute;
    left: 300px;
    top: 20px;
    width: 151px;
    height: 71px;
    background: url("image/gray-clouds.jpg");/*now*/
    /*background: url("image/cloud_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/cloud_green.png");!*furer level testing*!*/
    background-size: cover;
    background-position: center ;
    /*visibility: hidden;!*furer level wala eka testing*!*/
}

#cloud3{
    position: absolute;
    left: 600px;
    top: 40px;
    width: 151px;
    height: 71px;
    background: url("image/gray-clouds.jpg");/*now*/
    /*background: url("image/cloud_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/cloud_green.png");!*furer level testing*!*/
    background-size: cover;
    background-position: center ;
    /*visibility: hidden;!*furer level wala eka testing*!*/
}

#cloud4{
    position: absolute;
    left: 900px;
    top: 60px;
    width: 151px;
    height: 71px;
    background: url("image/gray-clouds.jpg");/*now*/
    /*background: url("image/cloud_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/cloud_green.png");!*furer level testing*!*/
    background-size: cover;
    background-position: center ;
    /*visibility: hidden;!*furer level wala eka testing*!*/
}

#cloud5{
    position: absolute;
    left: 1200px;
    top: 80px;
    width: 151px;
    height: 71px;
    background: url("image/gray-clouds.jpg");/*now*/
    /*background: url("image/cloud_my.png");!*furer level wala eka testing*!*/
    /*background: url("image/cloud_green.png");!*furer level testing*!*/
    background-size: cover;
    background-position: center ;
    /*visibility: hidden;!*furer level wala eka testing*!*/
}

#forest{ /*test 01*/
    height: 266px;
    width: 1200px;
    background: url("image/black-tree_gather-png.png");
    background-size: cover;
    background-position: center;
    position: absolute;
    left: 58px;
    bottom: 169px;
    visibility: hidden;
}

/*#forest{ !*test last*!*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    background: url("image/last_forest.png");*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    position: absolute;*/
/*    left: 0px;*/
/*    bottom: 0px;*/
/*    !*visibility: hidden;*!*/
/*}*/

#forest1 {
    height: 330px;
    width: 506.25px;
    background: url("image/forest.png"); /*furer level testing part 1*/
    /*background: url("image/green_forest.png"); !*furer level testing part 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 169px;
    left: 0;
    visibility: hidden;
}

#forest2 {
    height: 330px;
    width: 506.25px;
    background: url("image/forest_temp.png"); /*furer level testing part 1*/
    /*background: url("image/green_forest_temp.png"); !*furer level testing part 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 169px;
    left: 506px;
    visibility: hidden;
}

#forest3 {
    height: 330px;
    width: 506.25px;
    background: url("image/forest.png"); /*furer level testing part 1*/
    /*background: url("image/green_forest.png"); !*furer level testing part 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    bottom: 169px;
    left: 1012px;
    visibility: hidden;
}

#tree1 {
    height: 145px;
    width: 124px;
    background: url("image/tree3.png");/*now*/
    /*background: url("image/white_tree.png");!*for future 1*!*/
    /*background: url("image/tree_green.png");!*for future 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    /*bottom: 155px;!*now*!*/
    bottom: 100px;/*for future*/
    left: 400px;
    z-index: 2;
    animation-name:moveTree1;
    animation-duration: 10s;
    animation-delay: 5s;
    animation-play-state: running;/*Extra*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /*border: 1px solid red;*/
    /*visibility: hidden;!*for testing*!*/
}

#tree2 {
    height: 145px;
    width: 124px;
    background: url("image/tree3.png");/*now*/
    /*background: url("image/white_tree.png");!*for future 1*!*/
    /*background: url("image/tree_green.png");!*for future 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    /*bottom: 155px;!*now*!*/
    bottom: 100px;/*for future*/
    left: 1000px;
    z-index: 2;
    animation-name:moveTree2;
    animation-duration: 15s;
    animation-delay: 5s;
    animation-play-state: running;/*Extra*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    /*border: 1px solid blue;*/
    /*visibility: hidden;!*for testing*!*/
}

#tree3 {
    height: 145px;
    width: 124px;
    background: url("image/tree3.png");/*now*/
    /*background: url("image/white_tree.png");!*for future 1*!*/
    /*background: url("image/tree_green.png");!*for future 2*!*/
    background-size: cover;
    background-position: center;
    position: absolute;
    /*bottom: 155px;!*now*!*/
    bottom: 100px;/*for future*/
    left: 1600px;
    z-index: 2;
    animation-name:moveTree3;
    animation-duration: 20s;
    animation-delay: 5s;
    animation-iteration-count: infinite;
    animation-play-state: running;/*Extra*/
    animation-timing-function: linear;
    /*border: 1px solid green;*/
    /*visibility: hidden;!*for testing*!*/
}

#dragon{ /*now*/
    position: absolute;
    left: 14px;
    bottom: 100px;
    width: 196px;
    height: 92px;
    z-index: 3;
    background: url("image/Black_Dragon.jpg");
    background-size: cover;
    background-position:center;
    /*background-repeat: no-repeat;*/
    /*border: 1px solid white;!**!*/
}

/*#dragon{!*future level testing*!*/
/*    position: absolute;*/
/*    left: 14px;*/
/*    bottom: 50px;*/
/*    width: 196px;*/
/*    height: 92px;*/
/*    z-index: 3;*/
/*    !*background: url("image/dragon_my.png");!*for future 1*!*!*/
/*    !*background: url("image/dragon_green.png");!*for future 2*!*!*/
/*    background: url("image/last_dragon.png");!*for future last*!*/
/*    background-size: cover;*/
/*    background-position:center;*/
/*    !*background-repeat: no-repeat;*!*/
/*    !*border: 1px solid #ff7d00;!**!*!*/
/*}*/

/*#dragon{!*last level part 1 testing*!*/
/*    position: absolute;*/
/*    left: 166px;*/
/*    bottom: 113px;*/
/*    width: 196px;*/
/*    height: 92px;*/
/*    z-index: 3;*/
/*    background: url("image/last_dragon.png");*/
/*    background-size: cover;*/
/*    background-position:center;*/
/*}*/

/*#dragon{!*last level part 2 testing*!*/
/*    position: absolute;*/
/*    left: 1205px;*/
/*    bottom: 240px;*/
/*    width: 144px;*/
/*    height: 66px;*/
/*    z-index: 3;*/
/*    background: url("image/last_dragon_part_2.png");*/
/*    background-size: cover;*/
/*    background-position:center;*/
/*}*/

/*#dragon{!*last level part 3 testing*!*/
/*    position: absolute;*/
/*    left: 600px;*/
/*    bottom: 360px;*/
/*    width: 116px;*/
/*    height: 55px;*/
/*    z-index: 3;*/
/*    background: url("image/last_dragon_part_2.png");*/
/*    background-size: cover;*/
/*    background-position:center;*/
/*}*/

/*#dragon{!*last level last part testing*!*/
/*    position: absolute;*/
/*    left: 260px;*/
/*    bottom: 540px;*/
/*    width: 75px;*/
/*    height: 34px;*/
/*    z-index: 3;*/
/*    background: url("image/last_dragon_part_2.png");*/
/*    background-size: cover;*/
/*    background-position:center;*/
/*    transform:rotate(15deg);*/
/*}*/

meter{ /*for testing*/
    visibility: visible;/*for testing*/
}

#road {       /*now*/
    height: 26vh;
    background: url("image/road.jpg");
    position: absolute;
    /*width: 1000vw;*/
    width: calc(10*100vw);
    bottom: 0;
    animation-name:moveCityAndRoad ;
    animation-duration: 30s;
    animation-delay: 5s;
    animation-play-state: running;/*Extra*/
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

/*#road {    !*for future levels*!*/
/*    background: url("image/Road_my_original.png");!*for future 1*!*/
/*    !*background: url("image/Road_green_original.png");!*for future 2*!*!*/
/*    height: 28vh;*/
/*    z-index: 1;!*new*!*/
/*    position: absolute;*/
/*    !*width: 1000vw;*!*/
/*    width: calc(10*100vw);*/
/*    bottom: 0;*/
/*    animation-name:moveCityAndRoad ;*/
/*    animation-duration: 30s;*/
/*    animation-delay: 5s;*/
/*    animation-play-state: running;!*Extra*!*/
/*    animation-iteration-count: infinite;*/
/*    animation-timing-function: linear;*/
/*    visibility: hidden;!*for testing*!*/
/*}*/


#dragon:active{
    /*bottom: 380px;!*Testing- if tree bottom is 155px ,this size ok *!*/
    bottom: 330px;
}


@keyframes moveCityAndRoad {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-75%);
    }
}

@keyframes moveTree1{
    from {
        left: 400px;
    }
    to {
        left: -400px;
    }
}
@keyframes moveTree2{
    from {
        left: 1000px;
    }
    to {
        left: 0;
    }
}
@keyframes moveTree3{
    from {
        left: 1600px;
    }
    to {
        left: 0;
    }
}

#title{
    width:259px;
    height: 100px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top:0;
    margin: auto;
    color:orangered;
}

#title>h1{
    font-size: 50px;
    font-family: 'Almendra', serif;
    margin-top: 0;
    margin-bottom: 0;
    animation-name:titleDisplay ;
    animation-delay: 1s;
    animation-duration: 5s;
    animation-iteration-count:1;
}


@keyframes titleDisplay {
    25% {
        transform:rotate(360deg);
        font-size: 25px;
    }
    75% {
        transform:rotate(-360deg);
        font-size: 10px;
    }
}


#marks{
    position: absolute;
    right: 0;
    top:0;
    width:100px;
    height: 35px;
    border: 2px solid white;
    box-shadow: 1px 0 20px 6px gray;
    color: white;
}

#marks>h1{
    font-size: 30px;
    margin-top: 0;
    margin-left: 36px;
    margin-bottom: 0;
}

#restart{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background:rgba(43, 41, 41, 0.81);
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
}

#dragonEgg{ /*last level*/
    width:312px;
    height: 305px;
    background: url("image/sad_gragon.png");
    /*width:600px; !*last level*!*/
    /*height: 500px; !*last level*!*/
    /*background: url("image/dragonEgg.png"); !*last level*!*/
    background-size: cover;
    background-position:center;
    visibility: hidden;
}

#leftCorner{
    position: relative;
    left: 180px;
    bottom: 270px;
    width: 129px;
    height: 117px;
    transform:rotate(180deg);
    background: url("image/gif/celebrate.gif");
    background-size: cover;
    background-position:center;
    visibility: hidden;
}

#rightCorner{
    position: relative;
    right: 1200px;
    top: 270px;
    width: 129px;
    height: 117px;
    background: url("image/gif/celebrate.gif");
    background-size: cover;
    background-position:center;
    visibility: hidden;
}

#restart>h1{
    color: white;
    font-size: 50px;
    font-family: 'Almendra', serif;
    visibility: hidden;
}

#restart>button{
    position: relative;
    right: 91px;
    top: 51px;
    width:100px;
    height: 38px;
    padding: 0 0 0 0;
    background: black;
    color: white;
    font-size: 25px;
    font-family: 'Teko', sans-serif;
    border: solid 2px white;
    border-radius: 25px;
    cursor: pointer;
    visibility: hidden;
}

#restart>button:hover{
    transform: scale(1.2, 1.2);
}

#rain{ /*furer level testing*/
    position: absolute;
    background: url("image/Raining.png");
    width: 100vw;
    height: 100vh;
    background-size: cover;
    z-index: 2;
    visibility: hidden;
}

#grass{ /*furer level testing*/
        position: absolute;
        background: url("image/grass.png");
        /*background: url("image/grass_green.png");*/
        height: 103px;
        width: 111px;
        right: 5px;
        bottom: 0;
        background-size: cover;
        z-index: 2;
        visibility: hidden;
}

#lifeBar{
    position: absolute;
    transform: rotate(-90deg);
    left: -47px;
    bottom: 39px;
}


/*#birds{*/
/*    height: 182px;*/
/*    width: 250px;*/
/*    background: url("image/gif/birds.gif");*/
/*    background-size: cover;*/
/*    background-position: center;*/
/*    position: absolute;*/
/*    bottom: 450px;*/
/*    left: 300px;*/
/*    z-index: 2;*/
/*    !*animation-name:moveTree1;*!*/
/*    animation-duration: 10s;*/
/*    animation-delay: 5s;*/
/*    animation-play-state: running;!*Extra*!*/
/*    animation-iteration-count: infinite;*/
/*    animation-timing-function: linear;*/
/*    border: 1px solid white;*/
/*}*/