:root {
  --clr-valid: rgb(11, 185, 11);
  --clr-invalid: red;
  --clr-white: white;
  --clr-dark: black;
  --clr-background: rgba(230, 230, 250, 0.9);
  --clr-background-light: rgba(230, 230, 250, 0.55);
  --clr-border-color: rgb(105, 105, 105);
  --clr-hint-btn: rgb(122, 122, 199);
  --clr-hint-btn-click: rgb(186, 186, 235);
}
*,
*:before,
*:after {
  box-sizing: border-box;
}
:where(ul, ol):where([class]) {
  padding-left: 0;
}
body,
:where(blockquote, figure):where([class]) {
  margin: 0;
}
:where(h1, h2, h3, h4, h5, h6, p, ul, ol, dl):where([class]) {
  margin-block: 0;
}
:where(dd[class]) {
  margin-left: 0;
}
:where(fieldset[class]) {
  margin-left: 0;
  padding: 0;
  border: none;
}
:where(ul[class]) {
  list-style: none;
}
p {
  --paragraphMarginBottom: 24px;
  margin-block: 0;
}
p:where(:not([class]):not(:last-child)) {
  margin-bottom: var(--paragraphMarginBottom);
}
img {
  display: block;
  max-width: 100%;
}
input,
textarea,
select,
button {
  font: inherit;
}
html {
  height: 100%;
  scroll-behavior: smooth;
}
body {
  min-height: 100%;
  line-height: 1.5;
}
svg *[fill] {
  fill: currentColor;
}
svg *[stroke] {
  stroke: currentColor;
}
svg * {
  transition-property: fill, stroke;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
picture {
  margin: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
}
p {
  font-weight: 400;
}
body {
  font-family: Merriweather, serif;
  font-style: normal;
  font-weight: 400;
  color: var(--clr-dark);
}
.page-login__form {
  padding: 30px 20px;
  border-radius: 12px;
  border: 3px solid var(--clr-border-color);
  background-color: var(--clr-background);
}
.login-label {
  font-size: 20px;
  margin-left: 5px;
  line-height: 130%;
  letter-spacing: 0.08em;
}
input {
  outline: none;
}
.login-input {
  margin: 3px 0;
}
input {
  border: 3px solid var(--clr-dark);
  font-size: 18px;
}
.input-valid {
  border-color: var(--clr-valid);
}
.input-invalid {
  border-color: var(--clr-invalid);
}
.login-span {
  display: block;
  line-height: 110%;
  letter-spacing: 0.03em;
  margin: 5px 0 20px 5px;
  color: transparent;
}
.input-error {
  color: var(--clr-invalid);
}
.login-btn {
  width: 120px;
  padding: 12px 30px;
  margin: 0 auto;
  border: 2px solid var(--clr-dark);
}
.login-btn:hover {
  border: 2px solid var(--clr-border-color);
}
button:disabled {
  border-color: var(--clr-border-color);
  cursor: default;
}
button:disabled:hover {
  border-color: var(--clr-border-color);
}
.login-btn:not(:disabled) {
  background-color: var(--clr-valid);
  color: var(--clr-white);
}
.header,
.footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 50px;
  padding: 4px 20px;
  background-color: var(--clr-background);
}
.header {
  border-bottom: 2px solid var(--clr-border-color);
}
.footer {
  border-top: 2px solid var(--clr-border-color);
}
.logo {
  font-size: 18px;
  line-height: 130%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.logout-btn {
  width: 100px;
  font-size: 14px;
  padding: 8px 12px;
  color: var(--clr-white);
  background-color: var(--clr-invalid);
  border: 2px solid var(--clr-border-color);
}
.logout-btn:hover {
  border-color: var(--clr-dark);
}
.main {
  position: relative;
  width: 100%;
  min-height: calc(100vh - 100px);
  margin: 0 auto;
  padding: 10px 20px;
  border-radius: 2px;
  background-color: var(--clr-background-light);
}
.greetin-text {
  line-height: 130%;
  letter-spacing: 0.08em;
  text-align: center;
  margin: 30px 0 35px;
}
.rules-text {
  width: 100%;
  max-width: 600px;
  line-height: 135%;
  letter-spacing: 0.03em;
  font-weight: 500;
  margin: 0 auto;
  text-align: center;
}
.start-btn {
  width: 120px;
  padding: 12px 30px;
  margin: 170px auto 0;
  border: 2px solid var(--clr-border-color);
  background-color: var(--clr-valid);
  color: var(--clr-white);
}
.start-btn:hover {
  border-color: var(--clr-dark);
}
.footer-link {
  font-weight: 600;
  text-decoration: none;
  color: var(--clr-dark);
}
.wrapper {
  background: url(./page_login-Dt4sku2j.jpg) center center / cover;
}
.hints-container {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
}
.select-levels {
  font-size: 14px;
  height: 30px;
  border-radius: 6px;
  background-color: var(--clr-hint-btn);
  cursor: pointer;
}
option.complete {
  background-color: var(--clr-valid);
}
.hint-btn {
  width: 35px;
  height: 35px;
  border: none;
}
#sound-btn {
  margin: 0 auto;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20?%3e%3csvg%20viewBox='0%200%2032%2032'%20xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23101820;}%3c/style%3e%3c/defs%3e%3ctitle/%3e%3cg%20data-name='Layer%2034'%20id='Layer_34'%3e%3cpath%20class='cls-1'%20d='M18,29a1,1,0,0,1-.57-.18l-10-7A1,1,0,0,1,7,21V11a1,1,0,0,1,.43-.82l10-7a1,1,0,0,1,1-.07A1,1,0,0,1,19,4V28a1,1,0,0,1-.54.89A1,1,0,0,1,18,29ZM9,20.48l8,5.6V5.92l-8,5.6Z'/%3e%3cpath%20class='cls-1'%20d='M8,22H4a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H8a1,1,0,0,1,1,1V21A1,1,0,0,1,8,22ZM4,12a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1H7V12Z'/%3e%3cpath%20class='cls-1'%20d='M18,21V19a3,3,0,0,0,2.12-5.12l1.42-1.42A5,5,0,0,1,18,21Z'/%3e%3cpath%20class='cls-1'%20d='M26.48,25.48a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42,11,11,0,0,0,0-15.54,1,1,0,1,1,1.42-1.42,13,13,0,0,1,0,18.38A1,1,0,0,1,26.48,25.48Z'/%3e%3cpath%20class='cls-1'%20d='M23.65,22.65a1,1,0,0,1-.7-.29A1,1,0,0,1,23,21a7,7,0,0,0,0-9.9,1,1,0,0,1,1.41-1.41,9,9,0,0,1,0,12.72A1,1,0,0,1,23.65,22.65Z'/%3e%3c/g%3e%3c/svg%3e")
    center no-repeat;
}
#sound-btn.hidden {
  display: none;
}
#translate-btn {
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20?%3e%3csvg%20class='bi%20bi-translate'%20fill='currentColor'%20height='16'%20viewBox='0%200%2016%2016'%20width='16'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M4.545%206.714%204.11%208H3l1.862-5h1.284L8%208H6.833l-.435-1.286H4.545zm1.634-.736L5.5%203.956h-.049l-.679%202.022H6.18z'/%3e%3cpath%20d='M0%202a2%202%200%200%201%202-2h7a2%202%200%200%201%202%202v3h3a2%202%200%200%201%202%202v7a2%202%200%200%201-2%202H7a2%202%200%200%201-2-2v-3H2a2%202%200%200%201-2-2V2zm2-1a1%201%200%200%200-1%201v7a1%201%200%200%200%201%201h7a1%201%200%200%200%201-1V2a1%201%200%200%200-1-1H2zm7.138%209.995c.193.301.402.583.63.846-.748.575-1.673%201.001-2.768%201.292.178.217.451.635.555.867%201.125-.359%202.08-.844%202.886-1.494.777.665%201.739%201.165%202.93%201.472.133-.254.414-.673.629-.89-1.125-.253-2.057-.694-2.82-1.284.681-.747%201.222-1.651%201.621-2.757H14V8h-3v1.047h.765c-.318.844-.74%201.546-1.272%202.13a6.066%206.066%200%200%201-.415-.492%201.988%201.988%200%200%201-.94.31z'/%3e%3c/svg%3e")
    center no-repeat;
  background-color: var(--clr-hint-btn);
}
#translate-btn.cliked,
#audio-btn.cliked,
#image-btn.cliked {
  background-color: var(--clr-hint-btn-click);
}
#translate-btn.add-position {
  margin-left: auto;
}
#audio-btn {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMSBUaW55Ly9FTicgICdodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS10aW55LmR0ZCc+PHN2ZyBiYXNlUHJvZmlsZT0idGlueSIgaGVpZ2h0PSIzMnB4IiB2ZXJzaW9uPSIxLjEiIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjMycHgiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIGlkPSJHdWlkZXNfX3gyNl9fRm9ybXMiLz48ZyBpZD0iSWNvbnMiPjxnPjxwYXRoIGQ9Ik0xNiwyMWMyLjIwOSwwLDQtMS43OTEsNC00di03YzAtMi4yMDktMS43OTEtNC00LTRjLTIuMjA5LDAtNCwxLjc5MS00LDR2N0MxMiwxOS4yMDksMTMuNzkxLDIxLDE2LDIxeiBNMTQsMTAgICAgYzAtMS4xMDMsMC44OTctMiwyLTJjMS4xMDMsMCwyLDAuODk3LDIsMnY3YzAsMS4xMDMtMC44OTcsMi0yLDJjLTEuMTAzLDAtMi0wLjg5Ny0yLTJWMTB6Ii8+PHBhdGggZD0iTTI0LDE3aC0yYzAsMy4zMDgtMi42OTIsNi02LDZzLTYtMi42OTItNi02SDhjMCw0LjA3OSwzLjA1NSw3LjQzOCw3LDcuOTMxVjI2aC00djJoMTB2LTJoLTR2LTEuMDY5ICAgIEMyMC45NDUsMjQuNDM4LDI0LDIxLjA3OSwyNCwxN3oiLz48L2c+PC9nPjwvc3ZnPg==)
    center no-repeat;
  background-color: var(--clr-hint-btn);
}
#image-btn {
  background: url(./picture-BvESXraD.svg) center no-repeat;
  background-size: contain;
  background-color: var(--clr-hint-btn);
}
.text-hint {
  text-align: center;
  margin: 10px 0;
}
.text-hint.hidden {
  color: transparent;
}
.game-board {
  max-width: 702px;
  height: 402px;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--clr-background-light);
  border: 1px solid var(--clr-border-color);
}
.game-board__row {
  display: flex;
  height: 40px;
}
.game-board__row-word {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  color: var(--clr-white);
  text-shadow: 3px 1px 3px var(--clr-dark);
  border: 1px solid var(--clr-background);
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
}
.game-board__row-word[draggable] {
  cursor: grab;
}
.game-board__row-word.valid {
  border: 1px solid var(--clr-valid);
}
.game-board__row-word.invalid {
  border: 1px solid var(--clr-invalid);
}
.game-words {
  display: flex;
  max-width: 702px;
  height: 42px;
  margin: 20px auto;
  background-color: var(--clr-background-light);
  border: 1px solid var(--clr-border-color);
}
.btns-solution__container {
  display: flex;
  justify-content: center;
  gap: 25px;
}
.solution-btn,
.check-solution__btn {
  min-width: 100px;
  padding: 8px 12px;
  color: var(--clr-white);
  border: 2px solid var(--clr-border-color);
}
.solution-btn:not(:disabled) {
  background-color: var(--clr-valid);
}
.solution-btn:hover,
.check-solution__btn:hover {
  border-color: var(--clr-dark);
}
.check-solution__btn:not(:disabled) {
  background-color: var(--clr-valid);
}
.image-hint-active {
  background: var(--clr-hint-btn-click) !important;
}
#sound-btn.shake {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}
@keyframes shake {
  0% {
    transform: scale(0.85);
  }
  50% {
    transform: scale(1);
  }
  to {
    transform: scale(0.85);
  }
}
.page-result {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  z-index: 100;
  background-color: var(--clr-hint-btn-click);
}
.result-container {
  max-width: 500px;
  padding: 10px 20px;
  background-color: var(--clr-background);
  border: 2px solid var(--clr-border-color);
  border-radius: 6px;
  margin-top: 60px;
  margin-bottom: 60px;
}
.result-img {
  max-width: 250px;
  height: 140px;
  border: 1px solid var(--clr-border-color);
  border-radius: 6px;
  margin: 0 auto;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.result-img__description {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 600;
}
.result-know,
.result-dontknow {
  font-weight: 600;
  margin-top: 10px;
}
.result-know {
  color: var(--clr-valid);
}
.result-dontknow {
  color: var(--clr-invalid);
}
.result-item {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}
.result-item__btn {
  width: 30px;
  height: 30px;
  border: none;
  background: url("data:image/svg+xml,%3c?xml%20version='1.0'%20?%3e%3csvg%20viewBox='0%200%2032%2032'%20xmlns='http://www.w3.org/2000/svg'%3e%3cdefs%3e%3cstyle%3e.cls-1{fill:%23101820;}%3c/style%3e%3c/defs%3e%3ctitle/%3e%3cg%20data-name='Layer%2034'%20id='Layer_34'%3e%3cpath%20class='cls-1'%20d='M18,29a1,1,0,0,1-.57-.18l-10-7A1,1,0,0,1,7,21V11a1,1,0,0,1,.43-.82l10-7a1,1,0,0,1,1-.07A1,1,0,0,1,19,4V28a1,1,0,0,1-.54.89A1,1,0,0,1,18,29ZM9,20.48l8,5.6V5.92l-8,5.6Z'/%3e%3cpath%20class='cls-1'%20d='M8,22H4a3,3,0,0,1-3-3V13a3,3,0,0,1,3-3H8a1,1,0,0,1,1,1V21A1,1,0,0,1,8,22ZM4,12a1,1,0,0,0-1,1v6a1,1,0,0,0,1,1H7V12Z'/%3e%3cpath%20class='cls-1'%20d='M18,21V19a3,3,0,0,0,2.12-5.12l1.42-1.42A5,5,0,0,1,18,21Z'/%3e%3cpath%20class='cls-1'%20d='M26.48,25.48a1,1,0,0,1-.71-.29,1,1,0,0,1,0-1.42,11,11,0,0,0,0-15.54,1,1,0,1,1,1.42-1.42,13,13,0,0,1,0,18.38A1,1,0,0,1,26.48,25.48Z'/%3e%3cpath%20class='cls-1'%20d='M23.65,22.65a1,1,0,0,1-.7-.29A1,1,0,0,1,23,21a7,7,0,0,0,0-9.9,1,1,0,0,1,1.41-1.41,9,9,0,0,1,0,12.72A1,1,0,0,1,23.65,22.65Z'/%3e%3c/g%3e%3c/svg%3e")
    center no-repeat;
}
.result-item__text {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--clr-dark);
}
.result-container button {
  display: block;
  margin: 0 auto;
}
.result-container .check-solution__btn {
  margin: 15px auto 5px;
}
@media (width < 500px) {
  .header,
  .footer {
    padding: 4px 10px;
  }
  .logo {
    font-size: 16px;
  }
  .rules-text {
    font-size: 14px;
  }
  .main {
    min-height: 720px;
    padding: 10px;
  }
  .text-hint {
    font-size: 13px;
    font-weight: 600;
  }
  .game-board__row-word {
    font-size: 12px;
  }
  .hints-container {
    margin-top: 10px;
    gap: 8px;
  }
  .result-know,
  .result-dontknow {
    font-size: 14px;
  }
  .result-item__text {
    font-size: 13px;
  }
  .page-result {
    padding: 0 2px;
  }
}
._section_okxtr_1 {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 100vh;
  padding: 7px;
  background: url(./page_login-Dt4sku2j.jpg) center center / cover no-repeat;
}
._form_1l8zy_1 {
  width: 100%;
  max-width: 520px;
}
._input_rl4aw_1 {
  width: 100%;
  padding: 12px 20px;
  border-radius: 12px;
}
._button_e6zya_1 {
  display: block;
  font-size: 14px;
  text-align: center;
  line-height: 110%;
  letter-spacing: 0.1em;
  text-transform: capitalize;
  border-radius: 6px;
  transition: 0.5s ease-out;
  cursor: pointer;
}
._div_ckpog_1 {
  width: 100%;
}