*{
    font-family: "Sono", 'Courier New', Courier, monospace;
    font-optical-sizing: auto;
    font-variation-settings: "MONO" 1;
    scrollbar-width: thin;
    scrollbar-color: var(--theme-background-element) transparent;
}
:root {
    --theme-background-base:white;
    --theme-background-keyboard:#eee;
    --theme-background-element:#bbb;
    --theme-background-hover:#999;
    --theme-color-base:#222;
    --theme-color-hover:black;
    --theme-background-hint-correct:#4A4;
    --theme-background-hint-hasletter:#AA4;
    --theme-background-hint-incorrect:#444;
    --theme-color-hint-incorrect:#AAA;
}
body {
    overflow-x: hidden;
    background: var(--theme-background-base);
    color:var(--theme-color-base);
    margin:0;
}
button {
    background-color: var(--theme-background-element);
    color: var(--theme-color-base);
}
button:hover {
    background-color: var(--theme-background-hover);
    color: var(--theme-color-hover);
    cursor: pointer;
}
.dialogModal {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    height: 100%;
    z-index:999;
}
.dialogModalActive {
    background-color:rgba(0, 0, 0, 0.397);
}
.dialogContainer{
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,0.5);
}
.dialogBox {
    width: 600px;
    height: 600px;
    max-height: 100%;
    background: var(--theme-background-base);
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
}
.dialogBody {
    flex-grow: 2;
    overflow-y:auto;
}
.mainMenuContainer {
    margin: 10px;
    text-align: center;
}
.statusContainer {
    display: flex;
    flex-flow: column;
}
.stat {
    display: flex;
    justify-content: space-between;
    font-size: 14pt;
    padding: 5px;
}
.stat:nth-child(2n+1) {
    background-color: var(--theme-background-element);
}
.stat span:first-child {
    font-weight: bold;
}
.difficultyButton {
    border: none;
    padding: 15px;
    font-size: 24pt;
    border-radius: 30pt;
    margin: 5px;
    font-weight:bold;
}
.smallButton {
    border: none;
    padding: 5px;
    font-size: 16pt;
    border-radius: 30pt;
    margin: 5px;
    font-weight: bold;
}
.howtoplay{
    text-align: left;
}
.keyboardConatiner {
    position: fixed;
    bottom:0;
    background: var(--theme-background-keyboard);
    padding: 15px 7px;
    border-radius: 10px 10px 0px 0px;
    bottom: 0;
    z-index: 1;
    box-shadow: #0007 0 0 10px;
}
.keyboardHeader {
    display: flex;
    justify-content: space-between;
}
.keyboardRow {
    display: flex;
    justify-content: center;
}
/* .guessContainer {
    display: flex;
    justify-content: center;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100;
    background: var(--theme-background-base);
    padding: 2px 0;
}
*/
.guessLetter {
    background-color: var(--theme-background-element);
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 10px;
    margin: 1px;
    text-align: center;
    font-weight: 500;
    user-select: none;
    position: relative;
} 
.guessContainer {
    display: grid;
    width: 100%;
    max-width: 600px;
    margin: auto;
    position: sticky;
    z-index:100;
    top:0px;
    transform: translate(0,0);
    font-size:92pt;
    grid: "a a a a a" 1em;
    container: guesscontainer / size;
    background-color: var(--theme-background-base);
    height:120px;
}
.version {
    display: inline-block;
    cursor: pointer;
    font-size: 10pt;
}
.version:hover {
    text-decoration: underline;
}
@media screen and (max-width:600px) {
    .guessContainer {
        width:100vw;
        height:20vw;
    }
    .guessLetter {
        width: calc(20vw-2px);
        height: 20vw;
        font-size:20vw;
    }
}
/* @container guesscontainer (max-width:600px) {
    .guessContainer {
        height: 20cqi;
    }
    .guessLetter {
        width: 20cqi;
        height: 20cqi;
        font-size:17cqi;
    }
} */
.unusedLettersContainer{
    display: flex;
    justify-content: center;
}
.gamesContainer {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    /* padding-top: 130px; */
    padding-bottom: 175px;
}
.gameContainer {
    margin: 0 5px;
    width: 400px;
}
.gameGuessContainer {
    height: 80px;
    display: flex;
    justify-content: space-between;
}
.gameContainer .guessLetter, .exampleGame .guessLetter {
    width: 75px;
    height: 75px;
    border-radius: 5px;
    margin: 2px;
    font-size: 48pt;
    line-height: 75px;
}
.exampleGame {
    width: 395px;
}
.exampleGame .guessLetter {
    display: inline-block;
}
.gameContainer.solved {
    order: 1;
}
.guessesContainer {
    height: 300px;
    overflow-y: auto;
    padding-bottom: 164px;
    box-sizing: border-box;
    -webkit-mask: linear-gradient(#000, #000, #0000);
    mask: linear-gradient(#000, #000, #0000);
    transition: height 0.5s, padding-bottom 0.5s;
}
.gameContainer.solved .guessesContainer {
    height: 80px;
    -webkit-mask: none;
    mask: none;
    overflow-y: hidden;
    padding-bottom: 0;
}
.unused, .used {
    background-color: var(--theme-background-element);
    color:var(--theme-color-base);
}
.correct {
    background-color: var(--theme-background-hint-correct);
}
.hasLetter {
    background-color: var(--theme-background-hint-hasletter);
}
.incorrect {
    background-color: var(--theme-background-hint-incorrect);
    color:var(--theme-color-hint-incorrect);
}
.hintsElement {
    position: sticky;
    top: 0px;
    z-index: 10;
    background: var(--theme-background-base);
}
.hintsContainer {
    display: flex;
    position: sticky;
    top:2px;
    min-height: 54px;
    background: var(--theme-background-keyboard);
    border-radius: 20px;
    margin: 2px 0;
}
.hintContainer {
    display: inline-flex;
    width: 20%;
    flex-wrap: wrap;
    margin: 2px;
    align-items: center;
    justify-content: center;
}
.incorrectConatiner {
    display: flex;
    flex-wrap: wrap;
}
.hint {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 5px;
    font-size: 30pt;
    user-select: none;
    font-weight: 600;
}
.smallHint, .keyButton {
    width: 24px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    border-radius: 5px;
    font-size: 14pt;
    user-select: none;
    font-weight: 700;
}
.smallHint.used {
    opacity: 0.25;
}
.keyButton{
    width: 35px;
    height: 45px;
    font-size: 16pt;
    line-height: 45px;
    margin: 3px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
}
.keyButton:hover{
    color:var(--theme-color-hover);
    background:var(--theme-background-hover);
    cursor: pointer;
}
.keyButton.used:not(.keyButton.keyCorrect, .keyButton.keyHasLetter) {
    opacity: 0.25;
}
.keyButton.keyCorrect {
    border:2px solid var(--theme-background-hint-correct)
}
.keyButton.keyHasLetter {
    border:2px solid var(--theme-background-hint-hasletter)
}
.wideKey {
    width: 55px;
}
.timer::before {
    content: "⏱️";
}
.wordGameIndex {
    width: 100%;
    text-align: center;
    background-color: var(--theme-background-element);
    border-radius: 20px;
    margin-top: 5px;
}
.definition {
    font-size: 24pt;
    font-weight: bold;
    background: var(--theme-background-element);
    padding: 5px;
    display: inline-flex;
    border-radius: 40px;
    margin: 5px;
    align-items: center;
  }
.defButton {
    display: inline-block;
    background: var(--theme-background-keyboard);
    width: 25px;
    font-size: 16pt;
    height: 25px;
    text-decoration: none;
    color: black;
    border-radius: 25px;
}
.letterInp {
    animation-duration: 0.1s;
    animation-name: letterInp;
    animation-timing-function: ease-out;
}
.inpErr{
    animation-duration: 0.25s;
    animation-name: inpErr;
    animation-timing-function: ease-in-out;
}
.mainMenuContainer .title{
  margin: 20px 0;
}
.mainMenuContainer .title *{
  display: inline-block;
}
.mainMenuContainer .title .gameGuessContainer{
  height:auto;
}
.mainMenuContainer .title .guessLetter{
  width:45px;
  height:45px;
  line-height: 45px;
  font-size: 32pt;
}
.mainMenuContainer .title .dle{
  font-weight: bold;
  font-size:18pt;
}
@keyframes letterInp {
    from {
        bottom:20px;
    }
    to {
        bottom:0px;
    }
}

@keyframes inpErr {
    from {
        transform: translate(0,0);
    }
    20% {
        transform: translate(20px,0);
    }
    60% {
        transform: translate(-20px,0);
    }
    to {
        transform: translate(0,0);
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --theme-background-base:#222;
        --theme-background-keyboard:#333;
        --theme-background-element:#444;
        --theme-background-hover:#666;
        --theme-color-base:#ccc;
        --theme-color-hover:white;
        --theme-background-hint-correct:#393;
        --theme-background-hint-hasletter:#993;
        --theme-background-hint-incorrect:#666;
        --theme-color-hint-incorrect:#444;
    }
    a {
        color:#00aaff;
    }
    a:visited {
        color:#aa00ff;
    }
}