html{
    font-size:24px;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    color:white;
    height:100%;
}

body{
    margin:0;
    padding:0;
    background-color:black;
    position:relative;

    display:flex;
    flex-direction:column;

    
    min-height:100%;
    width:100%;
    min-width:1000px;
    /* align-items:stretch; */
}

header{
    padding:10px 40px;
    
    background-color:rgb(36, 36, 36);

    display:flex;
    justify-content:space-between;
    align-items:center;
}

header h1{
   white-space: nowrap;
}

main{
    margin:40px;
    flex:2;
    
    display:grid;
    grid-template-columns: 240px 1fr 215px;
    grid-template-rows:auto;
    grid-template-areas:
    "list game hints"
    "key key key";
}

#words_list{
    grid-area:list;
    max-height:450px;
    overflow-y:scroll;
    overflow-x:hidden;


}

#words_list h2{
    font-size: 1.4em;
    white-space: nowrap;
}

#game-board{
    grid-area:game;
    margin: 0 auto;
    margin-bottom: 20px;
    position:relative;
}
#hints{
    grid-area:hints;
}
#keyboard{
    grid-area:key;
}

footer{
    padding:8px 40px;
    background-color:rgb(36, 36, 36);
}

a{
    text-decoration: none;
    color:white;
}

nav {
    display:flex;
    align-items:baseline;
}

nav * {
    margin: 8px;
    padding: 8px;
}

#nav-button-wrapper{
    min-width:350px;
}

#nav-link-wrapper{
    min-width:235px;
}

nav button {
    width:auto;
    font:inherit;
    color: inherit;
    background: transparent;
    line-height:normal;
    text-align:inherit;
    border: 3px solid crimson;

    border-radius: 8px;
    outline:none;
}

button:hover{
    cursor:pointer;
}

nav button.active {
    border-color:green;
}

#available_words {
    list-style: none;
    line-height: 2em;
    padding-left:0;
}

#available_words li{
    width: 30%;
    display: inline-block;
}

#available_words li:hover{
    cursor:pointer;
}

#keyboard {
    border-top: 1px solid gray;
    padding: 20px;
    max-height: 250px;
    /* background-color:darkcyan; */
    justify-content: center;
    
}

.key{
    font:inherit;
    color: inherit;
    background: transparent;
    line-height:normal;
    border: 1px solid gray;

    font-size:1.2em;
    padding:8px;
    min-width: 60px;
    min-height: 60px;
    margin: 10px;

    border-radius: 8px;
    outline:none;
}

button.key:hover{
    background-color: rgba(255,255,255,.2);
}

#keys-wrapper{
    /* background-color:cadetblue; */

}
.key-row{
    display:flex;
    justify-content:center;
}

#game-board table{
    empty-cells:show;
}

#game-board tr{
    min-height:60px;
}

#game-board td{
    width:60px;
    height:60px;
    padding:8px;
    margin:10px;

    border: 1px solid white;
    border-radius: 8px;

    text-align:center;
    font-size:1.5em;
    font-weight:bold;

}

.enter-warn {
    color: crimson;
    border-color: crimson;
    border-width: 2px;
}
.enter-gold {
    color: goldenrod;
    border-color: goldenrod;
    border-width: 2px;
}
.enter-good {
    color: green;
    border-color: green;
    border-width: 2px;
}

.good{
    color:green;
}
.gold{
    color:goldenrod;
}
.warn{
    color:crimson;
}

.enterprompt {
    position:absolute;
    font-size:2.6em;
    animation-duration: 2s;
    animation-name: wiggle;
    animation-iteration-count: infinite; 
    animation-timing-function: ease;
}

@keyframes wiggle {
    from {
        transform: translate(0px);
    }

    50% {
        transform: translate(20px);
    }
    to {
        transform: translate(0px);
    }
}

#loading {
    font-size:4em;
    animation: spin 4s infinite linear;
}

@keyframes spin {
    from {transform:rotate(0deg);}
    to {transform:rotate(360deg);}
}

.colorWrapper{
    position:absolute;
    left:-25px;
    margin-top:12px;
}

.colorBlock{
    width:20px;
    height:20px;
}

.noclick{
    cursor:default;
}
.codeGreen{
    background-color:green;
    cursor:pointer;
}

.codeGold{
    background-color:goldenrod;
    cursor:pointer;
}

.codeGray{
    
    background-color:rgb(60, 60, 60);
    cursor:pointer;
}


#hints {
    text-align: center;
}

#hints button{
    width:auto;
    font:inherit;
    color: inherit;
    background: transparent;
    line-height:normal;
    text-align:inherit;
    border: 2px solid goldenrod;

    padding: 8px;
    border-radius: 4px;
    outline:none;
}

#suggestion {
    font-size: 2.8em;
    line-height: 0;
}

#expected{
    font-size: 1.5em;
    color:lightgray;
    line-height: 0;
}

#color-explain-wrapper{
    text-align:left;
}
.hide{
    display:none;
}

#hidden-type{
    display:hidden;
    position:absolute;
    border:none;
    outline:none;
    background-color:transparent;
    color:transparent;
    z-index:-10;
    width:100%;
    height:100%;
}

#explain{
    position:absolute;
    background-color:black;
    border: 4px solid green;
    border-radius: 15px;
    margin:5%;
    padding: 5%;
}

#lightbox{
    position:absolute;
    width:100%;
    height:100%;
    background-color:rgba(0,0,0,.7);
}
#explain-quit{
    position:absolute;
    right: 5%;
    top: 0;
    font-size: 2em;
}

#explain-quit:hover{
    color:crimson;
    cursor:pointer;
}

@media screen and (max-width: 1000px){
    body{
        min-width:450px;
    }

    header{
        flex-direction:column;
    }

    main{
        padding:40px 0px;
        margin:0;

        display:grid;
        grid-template-columns: auto;
        grid-template-rows:400px 500px 1fr 1fr;
        grid-template-areas:
            "hints"
            "game"
            "key"
            "list";
    }

    #hints h2{
        padding:0;
        margin:0;
    }
    #color-explain-wrapper{
        text-align:center;
    }
    #words_list{
        text-align:center;
    }


    .key{
        font-size:5vw;
        min-width:5%;
        margin:1%;
    }
}

@media screen and (max-width: 700px){
    header nav{
        flex-direction:column;
        align-items:center;
    }
}