:root {
    --font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    --font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-sans-serif: "Nunito", sans-serif;
    --success: #35bba6;
    --info: #6cb2eb;
    --warning: #ffed4a;
    --danger: #cb3b48;
    --correct: #79b851;
    --present: #f3c237;
    --absent: #a7adc0;
    --unknown: #dce1ed;
    --breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --animation-speed: 1000ms;
    --animation-speed-fast: 200ms
}

*,
:after,
:before {
    box-sizing: border-box;
    list-style: none;
    margin: 0;
    outline: none;
    padding: 0;
    -webkit-user-select: none;
    user-select: none
}

html {
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased
}

a,
b,
body,
h1,
h2,
h3,
h4,
h5,
p,
span {
    color: #000
}

h1 {
    font-size: 48px
}

h2 {
    font-size: 28px;
    font-weight: 600;
    line-height: 30px
}

a {
    text-decoration: none
}

.theme-light {
    --text: #313131;
    --desc: #818296;
    --bg-1: #f2f2f2;
    --bg-2: #fbfcff;
    --bg-3: #dee1e9
}

.theme-dark {
    --text: #d0d4e8;
    --desc: #a7adc0;
    --bg-1: #232332;
    --bg-2: #363749;
    --bg-3: #414458;
    --absent: #2a2c3b
}

.header {
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    height: 7vh;
    justify-content: space-between;
    margin: auto;
    max-width: 1024px;
    padding: 0 15px 5px
}

.header__language {
    flex: 1 1 25%
}

.header__flags {
    align-items: center;
    display: flex;
    font-size: .9rem;
    font-weight: 700;
    text-transform: uppercase
}

.header__flags svg {
    height: 20px;
    width: 20px
}

.header__flags span {
    color: var(--desc);
    margin-left: 4px;
    opacity: .6
}

.header__title {
    align-items: center;
    display: flex;
    flex: 1 1 50%;
    justify-content: center
}

.header__title h2 .correct {
    color: #79b851;
    color: var(--correct)
}

.header__title h2 .present {
    color: #f3c237;
    color: var(--present)
}

.header__points {
    flex: 1 1 25%;
    font-weight: 700;
    text-align: end
}

.header__points span {
    color: var(--desc);
    font-size: .9rem;
    opacity: .6
}

.board-4 {
    grid-gap: 5px;
    grid-template-columns: repeat(4, minmax(10px, 55px))
}

.board-4,
.board-5 {
    display: grid;
    grid-template-rows: repeat(6, minmax(auto, 55px));
    justify-items: center;
    margin: auto
}

.board-5 {
    grid-gap: 5px;
    grid-template-columns: repeat(5, minmax(10px, 55px))
}

.board-6 {
    grid-gap: 5px;
    grid-template-columns: repeat(6, minmax(10px, 55px))
}

.board-6,
.board-7 {
    display: grid;
    grid-template-rows: repeat(6, minmax(auto, 55px));
    justify-items: center;
    margin: auto
}

.board-7 {
    grid-gap: 5px;
    grid-template-columns: repeat(7, minmax(10px, 55px))
}

.board-8 {
    grid-gap: 5px;
    grid-template-columns: repeat(8, minmax(10px, 55px))
}

.board-8,
.board-9 {
    display: grid;
    grid-template-rows: repeat(6, minmax(auto, 55px));
    justify-items: center;
    margin: auto
}

.board-9 {
    grid-gap: 5px;
    grid-template-columns: repeat(9, minmax(10px, 55px))
}

.board-10 {
    grid-gap: 5px;
    grid-template-columns: repeat(10, minmax(10px, 55px))
}

.board-10,
.board-11 {
    display: grid;
    grid-template-rows: repeat(6, minmax(auto, 55px));
    justify-items: center;
    margin: auto
}

.board-11 {
    grid-gap: 5px;
    grid-template-columns: repeat(11, minmax(10px, 55px))
}

.board__cell {
    align-items: center;
    background: var(--bg-2);
    border: 2px solid var(--bg-3);
    border-radius: 5px;
    color: var(--text);
    display: flex;
    font-size: 1.5rem;
    font-weight: 700;
    justify-content: center;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    width: 100%
}

.board__cell.correct {
    background: #79b851;
    background: var(--correct);
    border: 2px solid transparent;
    color: #fff
}

.board__cell.present {
    background: #f3c237;
    background: var(--present);
    border: 2px solid transparent;
    color: #fff
}

.board__cell.absent {
    background: #a7adc0;
    background: var(--absent);
    border: 2px solid transparent;
    color: #fff
}

.board__cell.unknown {
    border-color: #dce1ed;
    border-color: var(--unknown)
}

.board__cell.fill-animation {
    -webkit-animation: onTypeCell linear;
    animation: onTypeCell linear;
    -webkit-animation-duration: .35s;
    animation-duration: .35s
}

@-webkit-keyframes onTypeCell {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes onTypeCell {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1)
    }

    to {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

.controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 10px
}

.controls-btn {
    background: transparent;
    border: none;
    cursor: pointer
}

.controls-btn:hover svg {
    fill: #35bba6;
    fill: var(--success)
}

.controls-btn svg {
    height: 22px;
    width: 22px
}

.keyboard {
    padding-bottom: 15px
}

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

.keyboard-button {
    background: var(--bg-3);
    border-radius: 5px;
    color: var(--text);
    cursor: pointer;
    line-height: 42px;
    margin: 2px;
    text-align: center;
    text-transform: uppercase;
    width: 40px
}

.keyboard-button:hover {
    -webkit-filter: brightness(105%);
    filter: brightness(105%)
}

.keyboard-button.correct {
    background: #79b851;
    background: var(--correct);
    color: #fff
}

.keyboard-button.present {
    background: #f3c237;
    background: var(--present);
    color: #fff
}

.keyboard-button.absent {
    background: #a7adc0;
    background: var(--absent);
    color: #fff
}

.submit-btn {
    background: #35bba6;
    background: var(--success);
    border: none;
    border-radius: 20px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 15px 35px;
    text-shadow: 1px 1px 1px #888;
    text-transform: uppercase;
    transition: background-color .3s ease 0s
}

.submit-btn:hover {
    background-color: #2e9887
}

.submit-btn:disabled {
    background: #ddd;
    color: #aaa;
    cursor: not-allowed;
    text-shadow: none
}

.backspace-btn {
    align-items: center;
    border: 0;
    cursor: pointer;
    display: flex;
    justify-content: center
}

.backspace-btn svg {
    stroke: #281416;
    height: 20px;
    width: 20px
}

.clear-btn {
    align-items: stretch;
    background: #cb3b48;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    display: flex;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 15px;
    text-shadow: 1px 1px 1px #888;
    text-transform: uppercase
}

.clear-btn:disabled {
    background: #ddd;
    color: #aaa;
    cursor: not-allowed;
    text-shadow: none
}

.clear-btn:disabled svg {
    fill: #aaa
}

.clear-btn svg {
    fill: #fff;
    height: 14px;
    margin-right: 5px;
    width: 14px
}

.try-again-btn {
    background: #82b1c3;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 10px 20px;
    text-shadow: 1px 1px 1px #888;
    text-transform: uppercase
}

.try-again-btn:disabled {
    background-color: #ccc;
    color: #f0f0f0;
    cursor: not-allowed;
    text-shadow: none
}

.win-row {
    display: flex;
    justify-content: center;
    margin-top: 15px
}

.win-row__earned {
    color: #35bba6;
    color: var(--success);
    font-size: 1.1rem;
    font-weight: 500
}

.defeat-row {
    display: flex;
    justify-content: center;
    margin-top: 10px
}

.defeat-answer {
    background: #f1f3f9;
    border: 1px dashed #75819e;
    border-radius: 5px;
    color: var(--desc);
    padding: 5px 10px;
    text-transform: uppercase
}

.word-not-found {
    background: #e53e3e;
    border-radius: 10px;
    color: #fff;
    padding: 8px 12px
}

.hints-row {
    display: flex;
    justify-content: space-between;
    margin-top: 15px
}

.hints-row__word {
    padding: 10px 0
}

.hints-row__cell,
.hints-row__word {
    display: flex;
    justify-content: center
}

.hints-row__cell {
    align-items: center;
    aspect-ratio: 1;
    background: var(--bg-2);
    border: 2px solid var(--bg-3);
    border-radius: 5px;
    color: var(--text);
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2px;
    text-shadow: 1px 1px 1px #333;
    text-transform: uppercase;
    width: 45px
}

.hints-row__cell.correct {
    background: #79b851;
    background: var(--correct);
    border: 2px solid transparent !important;
    color: #fff
}

.hints-row__cell.active {
    border: 2px solid #82b1c3
}

.hints-row__title {
    font-weight: 500
}

.hints-row__title.align-center {
    text-align: center
}

.hints-row__hint {
    color: #818296;
    font-size: .8rem;
    opacity: .6
}

.hints-row__button {
    background: #82b1c3;
    border: none;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    padding: 8px;
    text-shadow: 1px 1px 1px var(--text)
}

.hints-row__button:disabled {
    background: #a7adc0;
    background: var(--absent);
    cursor: not-allowed
}

.howToPlay-row {
    margin-top: 10px;
    text-align: center
}

.howToPlay .desc {
    color: var(--text);
    font-size: .8rem;
    opacity: .6
}

.howToPlay .sample-word,
.howToPlay .sample-word span {
    display: flex;
    justify-content: center
}

.howToPlay .sample-word span {
    align-items: center;
    aspect-ratio: 1;
    background: var(--bg-2);
    border: 2px solid var(--bg-3);
    border-radius: 5px;
    color: var(--text);
    cursor: pointer;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 2px;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
    width: 45px
}

.howToPlay .sample-word span.correct {
    background: #79b851;
    background: var(--correct);
    color: #fff
}

.howToPlay .sample-word span.present {
    background: #f3c237;
    background: var(--present);
    color: #fff
}

.howToPlay .sample-word span.absent {
    background: #a7adc0;
    background: var(--absent);
    color: #fff
}

.settings-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 15px
}

.settings-row__num-of-letters {
    margin: auto
}

.settings-row__title {
    font-weight: 500
}

.settings-row__title.align-center {
    text-align: center
}

.settings-row__desc {
    color: var(--desc);
    font-size: .8rem
}

.settings-row__checkbox {
    padding: 4px 0
}

.numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 5px
}

.numbers__checkbox {
    background: var(--bg-3);
    border-radius: 5px;
    cursor: pointer;
    margin: 3px;
    padding: 5px 10px
}

.numbers__checkbox.correct {
    background: #35bba6;
    background: var(--success);
    color: #fff
}

.react-select__single-value {
    color: var(--text) !important
}

.react-select__control {
    background: var(--bg-3) !important
}

.react-select__menu {
    background: var(--bg-2) !important;
    color: var(--desc) !important
}

.statistics__row {
    display: flex;
    justify-content: space-evenly;
    margin-top: 15px
}

.statistics__card {
    padding: 5px;
    text-align: center
}

.statistics__value {
    color: var(--text);
    font-size: 1.875rem;
    font-weight: 700;
    line-height: 2.25rem
}

.statistics__hint {
    color: var(--desc);
    font-size: .75rem;
    line-height: 1rem;
    opacity: .6
}

.popup-overlay {
    -webkit-animation: appear .3s ease;
    animation: appear .3s ease;
    background-color: hsla(220, 9%, 46%, .75);
    transition: all 3s ease-in-out
}

.popup-content {
    -webkit-animation: anvil .3s forwards;
    animation: anvil .3s forwards;
    padding: 15px;
    transition-duration: .15s;
    transition-property: all
}

.modal {
    background: var(--bg-2);
    border-radius: 5px;
    box-shadow: 0 4px 23px 0 rgba(0, 0, 0, .2);
    color: var(--text);
    max-width: 400px;
    padding: 15px;
    width: 90vw
}

.modal-title {
    color: var(--text);
    text-align: center
}

.modal__close-btn {
    background: transparent;
    border: none;
    color: var(--text);
    cursor: pointer;
    height: 24px;
    position: absolute;
    right: 25px;
    top: 25px;
    transition: all .2s;
    transition: all var(--animation-speed-fast);
    width: 24px
}

.modal__close-btn:hover {
    -webkit-transform: scale(1.2);
    transform: scale(1.2)
}

.modal__close-btn svg {
    fill: none
}

@-webkit-keyframes appear {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes appear {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@-webkit-keyframes anvil {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        visibility: hidden
    }

    65.5% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }
}

@keyframes anvil {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8);
        transform: scale(.8);
        visibility: hidden
    }

    65.5% {
        -webkit-transform: scale(1.03);
        transform: scale(1.03)
    }

    to {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1);
        visibility: visible
    }
}

body {
    background: #23233200;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
    font-family: var(--font-family)
}

body,
body p,
body span {
    color: var(--text)
}

body svg {
    fill: var(--text)
}

#root {
    height: 100vh;
    overflow: hidden
}

main {
    display: flex;
    flex-direction: column;
    height: 93vh;
    justify-content: space-between;
    margin: auto;
    max-width: 560px;
    padding: 0 10px
}