@keyframes spin {
  100% {
    transform: rotate(360deg);
    filter: hue-rotate(360deg); } }

@keyframes fadeIn {
  0% {
    top: 450px;
    opacity: 0; }
  100% {
    opacity: 1;
    top: 350px; } }

@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, 0, 0); }
  20%,
  80% {
    transform: translate3d(2px, 0, 0); }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, 0, 0); }
  40%,
  60% {
    transform: translate3d(4px, 0, 0); } }

@keyframes clockwise {
  0% {
    top: -5px;
    left: 0; }
  12% {
    top: -2px;
    left: 2px; }
  25% {
    top: 0;
    left: 5px; }
  37% {
    top: 2px;
    left: 2px; }
  50% {
    top: 5px;
    left: 0; }
  62% {
    top: 2px;
    left: -2px; }
  75% {
    top: 0;
    left: -5px; }
  87% {
    top: -2px;
    left: -2px; }
  100% {
    top: -5px;
    left: 0; } }

@keyframes counterclockwise {
  0% {
    top: -5px;
    right: 0; }
  12% {
    top: -2px;
    right: 2px; }
  25% {
    top: 0;
    right: 5px; }
  37% {
    top: 2px;
    right: 2px; }
  50% {
    top: 5px;
    right: 0; }
  62% {
    top: 2px;
    right: -2px; }
  75% {
    top: 0;
    right: -5px; }
  87% {
    top: -2px;
    right: -2px; }
  100% {
    top: -5px;
    right: 0; } }

:root {
  background-color: #ecf5ff;
  font-size: 62.5%; }

* {
  box-sizing: border-box;
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  color: #333;
  user-select: none;
  /* supported by Chrome and Opera */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  -webkit-user-drag: none; }

h1 {
  font-size: 5.4rem;
  color: #56a5eb;
  margin-bottom: 5rem; }

h1 span {
  font-size: 2.4rem;
  font-weight: 500; }

h2 {
  font-size: 4.2rem;
  margin-bottom: 4rem;
  font-weight: 700; }

h3 {
  font-size: 2.8rem;
  font-weight: 500; }

h3,
h4 {
  margin-bottom: 1rem; }

.container {
  padding: 10px 0;
  width: 80rem;
  height: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 80rem;
  max-height: 90vh;
  margin: 0 auto;
  margin-top: 20px;
  padding: 2rem; }
  .container.play {
    box-shadow: 0 0.2rem 1rem 0 rgba(86, 185, 235, 0.8);
    height: 550px; }
  .container.highscores {
    box-shadow: 0 0.2rem 1rem 0 rgba(86, 185, 235, 0.8);
    width: 400px; }

.logo {
  background-image: url(../icons/logo_m.png);
  background-repeat: no-repeat;
  top: 20px;
  left: 0;
  right: 0;
  margin: 2rem auto 9rem auto;
  height: 137px;
  width: 484px;
  display: block; }

.text-primary {
  color: #56a5eb; }

.text-secondary {
  color: #77dd77; }

.text-light {
  color: #fff; }

.text-dark {
  color: #333; }

.bg-primary {
  background-color: #56a5eb; }

.bg-secondary {
  background-color: #77dd77; }

.bg-light {
  background-color: #fff; }

.bg-dark {
  background-color: #333; }

.container > * {
  width: 100%; }

.flex-column {
  display: flex;
  flex-direction: column; }

.flex-center {
  justify-content: center;
  align-items: center; }

.text-center {
  text-align: center; }

.hidden {
  display: none; }

.btn {
  font-size: 1.8rem;
  padding: 1rem 0;
  width: 20rem;
  text-align: center;
  border: 0.1rem solid #56a5eb;
  margin-bottom: 1rem;
  text-decoration: none;
  color: #56a5eb;
  background-color: #fff; }
  .btn:hover {
    cursor: pointer;
    box-shadow: 1pt 3pt 2pt 1pt rgba(86, 185, 235, 0.4);
    transform: translateY(-0.3rem);
    transition: transform 150ms; }
  .btn:active {
    background-color: #e8f4f8;
    transform: scale(0.95); }
  .btn[disabled] {
    opacity: 0.5; }
  .btn[disabled]:hover {
    cursor: not-allowed;
    box-shadow: none;
    transform-origin: none; }
  .btn-scale1-2 {
    font-size: 3rem;
    width: 24rem;
    padding: 1.5rem 0;
    margin-top: 2rem; }
  .btn-scale1-5 {
    transform: scale(1.5); }
  .btn-scale2 {
    transform: scale(2); }

#setup {
  margin-top: 11rem; }
  #setup h2 {
    font-size: 3.5rem;
    padding-left: 30px;
    color: #56a5eb;
    margin-bottom: 1rem;
    justify-self: flex-start; }

.setup {
  box-shadow: 0 0.2rem 1rem 0 rgba(86, 185, 235, 0.8);
  padding: 10px 0;
  align-items: center;
  justify-items: center;
  margin-bottom: 2rem; }

.container-header {
  display: flex;
  flex-direction: row; }
  .container-header .info {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 1rem;
    border: 0.1rem solid #56a5eb;
    border-radius: 50%;
    transition: background-color 300ms ease-in-out; }
    .container-header .info i {
      color: #56a5eb;
      font-size: 1.4rem; }
    .container-header .info .tooltip-text {
      width: 170px;
      position: fixed;
      display: block;
      opacity: 0;
      visibility: hidden;
      background-color: #56a5eb;
      color: #fff;
      font-size: 1.4rem;
      font-weight: bold;
      padding: 6px 17px;
      box-shadow: 0 0.2rem 1rem 0 rgba(86, 185, 235, 0.8);
      border-radius: 10px;
      z-index: 8; }
  .container-header .info:hover {
    background-color: #56a5eb; }
    .container-header .info:hover i {
      color: #fff; }
    .container-header .info:hover .tooltip-text {
      opacity: 1;
      visibility: visible; }
  .category-container .container-header {
    justify-self: flex-start;
    grid-column-start: 1;
    grid-column-end: 5; }
  .length-container .container-header {
    justify-self: flex-start;
    grid-column-start: 1;
    grid-column-end: 4; }
  .difficulty-container .container-header {
    justify-self: flex-start;
    grid-column-start: 1;
    grid-column-end: 4; }

.category-container {
  margin-top: 5rem;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 1.5rem;
  padding: 25px 0; }
  .category-container .category {
    background-color: #fff;
    border: 0.1rem solid #56a5eb;
    position: relative;
    width: 8rem;
    height: 8rem;
    border-radius: 30%;
    overflow: hidden; }
    .category-container .category-hidden {
      position: relative;
      background-color: #fff;
      height: 100%;
      top: -100%;
      left: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      transition: all 1000ms cubic-bezier(0, 1, 0.5, 1);
      pointer-events: none; }
    .category-container .category-displayed {
      background-color: #fff;
      position: relative;
      height: 100%;
      top: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 1000ms cubic-bezier(0, 1, 0.5, 1);
      pointer-events: none; }
    .category-container .category p {
      font-size: 1.9rem;
      font-weight: bold;
      pointer-events: none; }
    .category-container .category i {
      font-size: 5rem;
      pointer-events: none; }
    .category-container .category .long-text {
      font-size: 1.4rem; }
    .category-container .category:hover {
      cursor: pointer;
      box-shadow: 0pt 0pt 2pt 2pt #add8e6;
      transition: transform 150ms; }
      .category-container .category:hover .category-displayed {
        transform: translateX(-100%); }
      .category-container .category:hover .category-hidden {
        left: 0; }
    .category-container .category:active {
      transform: scale(0.95); }
      .category-container .category:active .category-hidden {
        background-color: #e8f4f8; }
      .category-container .category:active .category-displayed {
        background-color: #e8f4f8; }

.length-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
  padding: 25px 0; }

.difficulty-container {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  row-gap: 1rem;
  padding: 25px 0; }

.btn-selected {
  background-color: #56a5eb;
  color: #fff;
  transition: transform 100ms ease-in; }
  .category-container .btn-selected {
    background-color: #56a5eb;
    box-shadow: 0 0 3px 3px rgba(138, 43, 226, 0.4); }
  .btn-selected .category-displayed {
    background-color: #56a5eb;
    color: #fff; }
  .btn-selected .category-hidden {
    background-color: #56a5eb;
    color: #fff; }
  .btn-selected p {
    color: #fff; }
  .btn-selected i {
    color: #fff; }

.pageChange {
  display: flex;
  flex-direction: row; }
  .pageChange a {
    text-decoration: none;
    color: #56a5eb;
    font-size: 2.2rem; }
  .pageChange .back {
    width: 120px;
    height: 45px;
    border-radius: 50px; }
  .pageChange .start {
    width: 120px;
    height: 45px;
    margin-left: 20px;
    border-radius: 50px;
    background-color: #56a5eb; }
    .pageChange .start a {
      color: #fff; }
    .pageChange .start:active {
      background-color: #145da0; }

.choice-container {
  display: flex;
  margin-bottom: 0.5rem;
  width: 100%;
  font-size: 1.8rem;
  border: 0.1rem solid rgba(86, 165, 235, 0.25);
  background: #fff;
  --webkit-transition: background-color 500ms;
  -ms-transition: background-color 500ms;
  transition: background-color 500ms; }
  .choice-container:hover {
    cursor: pointer;
    box-shadow: 1pt 3pt 2pt 1pt rgba(86, 185, 235, 0.4);
    transform: translateY(-0.3rem);
    transition: transform 150ms; }
  .choice-container:active {
    background-color: #add8e6;
    transform: scale(0.97); }

.choice-prefix {
  padding: 1.5rem 2.5rem;
  background: #56a5eb;
  color: #fff; }

.choice-text {
  padding: 1.5rem; }

.loader {
  border: 10px solid;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border-color: orange transparent transparent;
  animation: spin 0.5s linear infinite;
  position: fixed;
  margin: auto; }

#hud {
  display: flex;
  justify-content: space-between; }

.hud-prefix {
  text-align: center;
  font-size: 2rem; }

.hud-main-text {
  text-align: center; }

#progressBar {
  width: 20rem;
  height: 4rem;
  border: 0.3rem solid #56a5eb;
  margin-top: 1.5rem; }
  #progressBar #progressBarFull {
    height: 3.4rem;
    background-color: #56a5eb;
    width: 0%;
    transition: width 300ms; }

#score {
  transition: color 500ms; }

form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center; }

#endContainer {
  margin: 0 auto;
  margin-top: 40px;
  max-width: 450px;
  max-height: 650px;
  display: flex;
  background: #fff;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  border-radius: 40px;
  box-shadow: 0 0.2rem 1rem 0 rgba(86, 185, 235, 0.5); }

#endHero {
  text-align: center;
  width: 100%;
  font-size: 8rem;
  color: #77dd77;
  margin-bottom: 4rem; }

#endDescr {
  font-size: 3rem;
  font-weight: 900;
  margin-bottom: 1rem; }

#end span#finalScore {
  font-size: 5.4rem;
  font-weight: 900;
  color: #77dd77;
  margin-bottom: 3rem;
  border-radius: 30px;
  background-color: rgba(152, 251, 152, 0.1);
  text-align: center;
  width: 70%;
  box-shadow: inset 0 0 4px #8fbc8f; }

input {
  margin-bottom: 3rem;
  width: 20rem;
  padding: 1.5rem;
  font-size: 1.8rem;
  border: none;
  border-radius: 10px;
  border: 2pt solid rgba(0, 255, 255, 0.8);
  text-align: center;
  outline: none; }
  input::placeholder {
    color: #adadad; }

.alertBgOverlay {
  background: rgba(114, 188, 212, 0.8);
  position: absolute;
  display: none;
  width: 100vw;
  height: 100vh;
  z-index: 8;
  overflow: hidden;
  transition: background 700ms ease; }

.alertBox {
  position: absolute;
  display: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 340px;
  height: 55px;
  background: #fff;
  padding-right: 10px;
  box-shadow: 0 0.4rem 1.5rem 0 rgba(0, 0, 0, 0.3);
  border: #4ed34e solid 1px;
  border-radius: 13px;
  z-index: 10;
  animation: fadeIn ease 1000ms; }
  .alertBox .alertStatus {
    text-align: center;
    font-size: 3.5rem;
    width: 60px;
    height: 100%;
    color: #fff;
    border-radius: 11px 0 0 11px; }
  .alertBox .alertText {
    color: #77dd77;
    font-size: 2.5rem;
    font-weight: bold;
    padding: 0 10px;
    padding-top: 0; }
  .alertBox .success {
    background: #4ed34e; }
  .alertBox .error {
    background: #ff6961; }

/* The close button */
#highScoresList {
  list-style: none;
  margin-bottom: 4rem; }

.high-score {
  font-size: 2.8rem;
  margin-bottom: 0.5rem; }
  .high-score:hover {
    transform: scale(1.025); }

.hsInfo {
  font-size: 2.8rem; }