/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

@font-face {
    font-family: 'Acme-Regular';
    src: url(assets/fonts/Acme-Regular.ttf);
}

@font-face {
    font-family: "BungeeSpice-Regular";
    src: url(assets/fonts/BungeeSpice-Regular.ttf);
}

@font-face {
    font-family: "BalsamiqSans-Regular";
    src: url(assets/fonts/BalsamiqSans-Regular.ttf);
}




*{box-sizing:border-box}body{background-color:#0f0d13;background-repeat:no-repeat;background-size:cover}.container{display:flex;flex-direction:column;min-height:100vh;max-width:1024px;margin:0 auto;background-image:url(assets/img/bg-puzzle-blue.png),url(assets/img/pg-puzzle-red.png);background-repeat:no-repeat;background-size:120px 120px,120px 120px;animation:back-puzzle 30s infinite linear}@keyframes back-puzzle{0%{background-position:top center,bottom center}25%{background-position:right center,left center}50%{background-position:bottom center,top center}75%{background-position:left center,right center}100%{background-position:top center,bottom center}}.btn{cursor:pointer}
.header{display:flex;justify-content:space-around;align-items:center;color:#fff;margin-bottom:50px}.header .header-logo{position:relative;font-family:"BungeeSpice-Regular"}.header .logout{cursor:pointer;display:none;width:24px;height:24px;background-image:url(assets/img/logout.png);background-repeat:no-repeat;background-size:100%}.header .popup{position:fixed;left:0;top:0;width:100%;height:100%;border:1px solid #000;z-index:100;background-color:rgba(0,0,0,.9)}.header .popup-wrapper{left:calc(50% - 250px);top:calc(50% - 150px);position:absolute;background-color:#fff;color:#000;box-shadow:0px 0px 100px -10px rgba(255,255,255,.2);border-radius:10px;width:500px;height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif}.header .popup-title{max-width:80%}.header .popup-img{width:64px;height:64px}.header .popup-btn-wrapper{display:flex;gap:30px}.header .popup-btn{cursor:pointer;background:rgba(0,0,0,0);font-family:"Lucida Sans","Lucida Sans Regular","Lucida Grande","Lucida Sans Unicode",Geneva,Verdana,sans-serif;font-size:18px;font-weight:bold;padding:2px 15px;border-radius:6px;border:none;color:#fff;background-color:#1d3ad9;transition:background-color .2s ease}@media(hover: hover){.header .popup-btn:hover{background-color:#354dd0}}.header-login-page{margin-bottom:100px}
.title-span{color:red}
.main{flex:1}.smooth-transition{animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}100%{opacity:1;transform:translateY(0)}}
.login_section{max-width:400px;padding:50px 70px;margin:0 auto;font-family:"Acme-Regular",sans-serif;color:#333;background-color:#fff;border:1px solid #1b1b1b;border-radius:20px;box-shadow:0px 0px 45px -17px #fff}.login_section .login_title{font-size:28px;text-align:center}.login_section .login_label{font-size:18px;color:#000}.login_section .login_input{font-family:inherit;font-size:14px;height:35px;text-indent:17px;outline:none;border-radius:3px;border:1px solid #000}.login_section .login_input-valid{background-image:url(assets/img/validField.png);background-repeat:no-repeat;background-position:2px center;background-size:15px}.login_section .login_input-invalid{background-image:url(assets/img/invalidField.png);background-repeat:no-repeat;background-position:2px center;background-size:15px}.login_section .login_btn{width:-moz-max-content;width:max-content;margin:0 auto;font-family:inherit;font-size:20px;border:1px solid green;color:#000;padding:3px 10px;background-color:rgba(0,0,0,0);border-radius:5px;cursor:pointer;transition:all .5s ease}.login_section .login_btn:disabled{border:1px solid gray;color:gray;cursor:default}.login_section .login_btn:enabled{animation:activeBtn 1s 1}@keyframes activeBtn{0%{scale:100% 100%}50%{scale:110% 110%}100%{scale:100% 100%}}.login_form{display:flex;flex-direction:column;gap:2px}.login_form .input_span{display:block;color:red}.login_form .input_span:last-of-type{margin-bottom:20px}
.auto-resume-game{position:fixed;top:8%;left:50%;transform:translateX(-50%);width:-moz-max-content;width:max-content;padding:10px 50px;background-color:#fff;border-radius:5px;box-shadow:0 0 5px 5px rgba(21,233,10,.2);font-family:"Acme-Regular";font-size:20px;animation:appearNotification 4s ease-in-out}.auto-resume-game .resume-title{font-family:inherit;position:relative;padding:0;margin:0}.auto-resume-game .resume-title::before{position:absolute;top:50%;left:-23px;transform:translateY(-50%);content:"";background-image:url(assets/img/resumeGame.png);background-repeat:no-repeat;width:16px;height:16px}@keyframes appearNotification{0%{opacity:0;transform:translate(-50%, -100px)}20%,80%{opacity:1;transform:translate(-50%, 0)}100%{opacity:0;transform:translate(-50%, -100px)}}
.game-section .game-field{max-width:700px;margin:0 auto;display:flex;flex-direction:column;-webkit-user-select:none;-moz-user-select:none;user-select:none}.game-section .game-field__rows-field{width:100%}.game-section .game-field__row{display:flex;height:40px;border:1px solid gold}.game-section .game-field__source-words{width:100%;border:1px solid #fff;display:flex;margin:40px auto;height:40px;pointer-events:all}.game-section .game-field .source-word{position:relative;cursor:pointer;color:#fff;-webkit-text-stroke:.7px #000;text-shadow:0px 0px 15px #000;border:1px solid wheat;font-family:Acme-Regular,serif;font-size:20px;line-height:1.7;text-align:center;transition:opacity .5s ease, box-shadow .5s ease;touch-action:none;background-color:#02315e;--after-backgroundImage: none;--after-backgroundSize: "0 0";--after-backgroundPosition: "0 0"}.game-section .game-field .source-word--up{transition:opacity .5s ease, transform .5s ease, box-shadow .5s ease}.game-section .game-field .source-word::before{z-index:10;content:"";box-sizing:border-box;position:absolute;width:6px;height:14px;left:-1px;opacity:1;top:calc(50% - 7px);background-color:#0f0d13;border-top-right-radius:7px;border-bottom-right-radius:7px;background-repeat:no-repeat}.game-section .game-field .source-word::after{z-index:11;content:"";box-sizing:border-box;position:absolute;width:7px;height:14px;right:calc(0% - 7px);top:calc(50% - 7px);background-color:#02315e;border-top-right-radius:7px;border-bottom-right-radius:7px;background-image:var(--after-backgroundImage);background-size:var(--after-backgroundSize);background-position:var(--after-backgroundPosition)}.game-section .game-field .first-puzzle::before,.game-section .game-field .last-puzzle::after{display:none}.game-section .game-field .paint-true{box-shadow:0px 0px 71px -14px rgba(77,244,85,.69) inset}.game-section .game-field .paint-wrong{box-shadow:0px 0px 71px -14px rgba(240,55,16,.69) inset}.game-section .game-field .source-word--selected{opacity:.4}.game-section .game-section-open-background .game-field__row{border:0px solid rgba(0,0,0,0);transition:border-color 1s ease-in-out}.game-section .game-section-open-background .game-field__source-words{border:1px solid rgba(0,0,0,0);transition:border-color 1s ease-in-out, border-width 1s ease-in-out}.game-section .game-section-open-background .source-word{border-color:rgba(0,0,0,0);color:rgba(0,0,0,0);-webkit-text-stroke:0;text-shadow:none;transition:border-color 1s ease-in-out, border-width 1s ease-in-out, text-shadow 1s ease-in-out, color 1s ease-in-out, -webkit-text-stroke 1s ease-in-out}.game-section .game-section-open-background .source-word::before{opacity:0;transition:opacity 1s ease-in-out}.show-autor{width:100%;color:#fff;font-size:20px;text-align:center;font-family:"Acme-Regular";white-space:pre-wrap;padding-top:4px}.animate-on-change{animation:animateOnChange .5s ease-in-out}@keyframes animateOnChange{0%{opacity:0}100%{opacity:1}}
.hints{display:flex;flex-direction:column;align-items:center;max-width:700px;margin:0 auto;font-family:BalsamiqSans-Regular,serif;color:#fff;font-size:20px}.hints .sentence-wrapper{min-height:32px;display:flex;justify-content:center;align-items:center;gap:10px;margin:20px 0}.hints .translation-sentence{width:100%;text-align:center;margin:0}.hints .hint-icons{display:flex;gap:5px}.hints .hint-icon{padding:4px 4px;border:none;border-radius:5px;cursor:pointer;position:relative}.hints .translate-button,.hints .pronounce-hint-button,.hints .background-hint-button{background-color:#bdbbbb;border:1px solid rgba(0,0,0,0)}.hints .translate-button--on,.hints .pronounce-hint-button--on,.hints .background-hint-button--on{background-color:#02315e;border:1px solid #fff}.hints .pronounce-button{background-color:rgba(0,0,0,0)}.hints .translate-span,.hints .pronounce-span,.hints .pronounce-hint-span,.hints .background-hint-span{position:relative;display:block;width:24px;height:24px;background-size:cover}.hints .translate-span{background-image:url(assets/img/translationOn.png)}.hints .pronounce-span{background-image:url(assets/img/pronounce.png)}.hints .pronounce-hint-span{background-image:url(assets/img/diction.png)}.hints .background-hint-span{background-image:url(assets/img/card-puzzle.png)}.hints .loader-audio{position:absolute;left:-7px;top:-7px;width:38px;height:38px;border-radius:50%;display:none;border-top:4px solid #6ebeff;border-right:4px solid rgba(0,0,0,0);box-sizing:border-box;animation:rotation 1s linear infinite}.hints .loader-audio::after{content:"";box-sizing:border-box;position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;border-bottom:4px solid #337ab7;border-left:4px solid rgba(0,0,0,0)}.hints .loader-on{display:inline-block}@keyframes rotation{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.game-button-field{display:flex;justify-content:center;gap:20px;margin-bottom:40px}.game-button-field .btn{cursor:default;background:rgba(0,0,0,0);font-size:18px;font-family:Acme-Regular,serif;font-weight:bold;padding:4px 15px;border-radius:6px;border:none;color:gray;background-color:#1d3ad9;transition:all .2s ease}.game-button-field .btn--active{cursor:pointer;color:#fff;box-shadow:0px 0px 20px 5px rgba(249,251,253,.2)}@media(hover: hover){.game-button-field .btn--active:hover{background-color:#354dd0}.game-button-field .btn--active:active{background-color:gray}}.game-button-field .btn-continue{display:none}.game-button-field .btn-continue-animate{animation:showContinue .3s linear 1}.game-button-field .btn-results{display:none;background-color:#338309}@media(hover: hover){.game-button-field .btn-results:hover{background-color:#63a83e}.game-button-field .btn-results:active{background-color:gray}}.game-button-field .btn-results-animate{animation:showContinue .3s linear 1}@keyframes showContinue{0%{transform:1}50%{transform:scale(1.3)}100%{transform:1}}
.selection-field{width:-moz-max-content;width:max-content;margin:0 auto;margin-bottom:20px;color:#fff;display:flex;gap:15px;font-size:20px;font-family:"Acme-Regular";text-align:left}.selection-field .level-wrapper,.selection-field .round-wrapper{position:relative}.selection-field .level-wrapper select,.selection-field .round-wrapper select{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;text-align:left;font-size:18px;margin-left:10px;padding:2px 5px;border-radius:5px;cursor:pointer}.selection-field .level-wrapper::after,.selection-field .round-wrapper::after{content:"";position:absolute;pointer-events:none;top:50%;left:100%;transform:translate(-100%, -50%) rotate(180deg);width:30px;height:30px;background-image:url(assets/img/arrow-drop.svg);background-repeat:no-repeat;background-size:30px 30px;background-position:100% 50%;transition:all .15s linear}.selection-field .level-wrapper.select-open::after,.selection-field .round-wrapper.select-open::after{transform:translate(-100%, -50%) rotate(0deg)}
.statistic-view{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);display:none;z-index:100;position:fixed;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,.5)}.statistic-view .statistic-wrapper{display:flex;flex-direction:column;align-items:center;z-index:101;position:fixed;left:50%;top:50%;width:500px;transform:translate(-50%, -50%);border-radius:10px;background-color:#f3f3fb;animation:statisticAppear 1s ease-in-out}.statistic-view .image-art{margin-top:20px;width:350px;height:200px;border-radius:10px}.statistic-view .art-info{max-width:400px;margin:10px 0;padding:0;font-size:14px;white-space:pre-wrap}.statistic-view .sentences-wrapper{display:flex;flex-direction:column;width:100%;align-items:center;color:#000;font-size:20px;font-family:"Acme-Regular";max-height:500px;overflow-y:scroll}.statistic-view .sentences-wrapper::-webkit-scrollbar-thumb{background-color:#4f4b4b;border-radius:10px;border:5px solid rgba(0,0,0,0);background-clip:padding-box}.statistic-view .sentences-wrapper::-webkit-scrollbar{width:20px}.statistic-view .sentences-wrapper .sentences-field{max-width:450px;padding-left:50px;font-size:17px;align-self:flex-start}.statistic-view .sentences-wrapper .stat-title{width:-moz-max-content;width:max-content;margin:10px 0;padding:0;position:relative}.statistic-view .sentences-wrapper .known-title::before{content:"";position:absolute;width:24px;height:24px;top:50%;left:-40px;transform:translateY(-50%);background-repeat:no-repeat;background-image:url(assets/img/happy-face.png)}.statistic-view .sentences-wrapper .unknown-title::before{content:"";position:absolute;width:24px;height:24px;top:50%;left:-40px;transform:translateY(-50%);background-repeat:no-repeat;background-image:url(assets/img/sad.png)}.statistic-view .sentences-wrapper .sentence-item{position:relative}.statistic-view .sentences-wrapper .audio-icon{cursor:pointer;position:absolute;left:-35px;top:50%;transform:translateY(-50%);width:24px;height:24px;background-image:url(assets/img/music.png);background-repeat:no-repeat}.statistic-view .sentences-wrapper .audio-icon .audio-loader{position:absolute;left:-7px;top:-7px;width:38px;height:38px;border-radius:50%;display:none;border-top:2px solid #6ebeff;border-right:2px solid rgba(0,0,0,0);box-sizing:border-box;animation:rotation 1s linear infinite}.statistic-view .sentences-wrapper .audio-icon .audio-loader::after{content:"";box-sizing:border-box;position:absolute;left:0;top:0;width:38px;height:38px;border-radius:50%;border-bottom:2px solid #337ab7;border-left:2px solid rgba(0,0,0,0)}.statistic-view .sentences-wrapper .audio-icon .audio-loader-on{display:block}.statistic-view .stats-continue-btn{display:block;font-size:18px;font-family:Acme-Regular,serif;font-weight:bold;padding:4px 15px;border-radius:6px;border:none;color:#fff;background-color:#000;margin:10px 0;transition:all .2s ease}@media(hover: hover){.statistic-view .stats-continue-btn:hover{background-color:#ae720a}.statistic-view .stats-continue-btn:active{background-color:gray}}@keyframes statisticAppear{0%{transform:translate(-50%, -200%)}100%{transform:translate(-50%, -50%)}}
.section-greeting{text-align:center;color:#fff}.section-greeting .greeting-title{font-family:"Acme-Regular";letter-spacing:2px;font-size:30px}.section-greeting .greeting-description{font-family:"Acme-Regular";font-size:22px;letter-spacing:2px}.section-greeting .interaction-block{display:grid;align-items:center;justify-items:center;grid-template-areas:"learn puzzle" "learn user" "learn start"}.section-greeting .interaction-block .greeting-lern-pic{height:500px;grid-area:learn}.section-greeting .interaction-block .greeting-puzzle-pic{grid-area:puzzle;height:130px}.section-greeting .interaction-block .greeting-start-button{grid-area:start;border:3px solid #2a2a2c;border-radius:10px;padding:10px 30px;width:-moz-max-content;width:max-content;height:-moz-max-content;height:max-content;font-family:"Acme-Regular";font-size:22px;background-color:#fff;color:#1b1b1b;transition:all .2s linear;box-shadow:0px 0px 28px 8px rgba(249,251,253,.2)}@media(hover: hover){.section-greeting .interaction-block .greeting-start-button:hover{cursor:pointer;transform:scale(1.1);box-shadow:0px 0px 28px 8px rgba(249,251,253,.2)}}.section-greeting .interaction-block .user-greeting{border:3px solid #2a2a2c;border-radius:40px;box-shadow:-3px 0px 22px 11px rgba(255,255,254,.5);width:300px;padding:30px 10px;background-color:#fff;color:#000;font-family:"Acme-Regular";letter-spacing:2px;color:#454444}.section-greeting .interaction-block .user-greeting__title{margin:0;padding:0;font-size:20px}.section-greeting .interaction-block .user-greeting__span{display:block;font-size:29px;text-shadow:1px 1px #fff,2px 2px #777;color:#333;padding:10px 0;animation:user 1.5s 1 linear;animation-delay:1s}@keyframes user{50%{transform:scale(1.2)}}
.footer{display:flex;justify-content:center;align-items:center;gap:30px;color:#fff;font-size:20px;font-family:"Acme-Regular"}.footer .footer-info{white-space:pre-wrap}.footer .github-link{display:block;width:45px;height:45px;background-image:url(assets/img/Github-desktop-logo-symbol.svg.png);background-repeat:no-repeat;background-size:cover}