/* http://meyerweb.com/eric/tools/css/reset/
   v2.0-modified | 20110126
   License: none (public domain)
*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* make sure to set some focus styles for accessibility */
:focus {
  outline: 0;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

body {
  line-height: 1;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
  -moz-appearance: none;
}

input[type='search'] {
  -webkit-appearance: none;
  -moz-appearance: none;
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

textarea {
  overflow: auto;
  vertical-align: top;
  resize: vertical;
}

/**
 * Correct `inline-block` display not defined in IE 6/7/8/9 and Firefox 3.
 */

audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  max-width: 100%;
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address styling not present in IE 7/8/9, Firefox 3, and Safari 4.
 * Known issue: no IE 6 support.
 */

[hidden] {
  display: none;
}

/**
 * 1. Correct text resizing oddly in IE 6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */

a:focus {
  outline: thin dotted;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/**
 * 1. Remove border when inside `a` element in IE 6/7/8/9 and Firefox 3.
 * 2. Improve image quality when scaled in IE 7.
 */

img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/**
 * Address margin not present in IE 6/7/8/9, Safari 5, and Opera 11.
 */

figure {
  margin: 0;
}

/**
 * Correct margin displayed oddly in IE 6/7.
 */

form {
  margin: 0;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct color not being inherited in IE 6/7/8/9.
 * 2. Correct text not wrapping in Firefox 3.
 * 3. Correct alignment displayed oddly in IE 6/7.
 */

legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

/**
 * 1. Correct font size not being inherited in all browsers.
 * 2. Address margins set differently in IE 6/7, Firefox 3+, Safari 5,
 *    and Chrome.
 * 3. Improve appearance and consistency in all browsers.
 */

button,
input,
select,
textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

/**
 * Address Firefox 3+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

button,
input {
  line-height: normal;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 6+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Remove inner spacing in IE 7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE 6.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * 1. Address box sizing set to content-box in IE 8/9.
 * 2. Remove excess padding in IE 8/9.
 * 3. Remove excess padding in IE 7.
 *    Known issue: excess padding remains in IE 6.
 */

input[type='checkbox'],
input[type='radio'] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */

input[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */

input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Remove inner padding and border in Firefox 3+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * 1. Remove default vertical scrollbar in IE 6/7/8/9.
 * 2. Improve readability and alignment in all browsers.
 */

textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

html,
button,
input,
select,
textarea {
  color: #222;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

img {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.chromeframe {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

@font-face{font-family:"Kaushan Script";font-style:normal;font-weight:400;src:local(""),url(assets/fb8d347f8f89429c5f84.woff2) format("woff2"),url(assets/cbcd49c1a43cc7859f89.woff) format("woff")}@font-face{font-family:"Montserrat";font-style:normal;font-weight:400;src:local(""),url(assets/b71748ae4f80ec8c014d.woff2) format("woff2"),url(assets/0659a9f4e90db5cf51b5.woff) format("woff")}@font-face{font-family:"Montserrat";font-style:normal;font-weight:500;src:local(""),url(assets/091b209546e16313fd4f.woff2) format("woff2"),url(assets/edd311588712a96bbf43.woff) format("woff")}@font-face{font-family:"Montserrat";font-style:normal;font-weight:700;src:local(""),url(assets/7dbcc8a5ea2289d83f65.woff2) format("woff2"),url(assets/99271a835e1cae8c76ef.woff) format("woff")}html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}.train-mode{--bg-color: #fcfcb0;--bg-color-down: #3af18d;--bg-sidebar: #238c52}.train-mode #bg-image{left:-5%}.play-mode{--bg-color: #ffdad7;--bg-color-down: #42e2ff;--bg-sidebar: #1d979e}.play-mode #bg-image{left:-105%}.play-mode #bg-image svg{filter:hue-rotate(50deg)}#bg-image{z-index:0;overflow:hidden;position:absolute;top:0;width:210%;transition-duration:1s}#bg-image svg{transition-duration:1s;margin-bottom:-5px}body{position:relative;overflow-x:hidden;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;min-height:100vh;width:100%;font-family:"Montserrat",Verdana,sans-serif;font-weight:500;background-color:var(--bg-color);transition-duration:1s}.wrapper{display:flex;flex-direction:column;justify-content:flex-start;align-items:center;width:95%;height:100%}.container{display:flex;flex-direction:row;justify-content:center;align-items:flex-start;width:100%;min-height:calc(100vh - 255px)}.category-module,.card-module{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;width:100%}.non-interactive{pointer-events:none}.hidden{display:none}h2,p,div{cursor:default}input,select{cursor:pointer}.bold{font-weight:700}::-webkit-scrollbar{width:10px;background-color:#ffffff00}::-webkit-scrollbar-thumb{background-color:var(--bg-sidebar)}::-webkit-scrollbar-button:vertical:start:decrement{display:none}::-webkit-scrollbar-button:vertical:end:increment{display:none}@media screen and (min-width: 640px){.wrapper{width:90%}.container{min-height:calc(100vh - 185px)}}@media screen and (min-width: 1200px){.wrapper{width:75%}}@media screen and (min-width: 1920px){.wrapper{width:1200px}}
.admin-module{z-index:1}.admin-module__container{height:100%;width:100%}
.category-editor{margin-top:-40px;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;height:calc(100vh - 215px);width:100%;transition-duration:.3s}.category-editor .add-category-card{position:relative;margin:15px;padding:30px;padding:30px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:200px;width:300px;background-color:#fff;box-shadow:2px 4px 6px rgba(0,0,0,.3);border-radius:10px;transition-duration:.8s}.category-editor .add-category-card:hover{cursor:pointer;transform:scale(1.04);border:1px solid #555}.category-editor .add-category-card__title{font-size:20px;font-weight:700;color:#555}.category-editor .add-category-card__title:hover{cursor:pointer}.category-editor .add-category-card__plus-icon{margin-top:30px;height:80px;width:80px;background:url(assets/bcb39be5c111a8c039b9.svg) no-repeat center;background-size:cover}.category-editor .add-category-card__plus-icon:hover{cursor:pointer}@media screen and (min-width: 640px){.category-editor{height:calc(100vh - 145px)}}
.category-card{overflow:hidden;position:relative;margin:15px;height:200px;width:300px;background-color:#fff;box-shadow:2px 4px 6px rgba(0,0,0,.3);border-radius:10px;transition-duration:.3s}.category-card__main-view,.category-card__update-view{position:relative;top:0;left:0;padding:30px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;width:100%;transform:translateY(0);transition-duration:.3s}.category-card__title{font-size:20px;font-weight:700;color:var(--bg-sidebar)}.category-card__words{margin-top:30px;font-size:18px;font-weight:500;color:var(--bg-sidebar)}.category-card__number{font-size:20px;font-weight:700}.category-card__btn-wrapper{position:absolute;bottom:30px;left:calc(50% - 120px);display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:240px}.category-card__update-btn,.category-card__add-word-btn,.category-card__create-btn,.category-card__cancel-btn{display:flex;flex-direction:row;align-items:center;justify-content:center;height:35px;width:110px;font-size:16px;font-weight:700;color:var(--bg-sidebar);text-transform:uppercase;border:2px solid var(--bg-sidebar);border-radius:7px;background:none;transition-duration:.3s}.category-card__update-btn:hover,.category-card__update-btn:focus,.category-card__add-word-btn:hover,.category-card__add-word-btn:focus,.category-card__create-btn:hover,.category-card__create-btn:focus,.category-card__cancel-btn:hover,.category-card__cancel-btn:focus{background-color:var(--bg-sidebar);color:#fff}.category-card__update-btn:active,.category-card__add-word-btn:active,.category-card__create-btn:active,.category-card__cancel-btn:active{filter:brightness(1.2)}.category-card__cancel-btn{border-color:#db4545;color:#db4545}.category-card__cancel-btn:hover,.category-card__cancel-btn:focus{background-color:#db4545}.category-card__delete-btn{position:absolute;top:20px;right:22px;height:40px;width:40px;border-radius:20px;background:url(assets/586f3a29112fc01c02a6.svg) no-repeat center}.category-card__delete-btn:hover{cursor:pointer;border:2px solid #e63131}.category-card__fieldset{margin-top:20px}.category-card__legend{font-size:10px;font-weight:700;color:#555}.category-card__input{height:35px;font-size:20px;color:#555;border:none;border-bottom:1px solid #555;background:transparent}.view-hidden{display:none}.show-update-view{transform:translateY(-100%)}
/* kaushan-script-regular - latin */
@font-face {
  font-family: 'Kaushan Script';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url(assets/fb8d347f8f89429c5f84.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(assets/cbcd49c1a43cc7859f89.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

/* montserrat-regular - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local(''),
       url(assets/b71748ae4f80ec8c014d.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(assets/0659a9f4e90db5cf51b5.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-500 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 500;
  src: local(''),
       url(assets/091b209546e16313fd4f.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(assets/edd311588712a96bbf43.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}
/* montserrat-700 - latin */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local(''),
       url(assets/7dbcc8a5ea2289d83f65.woff2) format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
       url(assets/99271a835e1cae8c76ef.woff) format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

@mixin flex-column ($justify-content: flex-start, $align-items: center) {
  display: flex;
  flex-direction: column;
  justify-content: $justify-content;
  align-items: $align-items;
}

@mixin flex-row ($justify-content: space-between, $align-items: center) {
  display: flex;
  flex-direction: row;
  justify-content: $justify-content;
  align-items: $align-items;
}

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

.train-mode {
  --bg-color: #fcfcb0;
  --bg-color-down: #3af18d;
  --bg-sidebar: #238c52;
  #bg-image {
    left: -5%;
  }
}

.play-mode {
  --bg-color: #ffdad7;
  --bg-color-down: #42e2ff;
  --bg-sidebar: #1d979e;
  #bg-image {
    left: -105%;
    svg {
      filter: hue-rotate(50deg);
    }
  }
}

#bg-image {
  z-index: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 210%;
  transition-duration: 1s;

  svg {
    transition-duration: 1s;
    margin-bottom: -5px;
  }
}

body {
  position: relative;
  overflow-x: hidden;
  @include flex-column();
  min-height: 100vh;
  width: 100%;
  font-family: 'Montserrat', Verdana, sans-serif;
  font-weight: 500;
  background-color: var(--bg-color);
  transition-duration: 1s;
}

.wrapper {
  @include flex-column();
  width: 95%;
  height: 100%;
}

.container {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  min-height: calc(100vh - 255px);
}

.category-module,
.card-module {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.non-interactive {
  pointer-events: none;
}

.hidden {
  display: none;
}

h2,
p,
div {
  cursor: default;
}

input,
select {
  cursor: pointer;
}

.bold {
  font-weight: 700;
}

::-webkit-scrollbar {
  width: 10px;
  background-color: #ffffff00;
}
::-webkit-scrollbar-thumb {
  background-color: var(--bg-sidebar);
}
::-webkit-scrollbar-button:vertical:start:decrement {
  display: none;
}
::-webkit-scrollbar-button:vertical:end:increment {
  display: none;
}




@media screen and (min-width: 640px) {
  .wrapper {
    width: 90%;
  }
  .container {
    min-height: calc(100vh - 185px);
  }
}
@media screen and (min-width: 1200px) {
  .wrapper {
    width: 75%;
  }
}
@media screen and (min-width: 1920px) {
  .wrapper {
    width: 1200px;
  }
}

.card-container{margin:1em;display:flex;align-items:center;justify-content:space-around;cursor:pointer;perspective:450px}.card-container.flipped>.card{transform:rotateY(-180deg) translateX(-100%)}.card-container:hover>.card{box-shadow:2px 4px 15px rgba(0,0,0,.8)}.card{position:relative;width:70vw;height:70vw;border-radius:5px;box-shadow:2px 4px 6px rgba(0,0,0,.4);transform-origin:left;transition-duration:.4s;transform-style:preserve-3d}.card.flipped{transform:rotateY(-180deg) translateX(-100%);pointer-events:none}.card__front,.card__back{overflow:hidden;position:absolute;top:0;left:0;height:100%;width:100%;backface-visibility:hidden;border-radius:inherit;background-position:center !important;background-size:cover !important;transition-duration:1s}.card__back{transform:rotateY(180deg)}.card__front-title,.card__back-title{position:absolute;bottom:0;left:0;padding-left:13%;padding-right:13%;padding-bottom:5px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:100%;height:25%;font-size:20px;color:#fff;border-top:3px solid #fff;background-color:var(--bg-sidebar);transition:1s}.card__back-title{justify-content:center;color:#fff;border-top:3px solid #fff;background-color:#1d979e;transition:1s}.card__turn-btn{height:1.3em;width:1.3em;background:transparent url(assets/b93f3c1fad9b438440fc.svg) no-repeat center;background-size:cover}.card__true{z-index:2;visibility:hidden;opacity:0;position:absolute;top:0;left:0;right:0;background:rgba(106,255,235,.5);bottom:0;border-radius:5px;transition-duration:.2s}.true_on{visibility:visible;opacity:100}.hide-title{height:0;padding:0;font-size:0;border:none}.not-available{pointer-events:none}@media screen and (min-width: 500px){.card{width:200px;height:200px}}@media screen and (min-width: 640px){.card{width:240px;height:240px}}@media screen and (min-width: 1200px){.card{width:200px;height:200px}}
.word-editor{margin-top:-40px;overflow-x:hidden;overflow-y:auto;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;height:calc(100vh - 215px);width:100%;transition-duration:.3s}.word-editor .add-word-card{position:relative;margin:15px;padding:30px;padding:30px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:490px;width:300px;background-color:#fff;box-shadow:2px 4px 6px rgba(0,0,0,.3);border-radius:10px;transition-duration:.8s}.word-editor .add-word-card:hover{cursor:pointer;transform:scale(1.04);border:1px solid #555}.word-editor .add-word-card__title{font-size:24px;font-weight:700;color:#555}.word-editor .add-word-card__title:hover{cursor:pointer}.word-editor .add-word-card__plus-icon{margin-top:140px;height:100px;width:100px;background:url(assets/bcb39be5c111a8c039b9.svg) no-repeat center;background-size:cover}.word-editor .add-word-card__plus-icon:hover{cursor:pointer}@media screen and (min-width: 640px){.word-editor{height:calc(100vh - 145px)}}
.word-card{overflow:hidden;position:relative;margin:15px;height:490px;width:300px;background-color:#fff;box-shadow:2px 4px 6px rgba(0,0,0,.3);border-radius:10px;transition-duration:.3s}.word-card__main-view,.word-card__update-view{position:relative;top:0;left:0;padding:30px;display:flex;flex-direction:column;justify-content:flex-start;align-items:center;height:100%;width:100%;transform:translateY(0);transition-duration:.3s}.word-card__title{font-size:14px;font-weight:500;color:var(--bg-sidebar)}.word-card__title-wrapper{position:relative;display:flex;flex-direction:row;justify-content:flex-start;align-items:baseline;align-self:flex-start;width:200px;height:40px}.word-card__word,.word-card__translation{margin-left:10px;font-size:20px;font-weight:700;color:var(--bg-sidebar)}.word-card__audio{position:absolute;bottom:15px;left:60px;height:30px;width:30px;background-image:url(assets/5f704526a8dbde515940.svg);background-repeat:no-repeat;background-position:center;background-size:cover}.word-card__audio:hover{cursor:pointer}.word-card__image{min-height:220px;width:220px;background-repeat:no-repeat;background-position:center;background-size:cover;border-radius:7px}.word-card__change-btn,.word-card__cancel-btn,.word-card__save-btn{margin-top:20px;display:flex;flex-direction:row;align-items:center;justify-content:center;height:40px;width:120px;font-size:18px;font-weight:700;color:var(--bg-sidebar);text-transform:uppercase;border:2px solid var(--bg-sidebar);border-radius:7px;background:none;transition-duration:.3s}.word-card__change-btn:hover,.word-card__change-btn:focus,.word-card__cancel-btn:hover,.word-card__cancel-btn:focus,.word-card__save-btn:hover,.word-card__save-btn:focus{background-color:var(--bg-sidebar);color:#fff}.word-card__change-btn:active,.word-card__cancel-btn:active,.word-card__save-btn:active{filter:brightness(1.2)}.word-card__save-btn{margin-top:60px}.word-card__cancel-btn{border-color:#db4545;color:#db4545}.word-card__cancel-btn:hover,.word-card__cancel-btn:focus{background-color:#db4545}.word-card__delete-btn{position:absolute;top:20px;right:22px;height:40px;width:40px;border-radius:20px;background:url(assets/586f3a29112fc01c02a6.svg) no-repeat center}.word-card__delete-btn:hover{cursor:pointer;border:2px solid #e63131}.word-card__fieldset{margin-top:20px}.word-card__legend{font-size:10px;font-weight:700;color:#555}.word-card__input{height:35px;font-size:20px;color:#555;border:none;border-bottom:1px solid #555;background:transparent}.file-input{margin-top:20px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:100%}.file-input__title{font-size:16px;font-weight:700;color:#555}.file-input__label{height:35px;width:143px;background:url(assets/500e4480986418c28900.svg) no-repeat center;background-size:cover}.file-input__label:hover{cursor:pointer}.file-input__input{position:absolute;visibility:hidden}.view-hidden{display:none}.show-update-view{transform:translateY(-100%)}
.category{margin:1em;overflow:hidden;position:relative;display:block;width:70vw;height:70vw;border-radius:5px;box-shadow:0 1px 2px #000;background-color:#000;background-position:center;background-repeat:no-repeat;background-size:cover;transform-origin:bottom;transition-duration:.3s}.category:hover,.category:focus{transform:scale(1.05) translateY(-5px);box-shadow:0 10px 10px rgba(0,0,0,.5);outline:none}.category__title{position:absolute;bottom:0;left:0;padding-left:10%;padding-right:10%;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100%;height:25%;font-size:20px;text-transform:uppercase;color:#fff;border-top:3px solid #fff;background-color:var(--bg-sidebar);transition:1s}@media screen and (min-width: 500px){.category{width:200px;height:200px}}@media screen and (min-width: 640px){.category{width:240px;height:240px}}@media screen and (min-width: 1200px){.category{width:200px;height:200px}}
.footer{z-index:0;position:relative;bottom:0;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100vw;background-color:var(--bg-color);border-top:1px solid;border-image-slice:1;border-image-source:linear-gradient(to left, var(--bg-color), var(--bg-sidebar), var(--bg-color))}.footer__wrapper{display:flex;flex-direction:row;justify-content:space-between;align-items:center;width:95%;height:130px}.github{position:absolute;top:20px;left:40px;display:block;width:120px;height:45px;padding-left:45px;background-image:url(assets/92d6d4648d8a081b3530.svg);background-size:35px;background-repeat:no-repeat;background-position:left center;line-height:45px;color:var(--bg-sidebar);font-size:16px;font-family:"Open Sans",sans-serif;transition:.3s}.github:hover{color:var(--bg-color-down)}.copyright{position:absolute;bottom:20px;left:40px;color:var(--bg-sidebar)}.rss{display:block;position:absolute;left:170px;top:30px;font-family:"Open Sans",sans-serif;width:86px;height:32px;background-image:url(assets/9f98c7559acd421f36e8.svg);background-size:contain;background-repeat:no-repeat;background-position:left center;padding-right:111px}@media screen and (min-width: 640px){.footer__wrapper{height:60px;width:90%}.copyright{position:unset}.github{position:unset}.rss{position:unset}}@media screen and (min-width: 1200px){.footer__wrapper{width:75%}}@media screen and (min-width: 1920px){.footer__wrapper{width:1200px}}
.header{position:relative;display:flex;flex-direction:row;justify-content:space-between;align-items:center;height:94px;width:100%}.header__sidebar-btn{z-index:3;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-tap-highlight-color:transparent;margin-top:20px;display:flex;flex-direction:row;justify-content:center;align-items:center;outline:none;border:none;background:none}.header__sidebar-btn line{transition-duration:.3s;stroke:var(--bg-sidebar);stroke-linecap:round}.header__sidebar-btn:hover{cursor:pointer}.header__sidebar-btn:hover line{filter:brightness(1.2)}.header .sidebar-btn_active{position:fixed;margin-top:20px}.header .sidebar-btn_active line{stroke:#fff}.header .sidebar-btn_active line:nth-child(1){transform:translateX(5px) rotate(45deg)}.header .sidebar-btn_active line:nth-child(3){transform:translateY(16px) translateX(-14px) rotate(-45deg)}.header .sidebar-btn_active line:nth-child(2){display:none}.header .h1{display:none;position:absolute;left:70px;font-family:"Kaushan Script",Verdana,sans-serif;font-size:30px;color:var(--bg-color);text-shadow:1px 2px 4px rgba(3,44,34,.25);-webkit-text-stroke-width:1px;-webkit-text-stroke-color:#208f5f;transition-duration:1s}.header .game-btn{position:absolute;right:120px;display:flex;flex-direction:row;justify-content:center;align-items:center;width:130px;height:50px;text-transform:uppercase;background-color:#ffdad7;background-image:linear-gradient(to left, #ffdad7, #ffdad7 50%, var(--bg-sidebar) 50%, var(--bg-sidebar));background-position:100% 0;background-size:200% 100%;transition:background-position .3s ease-in,width .6s cubic-bezier(0.31, 0.93, 0.38, 1),height .6s cubic-bezier(0.31, 0.93, 0.38, 1),margin-right .6s cubic-bezier(0.31, 0.93, 0.38, 1),transform .7s cubic-bezier(0.8, 1.95, 0, 0.3);border:2px solid var(--bg-sidebar);border-radius:30px;transform:translateY(0)}.header .game-btn__title{font-size:22px;font-weight:500;color:var(--bg-sidebar);transition-duration:.3s;cursor:pointer}.header .game-btn__repeat-image{display:none;margin-top:-4px;height:40px;width:40px;background:url(assets/d8562ef32c751cbd108a.svg) no-repeat center;background-size:cover;cursor:pointer}.header .game-btn:hover{background-position:0 0}.header .game-btn:hover .game-btn__title{color:#fff}.header .game-btn_transform{width:60px;height:60px;border-radius:50%;background-image:none}.header .game-btn_transform .game-btn__title{display:none}.header .game-btn_transform .game-btn__repeat-image{display:block}.header .game-btn-off{transform:translateY(-100px)}.header .mode-switcher #mode-switcher__input{opacity:0;height:0;width:0}.header .mode-switcher__container{position:absolute;right:0;top:30px;cursor:pointer;display:inline-block;width:100px;height:35px;background:var(--bg-sidebar);box-shadow:2px 4px 15px rgba(6,12,70,.15);border:1px solid #208f6e;border-radius:50px;transition:.5s;overflow:hidden}.header .mode-switcher__container:hover{filter:brightness(110%);box-shadow:2px 4px 15px rgba(6,12,70,.3)}.header .mode-switcher__container:hover .mode-switcher__circle{box-shadow:2px 4px 15px rgba(6,12,70,.3)}.header .mode-switcher__circle{position:absolute;display:inline-block;top:4px;left:6px;width:25px;height:25px;border-radius:50%;border:1px solid #208f6e;background:#fff;box-shadow:2px 4px 15px rgba(6,12,70,.15);overflow:hidden;transition:all .5s ease-out}.header .mode-switcher #mode-switcher__input:checked+.mode-switcher__container .mode-switcher__circle{background:#f7ffff;transform:translateX(63px)}.header .mode-switcher #mode-switcher__input:checked+.mode-switcher__container .mode-switcher__train{visibility:hidden;opacity:0}.header .mode-switcher #mode-switcher__input:checked+.mode-switcher__container .mode-switcher__play{visibility:visible;opacity:100}.header .mode-switcher__train,.header .mode-switcher__play{position:absolute;color:#fff;top:8px;font-family:"Montserrat",Verdana,sans-serif;text-transform:uppercase;text-shadow:1px 2px 4px rgba(0,0,0,.2);font-size:18px;transition-duration:.5s}.header .mode-switcher__train{visibility:visible;opacity:100;right:8px}.header .mode-switcher__play{left:12px;visibility:hidden;opacity:0}@media screen and (min-width: 640px){.header .h1{display:inline;font-size:40px}.header .game-btn{margin-right:-65px;right:180px}.header .game-btn_transform{margin-right:-30px}}@media screen and (min-width: 1200px){.header .h1{left:100px;font-size:50px}}
.cover{overflow-y:scroll;z-index:1000;position:fixed;top:0;left:0;width:calc(100vw + 11px);height:100vh;background-color:rgba(0,0,0,.6)}.popup_opacity-up{animation:opacity-up ease-in .3s}@keyframes opacity-up{from{opacity:0}to{opacity:100}}.popup_opacity-down{animation:opacity-down ease-out .3s}@keyframes opacity-down{from{opacity:100}to{opacity:0}}.cover_hidden{display:none}.popup{position:absolute;top:0;left:0;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100vw;height:100vh;background-color:var(--bg-sidebar);box-shadow:0 0 15px rgba(0,0,0,.2)}.popup__form{display:flex;flex-direction:column;align-items:center;justify-content:flex-start}.popup__title{margin-top:20px;font-family:"Roboto",sans-serif;font-size:24px;font-weight:500;color:#fff;text-shadow:1px 2px 5px rgba(0,0,0,.5)}.popup .input-wrapper{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%}.popup .register-input{margin-top:30px}.popup .buttons-wrapper{margin-top:50px;display:flex;flex-direction:row;align-items:center;justify-content:space-between;width:250px}.popup .button_add-user,.popup .button_cancel{display:flex;flex-direction:row;justify-content:center;align-items:center;width:100px;height:35px;font-size:16px;color:#fff;background:none;border:1px solid #fff;border-radius:5px;transition-duration:.3s}.popup .button_add-user:hover,.popup .button_add-user:focus,.popup .button_cancel:hover,.popup .button_cancel:focus{background-color:#fff;box-shadow:2px 4px 6px rgba(0,0,0,.3);color:var(--bg-sidebar);font-weight:700}.popup .button_add-user:active,.popup .button_cancel:active{box-shadow:1px 1px 2px rgba(0,0,0,.6)}@media screen and (min-width: 640px){.popup{position:absolute;top:calc(50vh - 190px);left:calc(50vw - 200px);height:400px;width:380px;justify-content:flex-start}}
.register-input{display:flex;flex-direction:column;align-items:center;justify-content:center;width:350px;height:60px;background-color:#ebebeb;border-radius:2px;box-shadow:2px 2px 5px rgba(0,0,0,.5)}.register-input__fieldset{position:relative;height:40px;width:300px;border:none}.register-input__legend{margin-left:5px;padding:3px;font-size:10px;font-weight:700;color:#646464}.register-input__input{display:flex;width:270px;font-size:16px;color:#413b3b;border:none;outline:none;background-color:transparent;border-bottom:1px solid gray}.register-input__input:valid{border-color:#36be5f}.register-input__input:invalid{border-color:#e65c5c}.register-input__input:valid+div{background:url(assets/adb39afb534e96a5e7db.svg) no-repeat center}.register-input__input:invalid+div{background:url(assets/89809999358fb0bd177b.svg) no-repeat center}.register-input__valid-icon{position:absolute;top:0;right:0;width:15px;height:15px;background-size:cover}
.progress-bar{overflow:hidden;position:relative;text-align:right;width:100%;height:30px}.progress-bar__right-icon,.progress-bar__wrong-icon{display:inline-block;margin-left:2px;margin-right:2px;height:30px;width:30px}.progress-bar__right-icon{background:url(assets/b7bb99011ffc523923fd.svg) no-repeat center;background-size:cover}.progress-bar__wrong-icon{background:url(assets/1344095ab714912c2359.svg) no-repeat center;background-size:cover}
.sidebar{z-index:1;position:fixed;left:0;top:0;padding:80px 0;display:flex;flex-direction:column;justify-content:center;align-items:center;width:75vw;height:100vh;background:var(--bg-sidebar);transition-duration:.3s;transition-timing-function:ease-in-out;transform:translateX(-102%);box-shadow:4px 0 20px rgba(0,0,0,.35)}.sidebar__wrapper{overflow-y:scroll;width:100%}.sidebar__list{display:flex;flex-direction:column;justify-content:stretch;align-items:center;width:100%}.sidebar__list li{list-style-type:none;width:100%}.sidebar__link{display:flex;flex-direction:row;justify-content:center;align-items:center;height:50px;width:100%;color:#fff;text-shadow:1px 2px 3px rgba(0,0,0,.35);font-size:20px;text-decoration:none;text-transform:uppercase}.sidebar__link:hover,.sidebar__link:focus{filter:brightness(1.2);background-color:var(--bg-sidebar);outline:none}.sidebar__link:active{filter:brightness(1.4);outline:none}.sidebar .active-route{border-left:5px solid #fff;border-right:5px solid var(--bg-sidebar);background-color:var(--bg-sidebar);filter:brightness(1.2);pointer-events:none}.sidebar .main-link{margin-bottom:20px}.sidebar .statistics-link{margin-top:20px}.sidebar .statistics-link,.sidebar .main-link,.sidebar .control-link{font-weight:700}.sidebar .register-btn{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:row;justify-content:center;align-items:center;width:100px;height:40px;font-size:16px;color:#fff;text-transform:uppercase;background:none;border:1px solid #fff;border-radius:5px;transition-duration:.3s}.sidebar .register-btn:hover{background-color:#fff;color:var(--bg-sidebar);font-weight:700}.sidebar .btn-hidden{display:none}.sidebar .hide{transform:translateX(-102%)}@media screen and (min-width: 640px){.sidebar{width:50vw}.sidebar__link{font-size:24px;height:50}}@media screen and (min-width: 1200px){.sidebar{width:calc(25vw / 2 + 75px)}.sidebar__link{font-size:18px;height:40px}}@media screen and (min-width: 1920px){.sidebar{width:calc((100vw - 1200px) / 2 + 75px)}.sidebar__link{font-size:30px;height:60px}}@media screen and (max-height: 600px)and (orientation: landscape){.sidebar__link{font-size:24px;height:40px}}
.statistics{z-index:1;margin-top:-124px;min-height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:var(--bg-color)}.statistics__btn-wrapper{margin-top:30px;display:flex;flex-direction:column;align-self:flex-end;justify-content:space-between;align-items:flex-end}.statistics__button{margin-bottom:5px;padding-left:15px;padding-right:15px;display:flex;align-items:center;justify-content:center;height:40px;font-size:16px;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:1.5px;background-color:var(--bg-sidebar);border:none;border-radius:20px;box-shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4);transition-duration:.2s}.statistics__button:hover{transform:scale(1.05);box-shadow:0 3px 6px rgba(0,0,0,.12),0 3px 6px rgba(0,0,0,.15)}.statistics__button:active{box-shadow:0 1px 3px rgba(0,0,0,.3),0 1px 2px rgba(0,0,0,.4)}.table{margin-top:20px;display:table;width:100%;border-collapse:collapse;border-color:#505050}.table-icon{display:inline-block;height:15px;width:15px;background-repeat:no-repeat;background-position:center;background-size:cover}.table-icon:hover{cursor:pointer}.train-icon{background-image:url(assets/9c9b13db6b6753bdb894.svg)}.play-icon{background-image:url(assets/8e965f3fc838e40ba41c.svg)}.percentage-icon{background-image:url(assets/58487ab40dbe7b6d1197.svg)}.true-card-icon{background-image:url(assets/113f32a0f3f02ff9d68c.svg)}.t-body{display:table-row-group}.tr-header{display:table-row;background-color:var(--bg-sidebar)}.tr-body{border-bottom:.5px solid var(--bg-sidebar)}.tr-body:hover td{background-color:var(--bg-sidebar);color:#fff}.th{display:table-cell;height:16px;vertical-align:middle;font-size:12px;font-weight:normal;color:#fff;text-shadow:1px 2px 5px rgba(0,0,0,.3)}.th:not(:nth-child(1)):hover{cursor:pointer}.td{display:table-cell;height:16px;vertical-align:middle;text-align:center;font-size:12px;font-weight:300;color:var(--bg-sidebar);text-shadow:1px 2px 5px rgba(0,0,0,.3)}.sort-arrow{display:none;margin-left:3px;margin-bottom:2px;opacity:0;height:15px;width:10px;background:url(assets/28fc555e386956e33dbc.svg) no-repeat center;background-size:cover}.sort-arrow:hover{cursor:pointer}.arrow-down{opacity:100}.arrow-up{opacity:100;transform:rotate(180deg)}@media screen and (min-width: 640px){.statistics{padding-bottom:70px}.statistics__btn-wrapper{flex-direction:row;align-self:flex-end;justify-content:space-between;align-items:center;width:400px}.table{margin-top:20px}.table-icon{height:20px;width:20px}.th{padding-left:5px;display:table-cell;height:30px;vertical-align:middle;font-size:16px;font-weight:normal;color:#fff;text-shadow:1px 2px 5px rgba(0,0,0,.3)}.th:not(:nth-child(1)):hover{cursor:pointer}.td{padding:1px;display:table-cell;height:20px;vertical-align:middle;text-align:center;font-size:16px;font-weight:300;color:var(--bg-sidebar);text-shadow:1px 2px 5px rgba(0,0,0,.3)}.sort-arrow{margin-left:2px;margin-bottom:2px;display:inline-block;height:12px;width:7px}}@media screen and (min-width: 1200px){.statistics{padding-bottom:70px;min-height:100vh;width:100%;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;background-color:var(--bg-color)}.statistics__btn-wrapper{margin-top:30px;display:flex;flex-direction:row;align-self:flex-end;justify-content:space-between;align-items:center;width:400px}.table{margin-top:20px;display:table;width:100%;border-collapse:collapse;border-color:#505050}.table-icon{display:inline-block;height:30px;width:30px;background-repeat:no-repeat;background-position:center;background-size:cover}.table-icon:hover{cursor:pointer}.train-icon{background-image:url(assets/9c9b13db6b6753bdb894.svg)}.play-icon{background-image:url(assets/8e965f3fc838e40ba41c.svg)}.percentage-icon{background-image:url(assets/58487ab40dbe7b6d1197.svg)}.true-card-icon{background-image:url(assets/113f32a0f3f02ff9d68c.svg)}.t-body{display:table-row-group}.tr-header{display:table-row;background-color:var(--bg-sidebar)}.tr-body{border-bottom:.5px solid var(--bg-sidebar)}.tr-body:hover td{background-color:var(--bg-sidebar);color:#fff}.th{padding-left:20px;display:table-cell;height:40px;vertical-align:middle;font-size:20px;font-weight:normal;color:#fff;text-shadow:1px 2px 5px rgba(0,0,0,.3)}.th:not(:nth-child(1)):hover{cursor:pointer}.td{padding:3px;display:table-cell;height:35px;vertical-align:middle;text-align:center;font-size:20px;font-weight:300;color:var(--bg-sidebar);text-shadow:1px 2px 5px rgba(0,0,0,.3)}.sort-arrow{margin-left:5px;margin-bottom:3px;display:inline-block;opacity:0;height:20px;width:15px;background:url(assets/28fc555e386956e33dbc.svg) no-repeat center;background-size:cover}.sort-arrow:hover{cursor:pointer}}
.summary{z-index:2;display:flex;flex-direction:column;justify-content:flex-start;align-items:center}.summary__image{display:block;height:300px;width:300px}.summary__title{margin:10px;font-family:"Montserrat",sans-serif;font-size:60px;text-align:center;color:var(--bg-color-down);-webkit-text-stroke-width:2px;-webkit-text-stroke-color:var(--bg-sidebar);text-shadow:2px 4px 6px rgba(0,0,0,.3)}.summary .mistakes{font-weight:700;color:#e78b8b;-webkit-text-stroke-width:4px;-webkit-text-stroke-color:#ec2f2f}.success-image{background:url(assets/ad052a3eb2357e94e8bb.png) no-repeat center;background-size:contain}.failure-image{background:url(assets/0d3abe35e8d90ffdbb7e.png) no-repeat center;background-size:contain}@media screen and (min-width: 640px){.summary{flex-direction:row;justify-content:center;align-items:flex-end}.summary__image{display:block;height:400px;width:400px}.summary__title{margin:30px 30px 60px 30px;text-align:right}}@media screen and (min-width: 1200px){.wrapper{width:75%}}@media screen and (min-width: 1920px){.wrapper{width:1200px}}