.focus-game{
            background-color: #66676b;
            display:flex;
        }

        .crcl {
            width: 80px;
            height: 80px;
            border-radius: 100%;
            position: relative;
            background-image: url("../images/game-icon.png");
            background-size: cover;
            animation: movement;
            cursor:pointer;
        }

        /* To set the positions for the logo
        for the whole animation */
        @keyframes movement {
            0% {
                left: 0px;
                top: 0px
            }

            5% {
                left: 300px;
                top: 200px
            }

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

            15% {
                left: 600px;
                top: 400px
            }

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

            25% {
                left: 600px;
                top: 400px
            }

            30% {
                left: 900px;
                top: 0px
            }

            35% {
                left: 600px;
                top: 200px
            }

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

            45% {
                left: 0px;
                top: 300px
            }

            50% {
                left: 600px;
                top: 200px
            }

            55% {
                left: 1000px;
                top: 200px
            }

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

            65% {
                left: 700px;
                top: 400px
            }

            70% {
                left: 200px;
                top: 400px
            }

            75% {
                left: 700px;
                top: 400px
            }

            80% {
                left: 300px;
                top: 0px
            }

            85% {
                left: 600px;
                top: 200px
            }

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

            95% {
                left: 0px;
                top: 300px
            }

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

        .details {
            width: 100%;
            position: relative;
            background-color: #00B16A;
            color: white;
            display: inline-block;
            text-align: center;
        }

        .details h2, h4{
            color:#fff;
        }

        .ground {
            width: 100%;
            height: 73vh;
            background-color: #66676b;
        }

        .level {
            margin: 5px;
            margin-top: 15px;
        }

        .display_score {
            margin-top: 15px;
        }

        button {
            border-radius: 20px;
            width: 5em;
            height: 3em;
            font-size: 18px;
            border: 2px solid white;
            background: transparent;
            color: white;
            margin: 5px;
            cursor: pointer;
        }

        button:hover {
            background-color: white;
            color: rgb(6, 148, 25);
            box-shadow: 0px 3px 0px 3px white;
            transition-duration: 1s;
        }
        .restart{
            margin-top:10px;
        }

@media only screen and (max-width: 767px){
    .topbel{
        margin-top: -25px;
    }
    .ground {
            width: 100%;
            height: 56vh;
    }
    .details h2{
        font-size:13px;
    }
    .crcl {
            width: 50px;
            height: 50px;
        }
    button {
            border-radius: 10px;
            width: 5em;
            height: 3em;
            font-size: 13px;
    }
   /* To set the positions for the logo
        for the whole animation */
    @keyframes movement {
            0% {
                left: 0px;
                top: 0px
            }

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

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

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

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

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

            30% {
                left: 200px;
                top: 0px
            }

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

            40% {
                left: 250px;
                top: 300px
            }

            45% {
                left: 0px;
                top: 200px
            }

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

            55% {
                left: 10px;
                top: 200px
            }

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

            65% {
                left: 120px;
                top: 220px
            }

            70% {
                left: 120px;
                top: 280px
            }

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

            80% {
                left: 10px;
                top: 0px
            }

            85% {
                left: 180px;
                top: 30px
            }

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

            95% {
                left: 10px;
                top: 200px
            }

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