body{
    margin: 0;
    padding:0;
    cursor: crosshair;
    background-image: url('other_files/bg.jpg');
    overflow: hidden;
    content:'';
    display: block;
    position:100%;
    width:100%;
    height:40000px;
    z-index: index 0;
    
     
    
    
}




@keyframes duckfly{
    0%{
        left:150%;
        top:10%;
    }
    25%{
        left:80%;
        top:50%;
    }

    50%{
        left:50%;
        top:30%;
    }


    75%{
        left:40%;
        top:30%;
    }
    80%{
        left:20%;
        top:50%;
    }

    100%{
        left:-50%;
        top:10%;
    }






}


input+label{
    position:absolute;
    left:-10px;
    z-index: 2;
    width: 25px;
    height: 25px;
    display:block;
    z-index:5;
    transform: translate(-50%,-50%);
    background-image: url('other_files/duck.jpeg') ;
    background-repeat: no-repeat;
    border-radius: 50%;
    
    
}

input:checked+label{
    opacity: 0;
    transition: 0.5s;
    transform: rotate(120deg);
    transform-origin: 60%;
    z-index: 5;
}

.duck:nth-last-of-type(1)
{
    animation:duckfly 10s linear 1s infinite;
    cursor: crosshair;
    
}
.duck:nth-last-of-type(2)
{
    animation:duckfly 10s linear 2s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(3)
{
    animation:duckfly 10s linear 3s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(4)
{
    animation:duckfly 10s linear 4s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(5)
{
    animation:duckfly 10s linear 5s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(6)
{
    animation:duckfly 10s linear 6s infinite;
    cursor: crosshair;
    
}
.duck:nth-last-of-type(7)
{
    animation:duckfly 10s linear 7s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(8)
{
    animation:duckfly 10s linear 8s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(9)
{
    animation:duckfly 10s linear 9s infinite;
    cursor: crosshair;
}
.duck:nth-last-of-type(10)
{
    animation:duckfly 10s linear 10s infinite;
    cursor: crosshair;
}
.score
{
    position: absolute;
    bottom: 5px;
    height: 50px;
    line-height: 50px;
    
    width: 30%;
    z-index: 2;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
}
.score:after{
    content: counter(score);
    display: inline-block;

}
.score:before{
    content:'Score';
    display: inline-block;
    margin-right: 10px;
}

input:checked{
    counter-increment: score;
}

.win{
    font-family:fantasy;
    
    text-align: center;
    color: yellow;
    padding-top: 10px;
    font-size:50px;
    text-shadow: 0 0 5px rgb(121, 59, 101),
                 0 0 10px rgb(139, 198, 232), 
                 0 0 20px rgb(139, 198, 232), 
                 0 0 30px rgb(139, 198, 232), 
                 0 0 40px rgb(143, 223, 107), 
                 0 0 55px rgb(143, 223, 107), 
                 0 0 70px rgb(223, 215, 107)
}

.start{
    font-family:serif;
    
    text-align: center;
    color: #65d5dd;
    padding-top: 10px;
    font-size:60px;
    text-shadow: 0 0 5px rgb(121, 59, 101),
                 0 0 10px rgb(139, 198, 232), 
                 0 0 20px rgb(139, 198, 232), 
                 0 0 30px rgb(139, 198, 232), 
                 0 0 40px rgb(143, 223, 107), 
                 0 0 55px rgb(143, 223, 107), 
                 0 0 70px rgb(223, 215, 107)

}
input.boxsize{
    height: 0px;
    width: 0px;
}
