.letter {
    width:66px;
    height:30px;
    border:1px solid black;
    border-radius:4px;
    display:inline-block;
    margin-bottom:8px;
    text-align:center;
    color:black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
    padding:15px 0px;
    font-weight:bold;
    margin-left:6px;
    margin-right:6px;
}
#keyboardrow3, #keyboardrow2, #keyboardrow1, #keyboardrow0{
    width:100%;
    text-align:center;
}
button{
    border:1px black solid;
}
.key{
    width:20px;
    height:20px;
    border:1px solid black;
    border-radius:4px;
    display:inline-block;
    margin:2px 0px;
    text-align:center;
    color:black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    padding:5px;
    font-weight:bold;
    cursor: pointer;
}
.keylong{
    width:65px;
    height:20px;
    border:1px solid black;
    border-radius:4px;
    display:inline-block;
    margin:2px 0px;
    text-align:center;
    color:black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:16px;
    padding:5px;
    font-weight:bold;
    cursor: pointer;
}
.hide {
    display: none;
  }
      
#popup, #popup2{
    font-family:Arial, Helvetica, sans-serif;
    position:absolute;
    top:40px;
    width:300px;
    padding:20px;
    margin-left: calc(50% - 180px);
    background-color:rgba(255, 255, 255,0.9);
    border-radius:10px;
    border:1px solid grey;
    z-index:1000;
    font-size:20px;
    text-align:center;
}
#instructioncontainer{
    z-index:1001;
    height:25px;
}
a {
    font-family:Arial, Helvetica, sans-serif;
    /* position:absolute; */
    width:80px;
    text-align:center;
    border-radius:4px;
    background-color:grey;
    padding:5px;
    color:white;
    margin-bottom:0px;
    
    margin-left: calc(50% - 45px);
    /* z-index:1001; */
}
#green,#orange,#black{
    height:20px;
    width:20px;
    padding:3px;
    border:1px solid black;
    color:white;
    font-weight:bold;
    font-family:Arial, Helvetica, sans-serif;
    border-radius:3px;
}
#pickwordlength{
    font-size:23px;
    font-weight:bold;
    color:blue;
    border:0px;
    border-bottom:1px solid black;
}
#startgame{
    font-size:20px;
    background-color:green;
    color:white;
    font-weight:bold;
}
#hiddenmobiletext{
    display:hidden;
}
#green{
    background-color:green;
}
#orange{
    background-color:orange;
}
#black{
    background-color:black;
}
.upcoming{
    border:1px solid rgb(167, 167, 167);
}
.rowshrink {
    transform: scale(0.98); /* Equal to scaleX(0.7) scaleY(0.7) */
    transition: width 2s;
    /* background-color: pink; */
}
#notword{
    /* width:100%; */
    padding:5px;
    text-align:center;
    position:absolute;
    top:10px;
    font-weight:bold;
    background-color:rgb(124, 124, 124);
    border-radius:3px;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    /* left:50%; */
    margin-left: calc(50% - 55px);;
    width:100px;
    /* margin:; */

}
.none{
    background-color:black;
    color:white;
}
.place{
    background-color:orange;
    color:white;
}
.correct{
    background-color:green;
    color:white;
}

#gamecontainer, #playagain{
    width:100%;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
}
.row{
    position:relative;
    transition:transform .7s;
}
@media only screen and (max-width: 600px) {
    .letter {
        width:56px;
        height:30px;
        font-size:26px;
        margin-left:3px;
        margin-right:3px;
    }
}


@media only screen and (max-width: 500px) {
    .letter {
        width:50px;
        height:24px;
        font-size:22px;
        padding:10px 0px;
        margin-left:2px;
        margin-right:2px;
    }
}

@media only screen and (max-width: 420px) {
    .letter {
        width:12%;
        height:24px;
        font-size:22px;
        padding:10px 0px;
        margin-left:2px;
        margin-right:2px;
    }
    .key{
        width:14px;
        margin:2px 0px;
    }
    #popup, #popup2{
        width:260px;
        padding:20px;
        margin-left: calc(50% - 160px);
        font-size:16px;
    }
    
}