@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');
/*Common*/
* {
  outline: none;
  outline-color: transparent;
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-weight: 400;
}
*:not(input):not(select) {
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}
* {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
*::-webkit-scrollbar {
  width: 0; height: 0;
  display: none;
}
html {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  overflow: hidden;
}
body {
  width: 100%; height: 100%;
  margin: 0; padding: 0;
  text-align: center;
}
#app {
  width: 100%; height: 100%;
  min-height: 100%; overflow-y: auto;
  background-image: url('./assets/background.svg');
  background-size: min(15em, 30vw);
  background-repeat: repeat;
  background-position: top center;
  background-color: #F5F5F5;
  color: #225794;
  padding: 2em 0;
}
.container {
  width: 100%;
  max-width: 900px;
  text-align: center;
  position: relative;
  margin: 0 auto;
  padding: 2em .75em;
  overflow-x: hidden; overflow-y: auto;
  z-index: 1;
}
/*Elements*/
.button, .cta {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  border: none;
  font-size: 1em; line-height: 1em;
  width: fit-content; height: auto;
  min-width: 10em;
  text-align: center;

  margin: .75em auto; padding: .5em 1em;
  border-radius: .25em;
  color: white; background-color: #225794;
  border: .075em solid #225794;
}
.button:hover, .cta:hover {
  background-color: #E39825;
  border-color: #E39825;
}
.button-sub, .cta-sub {
  color: #225794; background-color: white;
}
.button-sub:hover, .cta-sub:hover {
  color: #E39825; background-color: white;
}
.icon {
  display: inline-block;
  font-size: 1em;
	border: .1em solid #225794;
  color: #225794;
	height: 1.9em; width: auto; line-height: 1.9em;
	padding: 0 .5em; margin: auto .375em;
  border-radius: 50%;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
}
.icon_button {
  -webkit-transition: background-color .3s ease;
  -moz-transition: background-color .3s ease;
  transition: background-color .3s ease;
  cursor: pointer;
  background-color: rgba(34, 87, 148, .25);
  transition: all .3s ease;
}
.icon_button:hover, .icon_button:focus {
  color: #E39825;
  border-color: #E39825;
  background-color: rgba(227, 152, 37, .375);
}
form, .form {
  padding: .75em;
  width: 100%; max-width: 600px;
  margin: auto;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]), select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
  width: 15em; max-width: calc(100% - 2.5em); height: 2em;
  margin: auto; padding: .5em .75em;
  font-size: .95em; line-height: 1em;
  border-radius: .25em;
  color: #225794; background-color: white;
  border: .1em solid #225794;
}
input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):hover, select:hover, input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):focus, select:focus, input:not([type="radio"]):not([type="checkbox"]):not([type="file"]):active, select:active {
  border-color: #E39825;
}
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type="number"] {
  -moz-appearance: textfield;
}
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  cursor: pointer;
}
.invalid input {
  border-color: #D10000 !important;
}
.invalid label {
  color: #D10000 !important;
}
input::-webkit-input-placeholder {
  color: #909090;
}
input:-moz-placeholder {
  color: #909090;
}
input::-moz-placeholder {
  color: #909090;
}
input:-ms-input-placeholder {
  color: #909090;
}
input::placeholder {
  color: #909090;
}
a {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  text-decoration: underline;
  cursor: pointer;
  -webkit-transition: all .3s ease;
  -moz-transition: all .3s ease;
  transition: all .3s ease;
}
a:hover {
  text-decoration: none;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  text-transform: uppercase;
  margin: auto;
  padding: .75em 0;
}
p {
  margin: 0 auto;
  padding: .5em 0;
}
span {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
}
:disabled {
  pointer-events: none !important;
  opacity: .5;
}
/*Utilities*/
.center {
 text-align: center;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.justify {
  text-align: justify;
  text-justify: inter-word;
}
strong, .bold {
  font-weight: 700;
}
em, .italic {
  font-style: italic;
}
u, .underline {
  text-decoration: underline;
}
.smaller {
  font-size: 85%;
}
.smallest {
  font-size: 70%;
}
.bigger {
  font-size: 115%;
}
.biggest {
  font-size: 125%;
}
.upper {
  text-transform: uppercase;
}
.pointer {
  cursor: pointer;
}
.inline {
  display: inline-block;
}
.centered {
  width: 80%; max-width: 650px;
  margin: 0 auto;
}
.disabled {
  pointer-events: none !important;
  cursor: default !important;
  opacity: .7 !important;
  filter: grayscale(1) !important;
}
.padder {
  padding: 1em;
}
.marger {
  padding-left: 1em;
  padding-right: 1em;
}
.row {
  width: 100%;
}
.column {
  display: inline-block;
  vertical-align: top;
}
.column1 {
  width: calc(100% / 12 * 1);
}
.column2 {
  width: calc(100% / 12 * 2);
}
.column3 {
  width: calc(100% / 12 * 3);
}
.column4 {
  width: calc(100% / 12 * 4);
}
.column5 {
  width: calc(100% / 12 * 5);
}
.column6 {
  width: calc(100% / 12 * 6);
}
.column7 {
  width: calc(100% / 12 * 7);
}
.column8 {
  width: calc(100% / 12 * 8);
}
.column9 {
  width: calc(100% / 12 * 9);
}
.column10 {
  width: calc(100% / 12 * 10);
}
.column11 {
  width: calc(100% / 12 * 11);
}
.column12 {
  width: calc(100% / 12 * 12);
}
.header {
  padding: .25em 1em; margin: .5em .75em;
}
.image {
  display: block;
  width: auto; max-width: 100%;
  height: auto; max-height: 100%;
  margin: auto;
}
.line {
  margin: .5em auto;
}
.info {
  width: 75%; height: auto;
  margin: .5em auto;
}
.error {
  display: inline-block;
  font-style: italic;
  color: white !important; background-color: #E39825 !important;
  padding: .25em .625em; margin: .5em auto;
  border-radius: .125em;
}
.desktop {
  display: block;
}
.mobile {
  display: none;
}
.hidden {
  display: none;
}
.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.grow {
  flex-grow: 1;
}
.loader {
  width: 3.5em; height: 3.5em;
  border: .375em solid #225794;
  border-bottom-color: #E39825;
  border-radius: 50%;
  margin: 1em auto;
  animation: rotation 1s linear infinite;
}
@-webkit-keyframes rotation {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}
@keyframes rotation {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.box {
  display: table;
  padding: .25em 1em; margin: .5em auto;
  background-color: rgba(255, 255, 255, .95);
  border-radius: .25em;
  box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
}
#logo {
  padding: 0 1em;
  margin: 0 auto -1em;
}
#logo > * {
  display: inline-block;
}
#logo > img {
  width: 20em; max-width: 80%;
}
#logo > span {
  padding-left: .25em;
  transform: translateY(-.125em);
}
form > .line > * {
  margin: .25em auto;
}
form > .line > label {
  display: block;
  width: 100%;
}
form > .line > .button:first-child {
  margin-top: 1.375em;
}
form > hr {
  margin: 1.125em auto 1em;
  border: none;
  border-top: .01em solid #225794;
}
#moves, #moves * {
  -webkit-user-select: text;
  -khtml-user-select: text;
  -moz-user-select: text;
  -ms-user-select: text;
  -o-user-select: text;
  user-select: text;
}
#header {
  position: fixed;
  top: 1em; left: .375em; right: .375em; bottom: auto;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#header .icon_button {
  padding: 0;
  font-size: 1.5em;
  line-height: 1.75em;
  width: 1.5em;
}
#menu {
  position: fixed;
  z-index: 999;
  left: 1em; top: 5em; bottom: auto; right: auto;
  max-width: calc(100vw - 2em); max-height: calc(100vh - 10em);
  padding: .5em; margin: auto;
  background-color: white;
}
#menu li {
  list-style: none;
  padding: .5em .75em;
  border-radius: .125em;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
#menu li:not(:first-of-type) {
  margin-top: .25em;
}
#menu li:not(:last-of-type) {
  margin-bottom: .25em;
}
#menu li:not(.android)::before {
  content: '';
  width: .6em; height: .4em;
  margin-right: .5em;
  border-radius: 50%;
  border-radius: 35% 65% 65% 35% / 50% 50% 50% 50%;
  border: .0875em solid #225794;
  background-color: rgba(34, 87, 148, .25);
}
#menu li:not(.android):hover, #menu li:not(.android):focus {
  background-color: rgba(227, 152, 37, .375);
}
#menu hr {
  margin: .5em;
  border: none;
  border-top: .01em solid #225794;
}
#menu::before {
  content: '';
  z-index: -1;
  position: fixed;
  width: 100vw; height: 100vh;
  top: 0; left: 0; bottom: 0; right: 0;
  background-color: rgba(0, 0, 0, .5);
}
#menu::after {
  content: '';
  z-index: -1;
  position: absolute;
  width: 200%; height: 200%;
  bottom: -18.5%; right: -30%; top: auto; left: auto;
  background-color: white;
  border-radius: 50%;
  border-radius: 65% 35% 50% 50% / 0% 50% 50% 100%;
  box-shadow: 0 0 0.75em rgba(0, 0, 0, .25);
}
/*Transition*/
.grow-enter-active {
  transition: all .6s ease;
  transform-origin: top left;
}
.grow-leave-active {
  transition: all .3s ease;
  transform-origin: bottom right;
}
.grow-enter-from, .grow-leave-to {
  opacity: 0;
  font-size: 0;
}

/*Queries*/
@media screen and (max-width: 900px){
  #app {
    font-size: 2vw;
  }
}
@media screen and (max-width: 600px){
  #app {
    font-size: 3vw;
  }
  .desktop {
    display: none;
  }
  .mobile {
    display: block;
  }
  .column {
    display: block; width: 100% !important;
  }
  .table {
    flex-direction: column;
  }
}
@media screen and (max-width: 400px){
  #app {
    font-size: 3.375vw;
  }
}
/*Modal*/
.shadow {
  position: fixed;
  height: 100%; width: 100%;
  top: 0; left: 0;  bottom: 0; right: 0;
  z-index: 1001;
  background-color: rgba(0, 0, 0, .5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.modal {
  position: absolute;
  height: auto; max-height: 90%;
  width: 90%; max-width: 500px;
  padding: .25em 1.5em 1.25em;
  text-align: center;
}
.modal > .close {
  position: absolute;
  top: .75em; right: .75em; left: auto; bottom: auto;
  margin: auto;
  cursor: pointer;
  line-height: 1.675em;
}
.modal .card {
  border-radius: .25em;
  border: .075em solid #225794;
  padding-left: .25em;
  padding-right: .25em;
}
.modal .card:not(:last-child) {
  margin-bottom: .75em;
}
.modal .section {
  border-bottom: .075em solid #225794;
}
.modal ul {
  list-style: none;
  padding: .625em .75em .375em; margin: 0 auto;
  max-height: min(37.5em, 70vh); overflow-y: auto;
}
.modal ul li {
  padding: .125em .5em;
  line-height: 1.125em;
}
.modal ul.align li {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .25em .5em;
}
.modal ul.toggle_children li:not(:last-child) {
  border-bottom: .05em solid #225794;
}
.modal ul.toggle_children li > *:not(:first-child) {
  font-size: 0;
  height: 0;
  transition: font-size .3s ease, height .3s ease;
}
.modal ul.toggle_children li.toggle_open > *:not(:first-child) {
  font-size: inherit;
  height: auto;
}
.modal ul.wide_children {
  padding-left: 1.75em;
  padding-right: 1.75em;
}
.modal ul.wide_children li {
  padding: .25em .5em;
}
.modal ul li.highlight {
  border: .075em solid #E39825;
  border-radius: 0.25em;
  padding-top: .25em;
  margin: .175em auto;
}
.modal p.highlight {
  color: #E39825;
  margin: .25em auto -.5em;
}
/*Toggle*/
#toggleFooter {
  color: white;
  background-color: #225794;

  position: fixed;
  z-index: 998;
  top: calc(100% - 2em); left: 0; right: 0; bottom: auto;
  width: 100%;
  -webkit-transition: transform .3s linear;
     -moz-transition: transform .3s linear;
       -o-transition: transform .3s linear;
          transition: transform .3s linear;
  text-align: center;
}
#toggleFooter.showSlider {
  transform: translateY(-100%) translateY(2em) !important;
  -webkit-transition: transform .3s linear;
     -moz-transition: transform .3s linear;
       -o-transition: transform .3s linear;
          transition: transform .3s linear;
}
#toggleFooter.showSlider::before {
  content: '';
  z-index: -1;
  position: fixed;
  width: 100vw; height: 100vh;
  top: 0; left: 0; bottom: 0; right: 0;
  /* background-color: rgba(0, 0, 0, .5); */
  transform: translateY(-100%);
}
#toggleFooter .toggleSlider {
  cursor: pointer;
  box-shadow: 0 .1em .5em 0 rgba(0, 0, 0, .25);

  text-align: center;
  background-color: #E39825;
  font-weight: 700;
}
#toggleFooter .toggleSlider h4 {
  font-size: .8em;
  padding: 0 .75em; margin: 0 auto;
  position: relative;
  width: 100%; height: auto;
  max-height: calc(2em / .8); line-height: calc(2em / .8);
}
#toggleFooter .toggleContent {
  padding: 1em;
}
#toggleFooter .toggleContent p {
  padding: .675em .75em;
  font-size: .9em; line-height: 1.1em;
}

/*Game*/
#game {
  width: 100%; height: auto; max-height: 100%;
  display: inline-block;
  margin: 0 auto;
}
#game #array {
  font-size: .95em;
}
#game #notification {
  width: 100%; height: auto;
  padding: .5em; margin: auto;
  font-size: .9em;
}
/*Tiles*/
#array {
  display: table;
  width: auto; height: auto;
  margin: auto;
  padding: .75em;
  background-color: rgba(255, 255, 255, .95);
  border-radius: .25em;
  box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
}
#array .row, #array .cell {
	display: flex;
  flex-direction: row;
	justify-content: center;
  align-items: center;
	margin: auto;
}
#array .cell {
	font-size: 1.5em; line-height: 1em;
  border: .05em solid #225794;
  color: #225794;
  width: 2em; height: 2em;
  padding: 0; margin: .05em;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  overflow: hidden;
  text-transform: uppercase;
}
/*Keyboard*/
#game #keyboard {
	text-align: center;
  padding: .5em; margin: auto;
  font-size: 1.25em;

  display: table;
  width: auto;
  height: auto;
  margin: .5em auto;
  background-color: rgba(255, 255, 255, .95);
  border-radius: .25em;
  box-shadow: 0 0 .75em rgba(0, 0, 0, .25);
}
#keyboard > div, #keyboard > div > span {
	display: flex;
	flex-direction: row;
	justify-content: center;
  align-items: center;
	margin: auto;
}
#keyboard > div > span {
  font-size: 1em; line-height: 1em;
	border: .0675em solid #225794;
  color: #225794;
	height: 2em; width: auto; min-width: 1.75em;
	padding: 0 .5em; margin: .1em;
	cursor: pointer;
  position: relative;
  z-index: 1;
  border-radius: 50%;
  border-radius: 50% 50% 50% 50% / 65% 65% 35% 35%;
  text-transform: uppercase;
  transition: transform 1.6s;
}
.key_l {
  color: #E39825 !important;
  border-color: #E39825 !important;
  border-width: .1em !important;
}
.key_l:hover {
	background-color: rgba(227, 152, 37, .375);
}
.wrong, .good, .place {
  position: relative;
}
/* .wrong::before, .good::before, .place::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
  width: 100%; height: 100%;
} */
#keyboard .wrong, #keyboard .wrong::before {
  color: #909090 !important;
  border-color: #909090 !important;
  background-color: #f5f5f5;
}
.good, .good::before {
  background-color: rgba(34, 87, 148, .25);
}
.place, .place::before {
	background-color: rgba(227, 152, 37, .375);
}
.wrong, .good, .place {
	transform: rotateY(360deg);
  transition: transform 1.6s;
}
/*Example*/
.example_cell {
  display: inline-block;
  width: 1em; height: 1em;
  padding: 0; margin: 0 .125em;
  transform: translateY(12.5%);
  border-radius: .125em;
  border: .075em solid white;
}
.example_cell.example_good {
  background-color: #93B2DC;
}
.example_cell.example_place {
  background-color: #E9BF8B;
}

#notification {
  position: fixed;
  top: 50%; left: 50%; right: auto; bottom: auto;
  transform: translate(-50%, -50%);
  z-index: 99999;
  height: auto; width: auto !important; max-width: 95%;
  padding: .25em .5em;
  color: white; background-color: #E39825;
  border-radius: .125em;
}
.shake, #notification {
  -webkit-animation: shake 1s;
  animation: shake 1s;
}
@-webkit-keyframes shake {
  0%, 100% { -webkit-transform: translate(-50%, -50%) translateX(0); }
  10%, 30%, 50%, 70%, 90% { -webkit-transform: translate(-50%, -50%) translateX(-.25em); }
  20%, 40%, 60%, 80% { -webkit-transform: translate(-50%, -50%) translateX(.25em); }
}
@keyframes shake {
  0%, 100% { transform: translate(-50%, -50%) translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translate(-50%, -50%) translateX(-.25em); }
  20%, 40%, 60%, 80% { transform: translate(-50%, -50%) translateX(.25em); }
}
.profile {
  padding: .75em 1em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .5em;
}
.user {
  display: flex;
  justify-content: center;
  align-items: center;
}
.badge {
  display: inline-block;
  font-size: .75em;
  line-height: 1;
  margin: auto .25em;
  padding: .25em .5em;
  border-radius: 1em;
  background-color: #F5F5F5;
}
.progress {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .5em;
  width: calc(100% - 5em);
}
.progress_bar {
  position: relative;
  text-align: left;
  height: .125em;
  margin: .5em auto;
  font-size: .75em;
  background-color: #E8E6E3;
  width: 100%;
  flex: 1 1 auto;
}
.progress_bar .progress_current {
  display: inline-block;
  text-align: center;
  width: 0;
  height: .5em;
  position: relative;
  transform: translateY(-.625em);
  padding: .175em 0;
  background-color: #225794;
}
.progress_bar .progress_label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: .175em .35em;
  font-size: .875em;
  color: white;
  background-color: #225794;
}
.progress_bar .progress_step {
  width: 1.5em;
  height: 1.5em;
  font-size: .875em;
  line-height: 1.5em;
  position: absolute;
  top: 50%;
  bottom: auto;
  right: auto;
  left: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  border-radius: 50%;
  background-color: #225794;
}
.progress_bar .progress_step.locked {
  filter: grayscale(1);
}
canvas#liveBackground {
  position: fixed;
  height: 102vh;
  width: 102vw;
  top: -1vh;
  left: -1vw;
  right: -1vw;
  bottom: -1vh;
  overflow: hidden;
  z-index: 0;
  aspect-ratio: 1;
  pointer-events: none;
}
canvas#explosionAnimation {
  position: fixed;
  height: 102vh;
  width: 102vw;
  top: -1vh;
  left: -1vw;
  right: -1vw;
  bottom: -1vh;
  overflow: hidden;
  z-index: 999;
  aspect-ratio: 1;
}

.carousel {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100vw;
  max-width: 480px;
}
.carousel_card {
  width: 80vw;
  max-width: 375px;
  height: 500px;
  max-height: min(calc(80vw / 375 * 500), 80vh);
  padding: 1.75em 1.5em 2.5em;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.carousel_action svg {
  width: 1.875em;
  height: 1.875em;
  padding: .375em;
  border-radius: 50%;
  margin: .75em;
  background-color: #E39825;
  fill: white;
  cursor: pointer;
  transition: all .3s ease;
}
.carousel_action svg:hover {
  background-color: #225794;
}
.carousel_steps {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: -2em auto 2em;
}
.carousel_steps > span {
  width: .5em;
  height: .5em;
  border-radius: 50%;
  margin: auto .25em;
  background-color: rgba(34, 87, 148, .25);
  cursor: pointer;
  transition: all .3s ease;
}
.carousel_steps > span.current {
  background-color: #E39825;
}
.carousel_link {
  color: white;
}

#app .unlimited {
  border: .125em solid #E39825;
  color: #E39825;
  padding-top: 0;
  padding-bottom: .125em;
}
.infinite::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: max(200vw, 200vh); height: max(200vw, 200vh);
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  z-index: -1;
  background-color: #E39825;
  background-image: url('./assets/infinite.svg');
  background-size: 2em;
  background-position: 0 100%;
  background-repeat: repeat;
  animation: move 500s linear infinite;
  opacity: .95;
}
@-webkit-keyframes move {
  100% { background-position: 0 -100%; }
}
@keyframes move {
  100% { background-position: 0 -100%; }
}

.grecaptcha-badge {
  bottom: 2.75em !important;
  z-index: 0;
}