body {margin: auto; text-align: center}
#container {
    position: relative;
    font-weight: bold;
     margin-top: 20px;
     width: 360px;
     margin: auto;
     top:20px;
    height: 510px;
}

#how_to_play{
    position: absolute;
    width: 90%;
    top: 30%;
    left:10%;
    transform: translate(10px, -50%);
    background-color: black;
    color: white;
    display: none;
    z-index: 10;
}
/*media query max-screen 600px*/

@media only screen and (max-width: 600px) {
    #how_to_play{
   
        top: 70%;
        left:0%
      
    }
} 



#header {background-color: #808080; font-size: 25px; float: left; width: 100%}
#content {background-color: darkgreen; width: 100%; float: left; height: 380px; font-size: 25px}
#card1, #card2, #card3, #card4, #card5, #card6, #card8, #card9, #card10, #card11, #card12, #card13, #card15, #card16, #card17, #card18, #card19, #card20, #card22, #card23, #card24, #card25, #card26, #card27 {float: left; background-color: white; margin: 10px 0px 0px 10px; width: 40px; height: 50px; border-radius: 5px; line-height: 50px}
#tableCard {clear: left; float: left; width: 96px; line-height: 120px; background-color: white; height: 120px; margin-left: 132px; border-radius: 12px; margin-top: 10px; font-size: 50px}
#card0, #card1, #card2, #card3, #card4, #card5, #card7, #card6, #card8, #card9, #card10, #card11, #card12, #card13 {visibility: hidden}
#deck {float: right; margin-right: 20px; height: 40px; width: 50px; background-color: white; line-height: 40px; border-radius: 5px; margin-top: 50px; font-size: 15px; box-shadow: 0px 8px #808080}
#card0, #card7, #card14, #card21 {float: left; background-color: white; margin: 10px 0px 0px 10px; width: 40px; height: 50px; clear: left; border-radius: 5px; line-height: 50px}
#userMenu {width: 360px; height: 102px; background-color: black; color: white; float: left; clear: left; text-align: left}
button {margin: 10px 0px 0px 10px; font-size: 15px; border-radius: 5px; background-color: #808080; color: white; font-weight: bold}
#result {margin: 10px; text-align: center; font-weight: bold; font-size: 20px}
#counter {font-size: 0px}