* {
    box-sizing: border-box;
}

h1 {
    font-size: 1.4em;
}

body {
    counter-reset: game;
    text-align: center;
    background: url(../img/BG_Game.png);
    background-size: 1371px 862px;
    font-family: "Open Sans", "Helvetica", "Arial", sans-serif;
    color: #333;
}

input:checked {
    counter-increment: game;
}

.total-count::after {
    content: counter(game);
}

h2 {
    font-size: 21px;
    margin: -0.5em auto 3em;
    font-weight: 400;
    color: aliceblue;
}

.total-count {
    color: aquamarine;
    font-size: 1.75em;
    position: absolute;
    top: 58px;
    width: 100%;
    left: 0;
    text-align: center;
    z-index: 300;
}

#rst {
    font-size: 0.75em;
    position: absolute;
    top: 2.75em;
    margin-left: 200px;
    margin-top:10px;
}

.game-area {
    display: flex;
    flex-flow: wrap;
    align-items: center;
    justify-content: space-between;
    max-width: 600px;
    min-height: 550px;
    max-height: 700px;
    margin: 0 auto;
    padding-left: 0;
}

li {
    width: calc(33% - .5em);
    margin-bottom: 1em;
    height: 10em;
    list-style: none;
    position: relative;
    outline: 4px solid white;
    background: #ff9999;
    border-radius: 30%;
    top: 46px;
}

    li:nth-child(1) input {
        filter: hue-rotate(300.9359426417deg) brightness(1.1896971759);
        -webkit-animation-duration: 4.2595833422s;
        animation-duration: 4.2595833422s;
    }

    li:nth-child(2) input {
        filter: hue-rotate(236.3476440125deg) brightness(1.7725461362);
        -webkit-animation-duration: 4.3566819557s;
        animation-duration: 4.3566819557s;
    }

    li:nth-child(3) input {
        filter: hue-rotate(29.2683704212deg) brightness(1.4395999484);
        -webkit-animation-duration: 3.7675509506s;
        animation-duration: 3.7675509506s;
    }

    li:nth-child(4) input {
        filter: hue-rotate(284.5904612379deg) brightness(1.9457164641);
        -webkit-animation-duration: 2.6993973187s;
        animation-duration: 2.6993973187s;
    }

    li:nth-child(5) input {
        filter: hue-rotate(157.4087747048deg) brightness(1.869682724);
        -webkit-animation-duration: 1.8594555128s;
        animation-duration: 0.8594555128s;
    }

    li:nth-child(6) input {
        filter: hue-rotate(72.1934981663deg) brightness(1.9188094465);
        -webkit-animation-duration: 3.0777281876s;
        animation-duration: 3.0777281876s;
    }

    li:nth-child(7) input {
        filter: hue-rotate(109.855787259deg) brightness(1.1363948827);
        -webkit-animation-duration: 4.5374229345s;
        animation-duration: 4.5374229345s;
    }

    li:nth-child(8) input {
        filter: hue-rotate(344.9169774251deg) brightness(1.981350494);
        -webkit-animation-duration: 0.9055831132s;
        animation-duration: 0.9055831132s;
    }

    li:nth-child(9) input {
        filter: hue-rotate(94.7219600308deg) brightness(1.0221299154);
        -webkit-animation-duration: 2.0598504673s;
        animation-duration: 2.0598504673s;
    }

    li:nth-child(10) input {
        filter: hue-rotate(109.855787259deg) brightness(1.1363948827);
        -webkit-animation-duration: 4.5374229345s;
        animation-duration: 4.5374229345s;
    }

    li:nth-child(11) input {
        filter: hue-rotate(94.7219600308deg) brightness(1.0221299154);
        -webkit-animation-duration: 2.0598504673s;
        animation-duration: 2.0598504673s;
    }

    li:nth-child(12) input {
        filter: hue-rotate(344.9169774251deg) brightness(1.981350494);
        -webkit-animation-duration: 2.9055831132s;
        animation-duration: 2.9055831132s;
    }

input[type=checkbox] {
    width: 50px;
    height: 50px;
    position: absolute;
    cursor: crosshair;
    background: radial-gradient(red 10%, white 10%, white 30%, red 30%, red 50%, white 50%, white 80%, red 80%, red 100%);
    border-radius: 50%;
    display: block;
    left: 0;
    right: 0;
    text-align: center;
    margin: 0 auto;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 6px solid red;
    -webkit-animation: hide-target infinite alternate ease-in-out;
    animation: hide-target infinite alternate ease-in-out;
    z-index: 1;
}

    input[type=checkbox]:before {
        content: "";
        display: block;
        background-color: black;
        height: 50%;
        width: 6px;
        position: absolute;
        left: 0;
        right: 0;
        top: calc(100% + 6px);
        margin: 0 auto;
        z-index: -1;
    }

    input[type=checkbox]:focus {
        outline: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
    }

    input[type=checkbox]:checked {
        pointer-events: none;
        filter: grayscale(1) opacity(0.75);
        -webkit-animation: none;
        animation: none;
    }

        input[type=checkbox]:checked:after {
            /*content: "+1!";*/
    padding: 0.5em;
    margin: 1em 0 0 1.5em;
    font-size: 2.5em;
    font-weight: 600;
}

.shield {
    background: #00bfff;
    width: 84%;
    height: 51%;
    left: 0;
    right: 0;
    position: absolute;
    pointer-events: all;
    z-index: 100;
    margin-left: 17px;
    bottom: 18px;
}

@-webkit-keyframes hide-target {
    0% {
        top: 0;
    }

    25% {
        top: 50%;
    }

    100% {
        top: 0;
    }
}

@keyframes hide-target {
    0% {
        top: 0;
    }

    25% {
        top: 50%;
    }

    100% {
        top: 0;
    }
}

.game-over {
    height: 46%;
    width: 22%;
    display: block;
    background: url(../img/Popup-bg.jpg);
    background-size: 297px 300px;
    pointer-events: all;
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 200;
    -webkit-animation: appear 0.25s forwards;
    animation: appear 0.25s forwards;
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
    margin-left: 39%;
    margin-top: 264px;
}

    .game-over h1 {
        color: antiquewhite;
        margin-top: 93px;
        font-size: 28px;
    }


@-webkit-keyframes appear {
    from {
        top: -100vh;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

@keyframes appear {
    from {
        top: -100vh;
        opacity: 0;
    }

    to {
        top: 0;
        opacity: 1;
    }
}

.play-again {
    color: antiquewhite;
    padding: 0.5em 1em;
    font-size: 2.5em;
    font-weight: 700;
}

small a {
    margin-bottom: 2em;
    display: block;
    color: #222;
}

.game {
    color: aliceblue;
    font-size: 27px;
    text-align: center;
}

@media screen and (max-width: 1000px) {
    h2 {
        margin-top: 0;
    }

    .total-count {
        margin-top: 34px;
    }

    .shield {
        margin-left: 8px;
    }

    body {
        background-size: 500px 780px;
    }

    .game-over {
        width: 234px;
        margin-left: 74px;
        background-size: 244px;
    }

        .game-over h1 {
            margin-top: 100px;
        }

    .Game-win {
        background-size: 244px;
    }
}

.Game-win {
    height: 37%;
    display: block;
    background: url(../img/Popup-bg.jpg);
    background-size: 297px 300px;
    pointer-events: all;
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 200;
    margin-left: 25%;
    margin-top: 980px;
}

    .Game-win h1 {
        color: antiquewhite;
        margin-top: 68px;
        font-size: 28px;
    }