html {
    height: 100%;
    background-color: #222;
    background-image: linear-gradient(180deg, transparent, hsla(30, 10%, 70%, 1) 0), linear-gradient(-45deg, hsla(30, 10%, 70%, 1) 40%, transparent 0), linear-gradient(45deg, hsla(30, 10%, 70%, 1) 40%, transparent 0), linear-gradient(45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(-45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(-45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(-45deg, transparent 40%, hsla(30, 10%, 70%, 1) 0), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(hsla(30, 10%, 70%, 1), hsla(30, 10%, 70%, 1)), linear-gradient(180deg, hsla(10, 60%, 40%, 1), hsla(10, 60%, 40%, 1), hsla(200, 30%, 100%, 1), hsla(200, 30%, 50%, 1), hsla(200, 50%, 70%, 1), hsla(250, 40%, 40%, 1), hsla(250, 20%, 50%, 1), hsla(290, 0%, 30%, 1), hsla(10, 60%, 40%, 1));

    background-position: 50% 100%, calc(50% - 15px) calc(100% - 145px), calc(50% + 15px) calc(100% - 145px), calc(50% - 20px) calc(100% - 140px), calc(50% + 20px) calc(100% - 140px), 50% calc(100% - 135px), calc(50% - 15px) calc(100% - 130px), calc(50% + 15px) calc(100% - 130px), calc(50% - 10px) calc(100% - 120px), calc(50% + 10px) calc(100% - 120px), 50% calc(100% - 70px), calc(50% + 5px) calc(100% - 75px), calc(50% + 20px) calc(100% - 80px), calc(50% + 25px) calc(100% - 79px), calc(50% + 35px) calc(100% - 53px), calc(50% + 35px) calc(100% - 70px), 50% 100%, 0 0;

    background-size: 15px 161px, 30px 20px, 30px 20px, 30px 5px, 30px 5px, 40px 5px, 30px 5px, 30px 5px, 30px 5px, 30px 5px, 25px 30px, 25px 20px, 30px 5px, 3px 7px, 5px 30px, 7px 3px, 2px 185px, 100% 1500%;
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, no-repeat, repeat-y;
    animation: weather 840s linear infinite;
}

html:after, html:before {
    content: '';
    position: absolute;
    border-radius: 50%;
    z-index: 1;

}

html:before {
    height: 150px;
    width: 150px;
    box-shadow: inset 20px -20px 50px hsla(295, 20%, 70%, .5);
    top: 20%;
    right: 5%;
}

html:after {
    height: 100px;
    width: 100px;
    box-shadow: inset 30px -30px 50px hsla(230, 20%, 60%, .5);
    top: 35%;
    right: 15%;
}

@keyframes weather {
    to {
        background-position: 50% 100%, calc(50% - 15px) calc(100% - 145px), calc(50% + 15px) calc(100% - 145px), calc(50% - 20px) calc(100% - 140px), calc(50% + 20px) calc(100% - 140px), 50% calc(100% - 135px), calc(50% - 15px) calc(100% - 130px), calc(50% + 15px) calc(100% - 130px), calc(50% - 10px) calc(100% - 120px), calc(50% + 10px) calc(100% - 120px), 50% calc(100% - 70px), calc(50% + 5px) calc(100% - 75px), calc(50% + 20px) calc(100% - 80px), calc(50% + 25px) calc(100% - 79px), calc(50% + 35px) calc(100% - 53px), calc(50% + 35px) calc(100% - 70px), 50% 100%, 0 1500%;
    }
}

@keyframes weather {
    to {
        background-position: 50% 100%, calc(50% - 15px) calc(100% - 145px), calc(50% + 15px) calc(100% - 145px), calc(50% - 20px) calc(100% - 140px), calc(50% + 20px) calc(100% - 140px), 50% calc(100% - 135px), calc(50% - 15px) calc(100% - 130px), calc(50% + 15px) calc(100% - 130px), calc(50% - 10px) calc(100% - 120px), calc(50% + 10px) calc(100% - 120px), 50% calc(100% - 70px), calc(50% + 5px) calc(100% - 75px), calc(50% + 20px) calc(100% - 80px), calc(50% + 25px) calc(100% - 79px), calc(50% + 35px) calc(100% - 53px), calc(50% + 35px) calc(100% - 70px), 50% 100%, 0 1500%;
    }
}

* {
    margin: 0;
    padding: 0;
}

.board {
    width: 400px;
    height: 600px;
    margin: 0 auto;
    background: #69c url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/bg.jpg);
    cursor: url('https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/r2.png') 35 0,pointer;
    text-align: center;
    position: relative;
}

#scorebar {
    float: left;
    color: #fff;
}

.board #status {
    color: #fff;
    position: absolute;
    bottom: 15px;
    left: 5px;
    font-size: 14px;
}

.board #status span.active {
    display: none;
}

.board #status span.inactive {
    display: inline;
}

.board:hover #status span.active {
    display: inline;
}

.board:hover #status span.inactive {
    display: none;
}

.enemy {
    height: 64px;
    width: 64px;
    margin-right: 5px;
    margin-top: 15px;
    position: absolute;
    top: -50%;
    left: 0;
    background: url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/e6.png);
}

.enemy_t1 {
    height: 48px;
    width: 48px;
    background: url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/e4.png);
}

.enemy_t2 {
    height: 64px;
    width: 64px;
    background: url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/e2.png);
}

.enemy_t3 {
    height: 128px;
    width: 128px;
    background: url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/e3.png);
}

.bonus {
    height: 24px;
    width: 24px;
    position: absolute;
    top: -10%;
    left: 0;
    background-image: url(https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/b1.png);
    -moz-appearance: button;
    -webkit-appearance: button;
    appearance: button;
}

.bonus:checked {
    background-image: url('https://raw.githubusercontent.com/frontdevops/nojsgame/master/assets/img/b2.png') !important;
    width: 24px;
    height: 24px;
    position: static;
    -webkit-animation-name: none;
    animation-name: none;
    float: left;
}

.board .enemy:hover {
    border-radius: 0;
    margin: 0;
    height: 600px;
    width: 400px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    background: #f00;
    overflow: visible;
    cursor: not-allowed;
    animation: animation1 0s 0s linear !important;
    animation: animation2 0s 0s linear !important;
    animation: animation3 0s 0s linear !important;
    animation: animation4 0s 0s linear !important;
    animation: animation5 0s 0s linear !important;
    animation: animation6 0s 0s linear !important;
    animation: animation7 0s 0s linear !important;
    animation: animation8 0s 0s linear !important;
    animation: animation9 0s 0s linear !important;
    animation: animation10 0s 0s linear !important;
}

.board .enemy:hover:before {
    background: #f00;
    content: "GAME OVER!";
    top: 30%;
    left: 0;
    width: 400px;
    color: #fff;
    text-shadow: 1px 1px 1px #aaa;
    box-shadow: none;
    position: relative;
}

.board .enemy:hover:after {
    display: none;
}

.board .bonus:hover {
    cursor: crosshair;
    zoom: 2;
}

.board:hover #bonus_01 {
    animation: animation3 8s 2s linear;
}

.board:hover #bonus_02 {
    animation: animation4 12s 4s linear;
}

.board:hover #bonus_03 {
    animation: animation8 16s 6s linear;
}

.board:hover #bonus_04 {
    animation: animation2 16s 10s linear;
}

.board:hover #bonus_05 {
    animation: animation9 14s 15s linear;
}

.board:hover #bonus_06 {
    animation: animation7 12s 20s linear;
}

.board:hover #bonus_07 {
    animation: animation1 8s 26s linear;
}

.board:hover #bonus_08 {
    animation: animation3 10s 30s linear;
}

.board:hover #bonus_09 {
    animation: animation7 16s 40s linear;
}

.board:hover #bonus_10 {
    animation: animation4 16s 45s linear;
}

.board:hover #enemy_01 {
    animation: animation1 6s 0s linear;
}

.board:hover #enemy_02 {
    animation: animation2 5s 2s linear;
}

.board:hover #enemy_03 {
    animation: animation3 3s 3s linear;
}

.board:hover #enemy_04 {
    animation: animation4 6s 4s linear;
}

.board:hover #enemy_05 {
    animation: animation5 4s 5s linear;
}

.board:hover #enemy_06 {
    animation: animation2 3s 6s linear;
}

.board:hover #enemy_07 {
    animation: animation7 2s 8s linear;
}

.board:hover #enemy_08 {
    animation: animation4 5s 8s linear;
}

.board:hover #enemy_09 {
    animation: animation8 3s 9s linear;
}

.board:hover #enemy_10 {
    animation: animation6 4s 10s linear;
}

.board:hover #enemy_11 {
    animation: animation1 6s 10s linear;
}

.board:hover #enemy_12 {
    animation: animation6 4s 11s linear;
}

.board:hover #enemy_13 {
    animation: animation2 8s 12s linear;
}

.board:hover #enemy_14 {
    animation: animation9 4s 13s linear;
}

.board:hover #enemy_15 {
    animation: animation3 5s 13s linear;
}

.board:hover #enemy_16 {
    animation: animation10 7s 14s linear;
}

.board:hover #enemy_17 {
    animation: animation7 3s 15s linear;
}

.board:hover #enemy_18 {
    animation: animation3 5s 16s linear;
}

.board:hover #enemy_19 {
    animation: animation6 4s 16s linear;
}

.board:hover #enemy_20 {
    animation: animation1 3s 17s linear;
}

.board:hover #enemy_21 {
    animation: animation2 4s 17s linear;
}

.board:hover #enemy_22 {
    animation: animation1 5s 18s linear;
}

.board:hover #enemy_23 {
    animation: animation4 9s 19s linear;
}

.board:hover #enemy_24 {
    animation: animation9 2s 20s linear;
}

.board:hover #enemy_25 {
    animation: animation7 3s 20s linear;
}

.board:hover #enemy_26 {
    animation: animation1 5s 20s linear;
}

.board:hover #enemy_27 {
    animation: animation9 6s 21s linear;
}

.board:hover #enemy_28 {
    animation: animation3 3s 22s linear;
}

.board:hover #enemy_29 {
    animation: animation6 4s 23s linear;
}

.board:hover #enemy_30 {
    animation: animation4 5s 24s linear;
}

.board:hover #enemy_31 {
    animation: animation9 4s 24s linear;
}

.board:hover #enemy_32 {
    animation: animation6 2s 25s linear;
}

.board:hover #enemy_33 {
    animation: animation3 3s 26s linear;
}

.board:hover #enemy_34 {
    animation: animation4 5s 26s linear;
}

.board:hover #enemy_35 {
    animation: animation10 8s 27s linear;
}

.board:hover #enemy_36 {
    animation: animation2 3s 27s linear;
}

.board:hover #enemy_37 {
    animation: animation7 2s 28s linear;
}

.board:hover #enemy_38 {
    animation: animation4 5s 28s linear;
}

.board:hover #enemy_39 {
    animation: animation1 3s 29s linear;
}

.board:hover #enemy_40 {
    animation: animation6 4s 30s linear;
}

.board:hover #enemy_41 {
    animation: animation9 4s 24s linear;
}

.board:hover #enemy_42 {
    animation: animation6 2s 25s linear;
}

.board:hover #enemy_43 {
    animation: animation3 3s 26s linear;
}

.board:hover #enemy_44 {
    animation: animation4 5s 26s linear;
}

.board:hover #enemy_45 {
    animation: animation10 8s 27s linear;
}

.board:hover #enemy_46 {
    animation: animation2 3s 27s linear;
}

.board:hover #enemy_47 {
    animation: animation7 2s 28s linear;
}

.board:hover #enemy_48 {
    animation: animation4 5s 28s linear;
}

.board:hover #enemy_49 {
    animation: animation1 3s 29s linear;
}

.board:hover #enemy_50 {
    animation: animation6 4s 30s linear;
}

@keyframes animation1 {
    0% {
        left: 260px;
        top: -10%;
    }

    100% {
        left: 260px;
        top: 100%;
    }
}

@keyframes animation2 {
    0% {
        left: 50px;
        top: -10%;
    }

    100% {
        left: 50px;
        top: 100%;
    }
}

@keyframes animation3 {
    0% {
        left: 150px;
        top: -10%;
    }

    100% {
        left: 200px;
        top: 100%;
    }
}

@keyframes animation4 {
    0% {
        left: 300px;
        top: -10%;
    }

    100% {
        left: 200px;
        top: 100%;
    }
}

@keyframes animation5 {
    0% {
        left: 150px;
        top: -10%;
    }

    100% {
        left: 150px;
        top: 100%;
    }
}

@keyframes animation6 {
    0% {
        left: 50px;
        top: -10%;
    }

    100% {
        left: 250px;
        top: 100%;
    }
}

@keyframes animation7 {
    0% {
        left: 300px;
        top: -10%;
    }

    100% {
        left: 0;
        top: 100%;
    }
}

@keyframes animation8 {
    0% {
        left: 0;
        top: -10%;
    }

    100% {
        left: 300px;
        top: 100%;
    }
}

@keyframes animation9 {
    0% {
        left: 200px;
        top: -10%;
    }

    100% {
        left: 150px;
        top: 100%;
    }
}

@keyframes animation10 {
    0% {
        left: 250px;
        top: -10%;
    }

    100% {
        left: 100px;
        top: 100%;
    }
}

@keyframes animation99 {
    0% {
        left: 50px;
        top: -40%;
    }

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

@keyframes animation1 {
    0% {
        left: 260px;
        top: -10%;
    }

    100% {
        left: 260px;
        top: 100%;
    }
}

@keyframes animation2 {
    0% {
        left: 50px;
        top: -10%;
    }

    100% {
        left: 50px;
        top: 100%;
    }
}

@keyframes animation3 {
    0% {
        left: 150px;
        top: -10%;
    }

    100% {
        left: 200px;
        top: 100%;
    }
}

@keyframes animation4 {
    0% {
        left: 300px;
        top: -10%;
    }

    100% {
        left: 200px;
        top: 100%;
    }
}

@keyframes animation5 {
    0% {
        left: 150px;
        top: -10%;
    }

    100% {
        left: 150px;
        top: 100%;
    }
}

@keyframes animation6 {
    0% {
        left: 50px;
        top: -10%;
    }

    100% {
        left: 250px;
        top: 100%;
    }
}

@keyframes animation7 {
    0% {
        left: 300px;
        top: -10%;
    }

    100% {
        left: 0;
        top: 100%;
    }
}

@keyframes animation8 {
    0% {
        left: 0;
        top: -10%;
    }

    100% {
        left: 300px;
        top: 100%;
    }
}

@keyframes animation9 {
    0% {
        left: 200px;
        top: -10%;
    }

    100% {
        left: 150px;
        top: 100%;
    }
}

@keyframes animation10 {
    0% {
        left: 250px;
        top: -10%;
    }

    100% {
        left: 100px;
        top: 100%;
    }
}

@keyframes animation99 {
    0% {
        left: 50px;
        top: -40%;
    }

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

.board #finish {
    position: absolute;
    top: -40%;
    left: 50px;
    text-align: center;
    display: none;
    width: 200px;
    padding: 20px 50px;
    background: #fff;
    box-shadow: 4px 4px 4px #ccc;
    border-radius: 10px;
}

.board:hover #finish {
    -webkit-animation: animation99 5s 30s linear;
    animation: animation99 5s 30s linear;
    animation-fill-mode: forwards;
    display: block;
}