body {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr 1fr;
    text-align: center;
    background-color: rgb(155, 210, 210);
}

.title {
    position: relative; /* Ensure relative positioning for child elements */
}


h1 {
    background: #dfefff;
    box-shadow: 0px 0px 0px 5px #dfefff;
    border: dashed 2px white;
    padding: 0.2em 0.5em;
    color: rgb(137, 134, 134);
}


#popupMsgBtn {
    width: 70px;
    height: 50px;
    position: absolute;
    top: 0;
    right: 0;
    color: crimson;
}


.field{
    font-size: 50px;
    text-align: center;
    
}
section{
    grid-area: 2/1/3/2;
    /* width:100%; */
    height:auto;
    
   

}
#game{
    display: flex;
    flex-direction: column;
    align-items: center; 
    grid-template-columns:1fr;
    grid-template-rows: repeat(6,80px);
    gap: 5px;
    font-family:Courier;
    color: rgb(41, 37, 37); 
}


#F1{
    display: flex;
    gap: 5px;
}
#F2{
    display: flex;
    gap: 5px;
} 
#F3{
    display:flex;
    gap: 5px;
}
#F4{
    display: flex;
    gap: 5px;
}
#F5{
    display: flex;
    gap: 5px;
}
#F6{
    display:flex;
    gap: 5px;
}

.fieldBox{
    line-height: 80px;
    /* inside of box letter in center.  Text align, place-item and justify didn't work*/
}
.field{
    width:80px;
    height: 80px;
    gap: 5px;
    background-color: aliceblue;
    /* text-align: center;
    place-self: center; */
    text-size-adjust: auto;
    margin: 0 auto;
    border-radius: 50%;  /* make the box shape round */
    }

#keyboard {
    grid-area: 3/1/4/2;
    margin: 1rem 0;
    width:auto;
    height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    
    #keyboard div {
    display: flex;
    }
    
    #row-1{
    margin: 0.5rem 0;
    }
    
    .key {
    color: rgb(41, 37, 37); 
    text-shadow: #9beaf4 1px 0 10px; 
    font-family:Courier;;    
    width: auto;
    height: 50px;   
    font-size: 2rem;
    font-weight: 700;
    padding: 0.5rem;
    margin: 0 2px;
    cursor: pointer; /* click the key button cursor change to pointing mark */
    }


   .green{
    background-color: rgb(83, 167, 83);
   } 
   .yellow{
    background-color: rgb(239, 239, 114);
   }
   .grey{
    background-color: grey;
   }

#gameInfo {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 80%;
    height: auto;
    padding: 7px;
    border: 7px solid orange;
    background-color: white; /* Change this to your desired opaque color */
    opacity: 1; /* Set opacity to fully opaque */
}

img {
    width:auto;
    height: 50px;
}