body{
    /* background-color: rgb(57, 56, 56); */
} 
.rack{
    width:400px;
    background-color: #f7e2c1;
    
    background-image: url('birch-texture-light.png');
    /* background-size: contain; */
    background-size: cover;
    border: 1px solid rgba(0, 0, 0, 0.16);
    height:60px;
    margin:1px;
    margin-left:50px;
    display:flex;
    justify-content: start;
    
    box-shadow: 0 1.125mm 0.75mm -0.5mm rgba(0, 0, 0, 0.4);
    border-style: solid;
    border-top-width: 0.75mm;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1.125mm;
    border-top-color: rgba(255, 255, 255, 0.55);
    border-left-color: rgba(255, 255, 255, 0.35);
    border-right-color: rgba(0, 0, 0, 0.25);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    border-radius: 0.75mm;
}
#scoreboard{
    width:100%;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:20px;
}
#scoreval{
    font-weight:bold;
}
.score{
    box-sizing: border-box;
    /* background-color:lightblue; */
    align-content: center;
    display:inline-block;
    border-bottom:1px black solid;
    bottom:5px;
    width:25px;
    height:55px;
    padding:20px 0px 7px 0px;
    margin-left:10px;
    font-size: 20px;
    color: black;
}
.letter {
    box-sizing: border-box;
    width:1%;
    max-width:50px;
    height:45px;
    border:1px solid black;
    border-radius:4px;
    display:inline-block;
    margin-bottom:5px;
    text-align:center;
    color:black;
    font-family:Arial, Helvetica, sans-serif;
    font-size:26px;
    padding:7px 0px;
    font-weight:bold;
    margin-left:2px;
    margin-right:2px;
}
#board1 {
    width:100%;
    max-width:500px;
    /* height:400px; */
}

.letternarrow{
    width:45px;
    margin-left:2px;
    margin-right:2px;
}
#numberbar{
    display:flex;
    justify-content: center; 
}
.numbertab{
    /* justify-content:center; */
    width:12%;
    border:1px solid black;
    cursor: pointer;
}
#keyboard{
    position:relative;
}
#keyboardrow3, #keyboardrow2, #keyboardrow1, #keyboardrow0{
    width:100%;
    text-align:center;
    
}
button{
    border:1px black solid;
}
.solution{
    font-weight:bold;
}

.key{
    /* width:25px;
    height:25px; */
    border:1px solid black;
    border-radius:3px;
    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;
    position:relative;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.klabel{
    width:100%;
    z-index:101;
    position:relative;
    
}
.k1,.k2,.k3{
    position:absolute;
    top:0px;
    width:33.33%;
    height:100%;
    z-index:100;
    border:0px;
}
.k1{
    left:0px;
    border-radius:3px 0px 0px 3px;
    
}
.k2{
    left:33.33%;
    /* border-left:0.1px solid lightgrey; */
}
.k3{
    left:66.66%;
    border-radius:0px 3px 3px 0px;
    /* border-left:0.1px solid lightgrey; */
}
.keylong{
    background-color: #f5cf90;
    background-image: url('birch-texture-light.png');
    width:65px;
    height:25px;
    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;
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */
}
.hide {
    display: none;
  }
#continuebutton{
    font-size:20px;
    border-radius:4px;
    font-weight:bold;
    color:white;
    /* background-color:rgb(0, 124, 0) */
    background-color: #f5cf90;
    background-image: url('birch-texture-light.png');
}   
.popup{
    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:18px;
    text-align:center;
}
.popuptxt{
    font-size:16px;
}
/* #endgame{
    position:absolute;
    top:4px;
    background-color:rgba(255, 255, 255,0.95);
} */
#iconcontainer{
    z-index:1001;
    /* height:45px; */
    display:flex;
    justify-content:center;
    margin-bottom:2px;
}
#statsmessage{
    font-size:12px;
    display:flex;
}
.guesscontainer{
    width:100%;
    text-align:left;
    display:flex;
    justify-content:flex-start;
    font-size:14px;
    padding:1px 0px;
    
}
.guessbar{
    background-color: grey;
    text-align:right;
    padding:0px 5px;
    color:white;
    margin-left:7px;
}
.hlguessbar{
    background-color:green;
}
.statblock{
    margin-top:10px;
    justify-content: space-around;
    width:20%;
    padding:4px;
}
.statnum{
    font-size:25px;
    font-weight:bold;
    
}
.highlight{
    background-color:rgb(0, 87, 47);
    color:white;
}

.topicon, a {
    font-family:Arial, Helvetica, sans-serif;
    
    text-align:center;
    border-radius:4px;
    margin:0px 2px;
    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; */
    background-color: #f5cf90;
    background-image: url('birch-texture-light.png');
    color:black;
    font-weight:bold;
}

#close{
    font-weight:bold;
    font-size:18px;
    background-color:white;
    border:1px solid gray;
    padding:4px;
    height:30px;
    width:30px;
    border-radius:9px;
}
#challengegame, #playagain, #share, .back, #showstats{
    font-size:14px;
    background-color: #f5cf90;
    background-image: url('birch-texture-light.png');
    color:black;
    font-weight:bold;
    border:1px solid grey;
}
#hiddenmobiletext{
    display:hidden;
}
#green{
    background-color:rgb(0, 124, 0);
}
#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; */
}
#sharearea{
    width:80%;
    height:220px;
}
.row1, .row2, .row3, .row4, .row5, .row6, .row7, .row8{
    position:relative;
    display:flex;
    margin:0px;
    /* height:50px; */
}
.solved{
    color:green;
} 
.unsolved{
    color: red;
    font-size:24px;
}
.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;
    z-index:500;
    /* margin:; */

}


#gamecontainer, #continue{
    width:100%;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
}
#gamecontainer{
    display:flex;
    justify-content:center;
}
.row{
    position:relative;
    transition:transform .7s;
}
#linktxt{
    width:80%;
    height:89px;
}
.title{
    width: 100%;
    display:flex;
    justify-content: center;
}
.title .tile{
    width: 10mm;
    height: 10mm;
}
.title .tile[data-letter]::before {
    font-size:6mm;
}
.title .tile[data-letter]::after {
    font-size:2mm;
}
.rack .tile{
    margin:0px 2.5%;
}
.key .tile{
    width: 10mm;
    height: 10mm;
    margin:0px;
    padding:0px;
}
.key .tile[data-letter]::before {
    font-size:6mm;
}
.key .tile[data-letter]::after {
    font-size:3mm;
}

.tile {
    margin: 0.5mm;
    background-color: #f5cf90;
    background-image: url('birch-texture-light.png');
    position: relative;
    width: 15mm;
    height: 15mm;
    box-sizing: border-box;
    box-shadow: 0 1.125mm 0.75mm -0.5mm rgba(0, 0, 0, 0.4);
    border-style: solid;
    border-top-width: 0.75mm;
    border-left-width: 1px;
    border-right-width: 1px;
    border-bottom-width: 1.125mm;
    border-top-color: rgba(255, 255, 255, 0.55);
    border-left-color: rgba(255, 255, 255, 0.35);
    border-right-color: rgba(0, 0, 0, 0.25);
    border-bottom-color: rgba(0, 0, 0, 0.4);
    border-radius: 0.75mm;
    
  }
  .tile[data-letter]::before {
    content: attr(data-letter);
    text-transform: uppercase;
    font-family: Oswald, sans-serif;
    font-size: 9.3mm;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: rgba(0, 0, 0, 0.6);
    text-shadow: 4px 4px 6px #f5cf90, 0 0 0 rgba(0, 0, 0, 0.7), 1px 2px 1px rgba(255, 255, 255, 0.5);
  }
  .tile[data-letter]::after {
    color: rgba(0, 0, 0, 0.7);
    font-family: sans-serif;
    font-size: 4.275mm;
    position: absolute;
    right: 12.5%;
    bottom: 12.5%;
    transform: translate(50%, 50%);
  }
  .tile[data-letter='e']::after,
  .tile[data-letter='a']::after,
  .tile[data-letter='i']::after,
  .tile[data-letter='o']::after,
  .tile[data-letter='n']::after,
  .tile[data-letter='r']::after,
  .tile[data-letter='t']::after,
  .tile[data-letter='l']::after,
  .tile[data-letter='s']::after,
  .tile[data-letter='u']::after {
    content: "1";
  }
  .tile[data-letter='d']::after,
  .tile[data-letter='g']::after {
    content: "2";
  }
  .tile[data-letter='b']::after,
  .tile[data-letter='c']::after,
  .tile[data-letter='m']::after,
  .tile[data-letter='p']::after {
    content: "3";
  }
  .tile[data-letter='f']::after,
  .tile[data-letter='h']::after,
  .tile[data-letter='v']::after,
  .tile[data-letter='w']::after,
  .tile[data-letter='y']::after {
    content: "4";
  }
  .tile[data-letter='k']::after {
    content: "5";
  }
  .tile[data-letter='j']::after,
  .tile[data-letter='x']::after {
    content: "8";
  }
  .tile[data-letter='q']::after,
  .tile[data-letter='z']::after {
    content: "10";
  }  

  .grid {
    width: 15.2mm;
    height: 15.2mm;
    margin:0px;
    border:1px white solid;
    margin-right:1px;
    margin-bottom:1px;
  }

  /* .tile .place{
    border:3px orange solid;
    color:orange;
}
.tile .correct{
    border:3px green solid;
    color:green;
}
.tile .none{
    border:3px black solid;
    color:black;
} */

.none{
    background-color:black;
    color:white;
    z-index:100;
}
.place{
    background-color:orange;
    color:white;
    z-index:100;
}
.correct{
    background-color:rgba(0, 124, 0,1);
    color:white;
    z-index:100;
}

.tile.none{
    background-color:rgba(0, 0, 0,0.8);
    /* color:black;  */
    /* border-top:black 6px solid; */
    z-index:100;
}
.tile.place{
    background-color:rgba(255, 165, 0,1);
    /* color:rgb(255, 165,0); */
    /* border-top:orange 6px solid; */
    z-index:100;
}
.tile.correct{
    background-color:rgba(0, 124, 0,0.7);
    /* color:rgb(0, 124, 0); */
    /* border-top:rgb(0, 124, 0) 6px solid; */
    z-index:100;
}

@media only screen and (max-width: 700px) {
    .letter {
        width:17%;
        height:43px;
       font-size:23px;
    }
    .letternarrow{
        width:7%;
        margin-left:1px;
        margin-right:1px;
    }
}


@media only screen and (max-width: 500px) {
    .letter {
        
        font-size:20px;
        height:40px;
    }
    .letternarrow{
        width:6%;
        margin-left:1px;
        margin-right:1px;
    }
}

@media only screen and (max-width: 450px) {
    .letter {
        width:18%;
        height:33px;
        font-size:18px;
        padding:4px 0px;
        margin-left:1px;
        margin-right:0px;
    }
    .letternarrow{
        width:6.5%;
        margin-left:1px;
        margin-right:1px;
    }
    #keyboardrow3, #keyboardrow2, #keyboardrow1{
        display:flex;
        justify-content:center;
    }
    .key{
        box-sizing: border-box;
        width:8.8%;
        margin:2px 1px;
        height:45px;
        flex: 1;
        position:relative;
        
    }
    
    
    .keylong{
        width:33%;
        height:28px;
    }
    .popup{
        width:260px;
        padding:20px;
        margin-left: calc(50% - 160px);
        font-size:16px;
    }
    

      .key .tile{
        width: 100%;
        height: 100%;
        margin:0px;
        padding:0px;
    }
    .key .tile[data-letter]::before {
        font-size:5.5mm;
    }
    .key .tile[data-letter]::after {
        font-size:2.8mm;
    }

    .rack .tile{
        margin:2px 2px;
        width:18%;
        height:10mm;
        /* height:10mm; */
        aspect-ratio: 1 / 1;
    }

    .rack .tile[data-letter]::before {
        font-size:7.5mm;
    }
    .rack .tile[data-letter]::after {
        font-size:4.8mm;
    }
    .rack{
        height:14mm;
        margin-left:30px;
        /* opacity:0.5; */
    }
    #continue{
        position:absolute;
        bottom:0px;
        padding:85px 0px;
        background-color:rgba(255,255,255,0.8);
        z-index:1002; 
    }
}

@media (prefers-color-scheme: dark) {
   body{
    background-color: rgb(57, 56, 56);
   }
   .key, .keylong{
        color:white;
        background-color:rgb(57, 56, 56);
        border:1px solid grey;
    }
    .letter{
        color:white;
        border-color:white;
    }
    .upcoming{
        border:1px solid rgb(106, 106, 106);
    }
    .popup{
        background-color:rgb(57, 56, 56);
        color:white;
    }
    .score{
        color:white;
        border-bottom:1px rgb(206, 199, 199) solid;
    }
    #scoreboard{
        color:white;
    }
   
}

/* @media (prefers-color-scheme: dark) {
    .key, .keylong{
        color:white;
        background-color:black;
        border:1px solid grey;
    }
    body{
        background-color:black;
    }
    .letter{
        color:white;
        border-color:white;
    }
    .none{
        background-color:rgb(75, 75, 75);
    }
  } */