body {
    min-height: 300px;
    background-image: url("../image/GameBG.jpg");
}

.clr {
    clear: both;
}

.dis {
    display: none;
}

.winpopup {
    margin-top: -146px;
    margin-left: 250px;
    width: 157px;
}

#finalresult {
    margin-top: -77px;
    position: absolute;
    text-align: center;
    margin-left: 267px;
    font-size: 23px;
    font-family: monospace;
}

.winmsg {
    margin-top: -164px;
    position: absolute;
    margin-left: 290px;
    color: floralwhite;
}

.losemsg {
    margin-top: -164px;
    position: absolute;
    margin-left: 290px;
    color: floralwhite;
}

.game {
    min-height: 200px;
    max-width: 100%;
    padding-bottom: 10px;
    background-color: white;
    margin-top: 75px;
    border-radius: 10px;
    box-shadow: 1px 1px 10px #d9e7ff;
}
    .game .start {
        min-height: 300px;
        position: relative;
    }

        .game .start img {
            max-width: 100%;
            margin-left: 68px;
        }

        .game .start .con-name {
            position: absolute;
            top: 50%;
            left: 48%;
            margin-left: -125px;
        }
            .game .start .con-name h5 {
                font-size: 3rem;
                background: -webkit-linear-gradient(#DC5D88, #d9e7ff);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
            }

            .game .start .con-name .btn {
                padding: 4px 24px;
                background-color: chocolate;
                color: black;
                outline: none;
                font-weight: bold;
                transition: all ease-in-out 0.5s;
                margin-top: -105px;
                margin-left: 85px;
                font-size: 27px;
                box-shadow: 15px 11px;
                font-family: monospace;
                border-radius: 15px;
            }
                .game .start .con-name .btn:hover {
                    background-color: rgba(227,238,26);
                    color: red;
                }

@media only screen and (max-width: 600px) {

    .game .start .con-name {
        top: 42%;
        left: 46%;
    }

    .game {
        /*margin-top: 200px; */
    }
}

@media only screen and (max-width: 1500px) {
    .game {
        /* margin-top: 200px; */
    }
}

@media only screen and (max-width: 500px) {
    .game .start .con-name {
        top: 43%;
        left: 46%;
    }
}

.game .inst {
    min-height: 300px;
    position: relative;
    padding: 40px 20px;
    padding-bottom: 20px;
    display: none;
}
    .game .inst h5 {
        font-size: 3rem;
        color: black;
        letter-spacing: 3px;
        margin-bottom: 30px;
        font-weight: bold;
        text-align: center;
    }

    .game .inst p {
        color: black;
        text-align: justify;
        font-weight: bold;
        margin-bottom: 30px;
        font-size: 1.7rem;
        letter-spacing: 2px;
        font-family: monospace;
    }

    .game .inst img {
        max-width: 34%;
        margin-bottom: 30px;
    }

    .game .inst .btn {
        padding: 4px 24px;
        background-color: chocolate;
        color: black;
        outline: none;
        font-weight: bold;
        transition: all ease-in-out 0.5s;
        font-size: 27px;
        box-shadow: 15px 11px;
        font-family: monospace;
        border-radius: 15px;
    }

        .game .inst .btn:hover {
            background-color: rgba(227,238,26);
            color: red;
        }

.game .con-game {
    min-height: 100px;
    position: relative;
    padding-bottom: 30px;
    display: none;
}

    .game .con-game .scoring {
        margin-bottom: 70px;
        padding: 40px 20px;
    }

        .game .con-game .scoring .you {
            float: left;
        }

        .game .con-game .scoring .robot {
            float: right;
        }

            .game .con-game .scoring .you span, .game .con-game .scoring .robot span {
                color: black;
                font-size: 22px;
                position: relative;
                padding: 4px;
                font-weight: bold;
            }

            .game .con-game .scoring .you .yourscor, .game .con-game .scoring .robot .robotscor {
                font-size: 5rem;
                color: chocolate;
                top: 7px;
                left: 2px;
                font-family: monospace;
            }

    .game .con-game .con-hands {
        min-height: 100px;
    }

        .game .con-game .con-hands li {
            cursor: pointer;
            margin-left: 20px;
        }

        .game .con-game .con-hands img {
            max-width: 100%;
        }

        .game .con-game .con-hands h5 {
            margin-bottom: 30px;
            font-size: 2.3rem;
            color: black;
            font-family: monospace;
            letter-spacing: 2px;
            font-weight: bold;
        }

    .game .con-game .con-one-result {
        display: none;
    }

        .game .con-game .con-one-result .con-user-image {
            float: left;
        }

        .game .con-game .con-one-result .con-robot-image {
            float: right;
        }

            .game .con-game .con-one-result .con-user-image img, .game .con-game .con-one-result .con-robot-image img {
                max-width: 100%;
            }

        .game .con-game .con-one-result p {
            font-weight: bold;
            font-size: 3rem;
        }

    .game .con-game .con-final-result {
        display: none;
    }

        .game .con-game .con-final-result h5 {
            color: #DC5D88;
            font-size: 2.5rem;
            font-weight: bold;
        }

        .game .con-game .con-final-result p {
            font-size: 28px;
            font-weight: bold;
        }

        .game .con-game .con-final-result h6 {
            padding-left: 10px;
            text-decoration: underline;
            color: floralwhite;
            font-size: 23px;
            cursor: pointer;
            font-family: monospace;
            font-weight: bold;
            width: 71px;
            margin-left: 281px;
            margin-top: -71px;
        }

#playPauseBTN {
    width: 54px;
    height: 40px;
    cursor: pointer;
    margin-left: 35px;
    margin-top: -27px;
    position: absolute;
}

#rst {
    width: 54px;
    height: 40px;
    cursor: pointer;
    margin-left: 565px;
    margin-top: -28px;
    position: absolute;
}

        @media screen and (max-width:1100px){
            .game .start .con-name .btn {
                margin-left: 219px;
                margin-top: -85px;
            }

            .game .start {
                width: 315px;
            }

            .game .inst h5 {
                margin-top: -32px;
            }

            .imgpopup {
                margin-top: 20px;
                height: 313px;
            }

            .game .start img {
                margin-left: 149px;
            }

            .winpopup {
                margin-top: -124px;
                width: 209px;
                margin-left: 212px;
            }
            .game .con-game .con-final-result h6 {
                margin-left: 251px;
                margin-top: -85px;
                font-size: 33px;
            }

            .winmsg {
                margin-left: 278px;
                margin-top: -196px;
                font-size: 35px;
                position: absolute;
            }

            .losemsg {
                margin-left: 282px;
                margin-top: -196px;
                font-size: 35px;
                position: absolute;
            }

            #finalresult {
                margin-top: -19px;
                margin-left: 230px;
                font-size: 29px;
            }

            #playPauseBTN {
                margin-left: 25px;
                margin-top: -48px;
                width: 69px;
                height: 48px;
            }

            #rst {
                margin-left: 558px;
                margin-top: -55px;
                width: 89px;
                height: 51px;
            }
        }