/*! 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;
}

html{font-style:normal;font-family:"InterDisplay",sans-serif;font-weight:400;font-size:16px;color:var(--default-font-color)}h1,p,div,ul{margin:0}@media(max-width: 1184px){html{font-size:15px}}@media(max-width: 1091px){html{font-size:12px}}@media(max-width: 920px){html{font-size:10px}}@media(max-width: 699px){html{font-size:8px}}@media(max-width: 570px){html{font-size:5px}}
@font-face{font-family:"InterDisplay";font-style:normal;font-weight:400;src:url(assets/font/InterDisplay-Regular.woff2) format("woff2")}@font-face{font-family:"InterDisplay";font-style:normal;font-weight:300;src:url(assets/font/InterDisplay-Light.woff2) format("woff2")}@font-face{font-family:"InterDisplay";font-style:normal;font-weight:700;src:url(assets/font/InterDisplay-Bold.woff2) format("woff2")}@font-face{font-family:"Podkova";font-style:normal;font-weight:700;src:url(assets/font/Podkova-Bold.woff2) format("woff2")}@font-face{font-family:"Podkova";font-style:normal;font-weight:400;src:url(assets/font/Podkova-Regular.woff2) format("woff2")}@font-face{font-family:"FragmentMono";font-style:normal;font-weight:400;src:url(assets/font/FragmentMono-Regular.woff2) format("woff2")}:root{--accent-color: rgba(253, 97, 0, 0.725);--default-bg-color: rgba(255, 249, 245, 0.855);--dark-bg-color: rgba(77, 76, 75, 0.984);--grey-bg-color: rgba(164, 163, 163, 0.984);--light-bg-color: rgba(253, 253, 253, 0.984);--link-color-light: rgb(252, 252, 252);--link-color-dark: rgba(253, 97, 0, 0.725);--link-color-active: rgb(253, 97, 0);--default-font-color: rgb(31, 18, 10);--light-font-color: rgb(252, 252, 252);--wrong-element: rgb(142, 17, 17)}
.button{width:7rem;height:2.3rem;color:var(--link-color-light);background-color:var(--accent-color);border-radius:.5rem;border:1px;display:flex;justify-content:center;align-items:center}.focused{cursor:pointer;background-color:var(--link-color-active)}
.input-field{width:10rem;height:2.3rem;padding:.5rem;font-family:"FragmentMono",monospace;font-size:1.1rem;color:var(--default-font-color);background-color:#fff;border:1px var(--accent-color) solid;border-radius:.5rem;display:flex;justify-content:left;align-items:left}.input-field::placeholder{font-size:.6rem}.input-field::after{font-size:.6rem;color:red}
#login-page{width:100%;height:100%;background:url(f8df13793bce1e7da632.jpg) no-repeat;background-size:cover;position:fixed}.loginpage-container{width:100%;height:100%}.login-element{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);font-family:"Podkova",sans-serif;font-style:normal;font-weight:400;color:var(--default-font-color);display:flex;flex-direction:column;align-items:center;gap:1rem}.login-element h3{font-size:1rem;margin:0;padding:0 1rem;background:var(--default-bg-color)}.login-element h1{font-size:4rem;margin:0;text-shadow:5px 5px 1rem var(--dark-bg-color)}.login-form{padding:1rem 2rem;border-radius:.5rem;background:var(--default-bg-color);display:flex;flex-wrap:wrap;flex-direction:column}.login-form label{font-weight:700}.login-form p{color:red;font-size:.6rem;width:13rem}.login-form input{width:13rem}.submit-form{margin-top:.5rem;cursor:pointer}
.header{background:linear-gradient(to right, var(--default-bg-color) 0 100%),no-repeat right/8% url(b86269def76374bfe95a.jpg);font-family:"InterDisplay",sans-serif;display:grid;max-height:10rem;width:80%;gap:1rem;border-bottom:1px var(--accent-color) solid;grid-template:"title title title" "menu discription discription"/1fr 5fr 1fr;padding:1rem 3rem}.header .main-title{font-family:"Podkova",sans-serif;font-size:2rem;text-align:center;grid-area:title;font-weight:400;letter-spacing:.5rem}.header .discription{font-family:"FragmentMono",monospace;font-size:.8rem;font-weight:300;text-align:left;grid-area:discription;font-weight:400}.header .menu-container{border-right:1px var(--accent-color) solid;max-width:15rem;font-size:.7rem;font-weight:300;grid-area:menu}.settings{display:flex;flex-direction:row;gap:.3rem;margin-top:.5rem;padding:0}.settings-item{list-style:none;margin:0}.settings-item .button{width:1.5rem;height:1.5rem}.setting-icon{width:80%;height:80%}.logout .setting-icon{background-image:url(0eaffd247eead0da854c.svg);background-repeat:no-repeat;background-size:contain}.sound .setting-icon{background-image:url(6d9616f9773bb2c2c9a1.svg);background-repeat:no-repeat;background-size:contain}.music .setting-icon{background-image:url(f0befca95f077e6e95fb.svg);background-repeat:no-repeat;background-size:contain}
#main-page{width:100vw;height:100vh;font-family:"InterDisplay",sans-serif;background:linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%),url(cd994ea232823f51d03e.jpg) repeat;display:flex;justify-content:center}#mainpage-container{width:80%;max-width:88rem;background-color:var(--default-bg-color);display:flex;flex-direction:column;align-items:center}@media(max-width: 1444px){#mainpage-container{width:90%}}@media(max-width: 1300px){#mainpage-container{width:100%}}.popup,.greeting{position:fixed;top:0;right:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.9s ease-out}.greeting-visible{opacity:1;font-size:1rem;animation:changeFontSize .7s;visibility:visible;transition:1.2s ease-out}.popup-open{opacity:1;visibility:visible;transition:.9s ease}#modal-logout{background:var(--light-bg-color);font-size:.8rem;width:25rem;height:15rem;display:flex;flex-direction:column;border-radius:10px;background:var(--light-bg-color);justify-content:space-around;align-items:center;color:var(--default-font-color)}.modal-but-container{display:flex;gap:2rem}@keyframes changeFontSize{from{font-size:5rem}to{font-size:1rem}}
#play-board{width:70rem;height:50rem;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center}#game{position:absolute;visibility:hidden}#game-start{position:absolute;width:100%;height:100%;opacity:1;visibility:visible;transition:1.3s ease;display:flex;flex-direction:column;gap:2rem;justify-content:flex-start;padding:1rem;margin-top:2rem}.button-bar{display:flex;width:60rem;justify-content:center;align-items:center;gap:.5rem}.start-button{position:absolute;width:8rem;height:8rem;opacity:1;transition:.9s ease-out}.start-button-invisible{opacity:0;visibility:hidden}.check-level-button,.auto-complete-button{position:absolute;visibility:hidden}.auto-complete-button{width:15rem}.auto-complete-counter{width:4.5rem;height:1rem;background-color:#fff;margin-left:1rem;color:#000}.check-level-button-visible,.auto-complete-button-visible{position:static;opacity:1;visibility:visible;transition:1.3s ease}.disabled{pointer-events:none;opacity:.5}.continue{background-color:#016901}
#game-menu{display:block}.source-data-block,.output{align-self:center;width:60rem;display:flex;flex-flow:row wrap;align-items:stretch;justify-content:stretch;height:2.8rem;gap:1rem}.word-p{font-family:"FragmentMono",monospace;font-size:1.2rem;letter-spacing:.1rem;display:flex;align-items:center;justify-content:center;border:1px var(--accent-color) solid;background-color:var(--dark-bg-color);color:var(--light-font-color);border-radius:5px;padding:.5rem;margin:0;max-height:1.9rem;width:auto;cursor:grab;animation:changeOpacity .9s}.word-p:hover{transform:scale(1.2);transition:.2s ease-in}.word-p-wrong{background-color:var(--wrong-element)}@keyframes changeOpacity{from{opacity:0}to{opacity:1}}.dragging{opacity:.8}.output-data-block{align-self:center;width:60.6rem;height:30rem;padding:.2rem;border:1px var(--accent-color) solid;background-color:#fff}.word-p-end{flex-grow:5;max-width:auto}.output-end{gap:0}#current-output{border:1px rgba(0,0,0,.289) dotted;background:linear-gradient(to right, rgba(255, 255, 255, 0.9) 0 100%),url(959d3fc0f1f2ff10577d.jpg) center no-repeat}.no-pointer-events{pointer-events:none}

/*# sourceMappingURL=app.7907c3e58047b2d5fabf.css.map*/