/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes XT9I- {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes b04fA {
  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);
  }
}
.CwMi6 {
  animation: -UP-O 2s infinite linear;
}
@keyframes -UP-O {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(359deg);
  }
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes TVsz9 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes GYGPy {
  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);
  }
}
._5ObhT {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes Wwwkl {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes taa3o {
  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);
  }
}
.nWEBG {
  background-color: #285dcc;
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  margin-bottom: 0.5rem;
  padding: 1.6rem;
  width: 100%;
  max-width: 69rem;
  text-align: center;
  border-radius: 0.4rem;
  border-style: solid;
  border-width: 1px;
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.1s, transform 0.1s;
}
[data-theme="dark"] .nWEBG {
  box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08);
}
[data-theme="kids"] .nWEBG {
  box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.1);
}
.RNtIa {
  color: #ffa18d;
  background-color: #343641;
  max-width: 60rem;
}
.bSxo2 {
  color: #ffffff;
  background-color: #285dcc;
  border-color: transparent;
}
.IJ0Ok {
  color: #75e497;
  background-color: #343641;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes GGJEg {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes qoesL {
  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);
  }
}
._4KvCE {
  font: 500 1.6rem/1.5 "Noto Sans", sans-serif;
  color: #f2f2f5;
  background-color: #b7213b;
  border-radius: 0.4rem;
  pointer-events: all;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  max-width: 100rem;
  min-height: 5.4rem;
  padding: 1.6rem;
  margin: 0 auto;
}
._4KvCE ._9-Vsb {
  margin: 0;
  margin-right: 1rem;
}
._4KvCE .ZY7Hu {
  color: #f2f2f5;
}
[data-theme="dark"] ._4KvCE .ZY7Hu {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] ._4KvCE .ZY7Hu {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}
._4KvCE .ZY7Hu:hover {
  text-decoration: underline;
}
._4KvCE .ZY7Hu:focus {
  box-shadow: #b7213b 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
  border-radius: 0.1rem;
  outline: none;
}
._1hZt4 {
  z-index: 201;
  position: fixed;
  bottom: 5rem;
  left: 50%;
  transform: translateX(-50%);
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes jgC0- {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Olbec {
  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);
  }
}
.B6hpl {
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: fixed;
  top: 6.5rem;
  width: 100%;
  pointer-events: none;
}
.LTvNW {
  opacity: 0;
  transform: translateY(-3rem);
}/*! 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 */
  -webkit-text-decoration: underline dotted;
          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: "Noto Sans";
  src: url("/fonts/NotoSans-Thin.woff2") format("woff2"), url("/fonts/NotoSans-Thin.woff") format("woff");
  font-weight: 100;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Light.woff2") format("woff2"), url("/fonts/NotoSans-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Regular.woff2") format("woff2"), url("/fonts/NotoSans-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Medium.woff2") format("woff2"), url("/fonts/NotoSans-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Noto Sans";
  src: url("/fonts/NotoSans-Bold.woff2") format("woff2"), url("/fonts/NotoSans-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Bold.woff2") format("woff2"), url("/fonts/Montserrat-Bold.woff") format("woff");
  font-style: normal;
  font-weight: bold;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-ExtraBold.woff2") format("woff2"), url("/fonts/Montserrat-ExtraBold.woff") format("woff");
  font-style: normal;
  font-weight: 800;
}

@font-face {
  font-family: "Montserrat";
  src: url("/fonts/Montserrat-Regular.woff2") format("woff2"), url("/fonts/Montserrat-Regular.woff") format("woff");
  font-style: normal;
  font-weight: normal;
}

@font-face {
  font-family: "Omnes";
  src: url("/fonts/Omnes-Bold.woff2") format("woff2"), url("/fonts/Omnes-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 800;
}

/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/

@keyframes BlinkAnimation {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ShakeAnimation {
  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);
  }
}

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

html {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  min-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  font-size: 62.5%;
  /* 1 rem = 10px */
  background: #1a191c;
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: #828282 #2b2c32;
}

:global([data-theme="dark"]) html {
  color: #f2f2f5;
}

:global([data-theme="kids"]) html {
  color: #1a191c;
}

:global([data-theme="dark"]) *:focus {
  outline-color: #f2f2f5;
}

:global([data-theme="kids"]) *:focus {
  outline-color: #1a191c;
}

body {
  height: 100%;
  width: calc(100vw - (100vw - 100%));
}

:global body.is-safari {
  overflow-x: hidden;
}

body[data-theme=dark] {
  background: #1a191c;
}

body[data-theme=kids] {
  background: #e6f3ff;
}

:global([data-theme="kids"]) :global #app {
  background: #e6f3ff;
}

:global([data-theme="dark"]) :global #app {
  background: #1a191c;
}

:global .ie-info {
  max-width: 37rem;
  margin: 0 auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

:global .ie-info * {
  text-align: center;
}

:global .ie-info__logo {
  display: block;
  margin: 0 auto;
}

:global .ie-info__title {
  color: #f2f2f5;
}

:global([data-theme="dark"]) :global .ie-info__title {
  font: 800 2.4rem/1.4 "Montserrat", sans-serif;
}

:global([data-theme="kids"]) :global .ie-info__title {
  font: 800 2.4rem/1.1 "Omnes", sans-serif;
}

:global .ie-info__text {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  color: #f2f2f5;
}

:global .ie-info__link {
  color: #ff427c;
  display: block;
}

:global([data-theme="dark"]) :global .ie-info__link {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}

:global([data-theme="kids"]) :global .ie-info__link {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes whfMG {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes sk9OK {
  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);
  }
}
.wAMZ1,
._4luLt {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.wAMZ1 {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
}
._4luLt {
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
}
.yAB1t {
  position: relative;
  display: flex;
  min-height: 80%;
  padding: 0;
  width: 95%;
  border-radius: 0.8rem;
}
[data-theme="dark"] .yAB1t {
  background: #343641;
}
[data-theme="kids"] .yAB1t {
  background: #e6f3ff;
}
@media (min-width: 768px) {
  .yAB1t {
    width: 80%;
    min-height: 28rem;
    max-width: 53rem;
  }
  [data-theme="dark"] .yAB1t {
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08);
  }
  [data-theme="kids"] .yAB1t {
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.1);
  }
}
.RU1TK {
  position: relative;
  width: 100%;
  padding: 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes kjp0j {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes xvh5Y {
  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);
  }
}
.haQyf {
  display: flex;
  align-items: center;
  border: 0;
  padding: 1.1rem 2.5rem;
  cursor: pointer;
  transition: 0.3s background-color ease-in-out;
}
[data-theme="dark"] .haQyf {
  background-color: #f2f2f5;
}
[data-theme="kids"] .haQyf {
  background-color: #ff427c;
}
[data-theme="dark"] .haQyf {
  font: 800 1.6rem/1.5 "Montserrat", sans-serif;
}
[data-theme="kids"] .haQyf {
  font: 800 1.6rem/1.3 "Omnes", sans-serif;
}
[data-theme="dark"] .haQyf {
  color: #2b2c32;
}
[data-theme="kids"] .haQyf {
  color: #ffffff;
}
[data-theme="dark"] .haQyf {
  border-radius: 0.4rem;
}
[data-theme="kids"] .haQyf {
  border-radius: 3rem;
}
[data-theme="dark"] .haQyf:hover {
  background-color: #bdbdbd;
}
[data-theme="kids"] .haQyf:hover {
  background-color: #ff8d9a;
}
[data-theme="dark"] .haQyf:hover {
  color: #1a191c;
}
[data-theme="kids"] .haQyf:hover {
  color: #ffffff;
}
.haQyf:disabled {
  background-color: #828282;
  color: rgba(43, 44, 50, 0.5);
  cursor: not-allowed;
}
.haQyf.wusC- {
  background-color: #2b2c32;
  color: #f2f2f5;
}
.haQyf.wusC-:hover {
  background-color: #1a191c;
  color: #bdbdbd;
}
.haQyf.wusC-:disabled {
  background-color: #1a191c;
  color: #bdbdbd;
  cursor: not-allowed;
}
.haQyf.G5X9r {
  background-color: transparent;
  color: #ff427c;
}
.haQyf.G5X9r:hover {
  background-color: rgba(189, 189, 189, 0.1);
  color: #ff427c;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes J-Ag6 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Vcr3y {
  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);
  }
}
._4LQpW {
  margin: 0;
}
[data-theme="dark"] ._4LQpW {
  font: 800 2.4rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] ._4LQpW {
  font: 800 2.4rem/1.1 "Omnes", sans-serif;
}
[data-theme="dark"] ._4LQpW {
  color: #f2f2f5;
}
[data-theme="kids"] ._4LQpW {
  color: #1a191c;
}
.tcgRT {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  color: #f2f2f5;
  text-align: center;
  margin: 1.9rem 0 3.2rem 0;
}
.WjEd- {
  display: flex;
  justify-content: center;
}
.WjEd- .mmrHL {
  text-align: center;
  justify-content: center;
  margin: 0 0.8rem;
}
.WjEd- .mmrHL.SUWy6 {
  background-color: #ff4242;
  transition: 0.3s ease-in-out;
}
[data-theme="dark"] .WjEd- .mmrHL.SUWy6 {
  color: #f2f2f5;
}
[data-theme="kids"] .WjEd- .mmrHL.SUWy6 {
  color: #1a191c;
}
.WjEd- .mmrHL.SUWy6:hover {
  background-color: #b7213b;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes KoeI6 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes vsS9e {
  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);
  }
}
.L71ZH {
  color: currentColor;
  display: inline-block;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _0cs31 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes eLd31 {
  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);
  }
}
.J9be6 {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background-color: transparent;
  cursor: pointer;
}
[data-theme="dark"] .J9be6 {
  color: #f2f2f5;
}
[data-theme="kids"] .J9be6 {
  color: #1a191c;
}
.J9be6[disabled] {
  opacity: 0.5;
}
.J9be6 .MX5BZ {
  padding-left: 0.5rem;
}
[data-theme="dark"] .J9be6 .MX5BZ {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .J9be6 .MX5BZ {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes teqru {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _4w83o {
  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);
  }
}
.R8Xt2 {
  width: 6.6rem;
  height: 2.4rem;
}
[data-theme="dark"] .R8Xt2 {
  color: #f2f2f5;
}
[data-theme="kids"] .R8Xt2 {
  color: #1a191c;
}
[data-theme="dark"] .R8Xt2 a {
  color: #f2f2f5;
}
[data-theme="kids"] .R8Xt2 a {
  color: #1a191c;
}
.R8Xt2 a:focus-visible {
  outline: none;
}
.R8Xt2 a:focus-visible svg {
  outline: none;
  border-radius: 0.1rem;
}
[data-theme="dark"] .R8Xt2 a:focus-visible svg {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .R8Xt2 a:focus-visible svg {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
.R8Xt2._9Oubz {
  width: auto;
  height: auto;
}
.R8Xt2._9Oubz a {
  display: flex;
  align-items: center;
}
.R8Xt2 .tBHtq {
  position: absolute;
  margin-top: 0.5rem;
}
[data-theme="dark"] .R8Xt2 .tBHtq {
  font: 600 1.4rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .R8Xt2 .tBHtq {
  font: 600 1.4rem/1.2 "Noto Sans", sans-serif;
}
[data-theme="dark"] .R8Xt2 .tBHtq {
  color: #bdbdbd;
}
[data-theme="kids"] .R8Xt2 .tBHtq {
  color: rgba(26, 25, 28, 0.65);
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes o1QVV {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Fd8ae {
  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);
  }
}
._5U1LB {
  color: #828282;
  display: flex;
  align-items: center;
}
._5U1LB.jHl-o {
  width: 10rem;
  height: 10rem;
}
._5U1LB.Tl403 {
  width: 4.8rem;
  height: 4.8rem;
}
._5U1LB.lkHig {
  width: 2.6rem;
  height: 2.6rem;
}
._5U1LB.uluKZ {
  transform: scale(0.86);
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes R0wyS {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes cxc0z {
  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);
  }
}
._0-o-Z {
  z-index: 3;
}
._0-o-Z .fi-zr {
  background-color: #52545f;
  border: none;
  display: block;
  height: 3.2rem;
  width: 5.2rem;
  border-radius: 10rem;
  position: relative;
  cursor: pointer;
  color: rgba(0, 0, 0, 0);
  text-indent: -999rem;
  transition: background-color 0.2s ease-in-out;
}
._0-o-Z .fi-zr::before {
  background-color: #ffffff;
  display: block;
  content: "";
  height: 2.8rem;
  width: 2.8rem;
  position: absolute;
  left: 0.2rem;
  top: 0.2rem;
  border-radius: 10rem;
  transition: left 0.2s ease-in-out;
}
._0-o-Z .fi-zr:focus {
  outline: none;
}
._0-o-Z .fi-zr:focus-visible {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
  border-radius: 10rem;
}
._0-o-Z.y1Bvd .fi-zr {
  background-color: #20a664;
}
._0-o-Z.y1Bvd .fi-zr:focus-visible {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
._0-o-Z.y1Bvd .fi-zr::before {
  left: 2.2rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _17czQ {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _1nTgx {
  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);
  }
}
.CZb-M {
  border: solid #2b2c32 0.2rem;
  border-radius: 0.4rem;
  display: flex;
  position: relative;
  justify-content: space-between;
  align-items: center;
  padding: 1.6rem;
  background-image: none;
  transition: background-color 0.2s ease-in-out;
}
.CZb-M.yjs2U {
  background-color: #e6f3ff;
}
.CZb-M.yjs2U .WROTS,
.CZb-M.yjs2U .GeKQ8 {
  color: #1a191c;
}
.CZb-M.yjs2U .Vq-cW {
  transition: opacity 0.2s ease-in-out 0.4s;
  opacity: 1;
}
.CZb-M ._-84Av {
  z-index: 3;
}
.CZb-M ._-84Av * {
  margin: 0;
  transition: color 0.2s ease-in-out;
}
.CZb-M .Vq-cW {
  z-index: 1;
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-position: 0 50%;
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAZAAAACgCAYAAAAisjrVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAa7SURBVHgB7d39VRxVGAfgdz3+L0kDLjYgpgDlWIHaQBIbSDoIWoCJNhBswEQLENKAxAZgbUCwAa/3OhOXBGIGmJmdj+c55z1LFg6bPWeZ39zvCAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAK5oEWxESmkrPyxzbdVPvVwsFmcBAG8qoZHrUa6TdLmj+vvLAIAih8KDXKepmfJzjwKA+apbHQfpep6lqqsLgLmpu6Vu4iAAmJdUjWe04XEADIxZWB1J1UD4SbRne7FYrAJgIN4LurIX7XoYAAOiBdKBVA18n0a7yhqRbWtFgKEQIC3IgbGbH8q022VUCwPP6q/btor1wsPy9ctcP+dQeR4AjEe62RTdNp3kuhsAjEO+aO+nYTFbC+iNLqwGUjWmUe7wd849vaifG5r93KV1PwDYnFR1UT1OzbcgGQoztoDOaYG8RarWcZRV4MsYHzO2gM5ZB3KJkYdHUbrctEKATmmBXCIHyH4Mc3zjKs5yC+RWAHREgLwhVWs6prKBoe1PgM7owrroXkzHxwHQEQFy0ZQuurqwgM4IkIt2YjpWAdARATJtqwDoiAC5aBXTsDKADnRJgFz0Iqbh+wDokAC5aD/Gb5XLFu9ApwTIG3K3z2F+OIxx29N9BXRNgFyu7GY71n2kvsnh8WPAhKSU/l3km+tJrqO03uD0tP7303oRMGxe/jDupOqgpjHZC5iQtA6Og4Z/A8ep2ssONqt8ENPwDo26zEFy98XEpCo89tLV/Z3rUdA5e2E1kKo7mrK7bVmlvhXrc8k3pXSvrXL9nuuwHreBySjhke3lum4QlF9QunO/CQDmoW553E83V1oiY99VG4Am6vDYTu2NP/6ZqiOp6YBZWMCQlG710m21jHaUDUUdrtYRYyDAYOTWQrkmHUe7p4Ge5rGQ20Hr3g+ADUjVQHnpXirjFDuxnpyyjHbdyq/1LKrJJ+U1/sh1lOuFBbcAI1OPdTxI6wWBm/I0WTcCMA7p+us7ulIG2o2TXIMxEKAzqeqmWubaPff0X7l+imGxbgRgCNLVtyAZgrJuZDdoTAsEaE2qWhxl6ux3ue7F+JzkupNbImPdTLVX1oEAbSo3pb/GOMOj2A7rRhoTIEAr6tZHWQS4E+P2adCILizgxurwKHfvxzF+5c3c1o31blogQBvKzeiDmI6xt6J6IUCAtnwW07EM3kmAAG2Z0l37KngnAQJwkfGPBgQI0JapXHRXeQD9ZfBOAgRoy1QuuodBIwIEaEOZ+vpLjF95H98GjQgQoC37Mf7B52+dEdKchYRAK+rFhF/G8Hbabeooh8edoDEtEKAV+eJbHsrJf2PcEv0g1+cBwOakaiv3e7lO0vA5TOoGdGEBrUuvHyR1N14/UGrTynTjMmPsea4f7Xl1fQIE6FwdKFt1bdKZwAAAAAAAAAAAAAAAAAAAaMBKdOjIudXXu7k+zLVdf+vVVhqHVkUD8J9UbSa4m+ugwWZ+z8rPBgDzVQfHVq7H6eqe5loGAPNSh8d2utkW5sdCBGBGWgoPIQIwN/mCv8h1lNrzWwAwbalqfdxP7dsLGDjTeOEG8oW+/A0dR3X6XptOc31kmi9D9l4A15KqdR5fRPvhUWzVvxsG6/0AGkmvn/NdHk+ju7O+S8vmbn7ND/Ljrfq1/sj1MrdKVgHA8KX1LKuDNAy/5bobsGHGQOB/pKrV8UmuX6PqVhqSk1yfa5GwKcZA4C3q8Cj7V/0UwwuPovzfjrVG2BQtEGYvrTc9LBfi3Vw79bfO6ueXMWzlDXyVWyLPA3okQJitc8HxINfDGGYro6kyyH5HdxZ9EiDM0hvdUzsxDc9ygHwV0BMBwuzU4VGmxpYtQ5YxHeWN3bb4kL4YRGeOyo3T45hWeBTlfT0M6IkAYVbSejHgVGcufRrQEwHC3JS79EcxXVMZz2EEjIEwK6m7zQ+HIuUxEDeG9EKAMBvnBs//jOkSIPTGB425GfNajyZWAT0RIMzN1Ke4/h7QEwHCbOSunfJwFtMNkdJHZzsTeiNAmKPDmKYSjC8CeiJAmJtyl/5DTNMP9sKiT2ZhMTv1VN5yvsduTMdJDo+PAnqkBcIclVbI1zGdsZB/D5YK6JkAYXbqwfRXF92xh4hTCdkYAcIs1SFylOtOjHftxJNwBgjA5pQV6rnu5TpIw3eS60muZcCGGUSHWlqfULiM4a1YL11tK2d9AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA8Bb/AKcCOn0mMqYDAAAAAElFTkSuQmCC");
  opacity: 0;
  animation: QkCb- linear 10s infinite;
}
@keyframes QkCb- {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 475% 50%;
  }
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes AZceT {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _4dBbG {
  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);
  }
}
.X042e {
  display: flex;
  flex-direction: column;
  align-items: center;
}
[data-theme="dark"] .X042e {
  color: #f2f2f5;
}
[data-theme="kids"] .X042e {
  color: #1a191c;
}
.HCQeN {
  margin: 4.8rem 0 6.4rem 0;
}
[data-theme="dark"] .HCQeN {
  font: 800 3.2rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .HCQeN {
  font: 800 3.2rem/1.2 "Omnes", sans-serif;
}
.mPURg {
  margin-bottom: 3.2rem;
}
.EVmjX {
  background-color: #2b2c32;
  color: #bdbdbd;
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  border-radius: 0.4rem;
  width: 32rem;
  height: 4.6rem;
  padding: 1.2rem 1.6rem;
  line-height: 4.6rem;
  margin-bottom: 2.9rem;
  border: none;
  appearance: none;
}
._8qo-C {
  color: #ff4242;
  background-color: transparent;
  display: flex;
  align-items: center;
  margin: 0 auto 4.2rem auto;
}
._8qo-C:hover {
  text-decoration: underline;
}
.-PT-J {
  display: flex;
  width: 29rem;
  margin: 1.9rem auto 0 auto;
}
.-PT-J button {
  flex: 1;
  text-align: center;
  justify-content: center;
  margin: 0 0.2rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes fBHPD {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes HCM3o {
  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);
  }
}
.GOdwA {
  padding: 2.8rem;
}
@media (min-width: 1024px) {
  .GOdwA {
    height: 8rem;
  }
}
.fj-xB {
  max-width: 93.8rem;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .fj-xB {
    flex-direction: row;
  }
}
.SC7OG {
  display: flex;
  list-style: none;
  padding-left: 2rem;
}
@media (max-width: 767px) {
  .SC7OG {
    padding-left: 0;
    padding-top: 2.4rem;
    flex-direction: column;
    justify-content: center;
  }
}
.da4cg {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
}
.da4cg + .da4cg {
  padding-left: 3.2rem;
}
@media (max-width: 767px) {
  .da4cg + .da4cg {
    padding-left: 0;
    padding-top: 2.4rem;
    text-align: center;
  }
}
.Dxzbt {
  color: #bdbdbd;
  text-decoration: none;
  padding: 0;
  transition: color 0.3s;
}
.Dxzbt:hover {
  color: #ff427c;
}
.Dxzbt:focus {
  background-color: #1a191c;
  outline: none;
  transition: none;
  border-radius: 0.1rem;
}
[data-theme="dark"] .Dxzbt:focus {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .Dxzbt:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
.Jsp0X {
  color: #828282;
}
[data-theme="dark"] .Jsp0X {
  font: 600 1.4rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .Jsp0X {
  font: 600 1.4rem/1.2 "Noto Sans", sans-serif;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _0-ajV {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes VFUO5 {
  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);
  }
}
.MAl04 {
  z-index: 200;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  visibility: hidden;
}
.MAl04._7jjHw {
  visibility: visible;
}
.MAl04._91ujc {
  position: fixed;
  display: flex;
  justify-content: center;
}
.MAl04._91ujc .aV6mO {
  left: auto;
  bottom: 3rem;
}
.MAl04.uG0mq .aV6mO {
  bottom: auto;
  left: auto;
  top: 8.2rem;
}
.aV6mO {
  z-index: 200;
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  background-color: #285dcc;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
  color: #f2f2f5;
  position: absolute;
  top: var(--top);
  left: var(--left);
  padding: 1.6rem;
  border-radius: 0.4rem;
  max-width: 69rem;
  min-width: 20rem;
  white-space: pre-line;
  cursor: pointer;
}
._6poXL {
  position: absolute;
  width: 0;
  height: 0;
  border: 11px solid transparent;
  left: var(--left);
}
.bQrn9 {
  visibility: hidden;
}
.ep1Vm {
  border-bottom-color: #285dcc;
  border-top-width: 0;
  top: -10px;
}
.yOjlY {
  border-top-color: #285dcc;
  border-bottom-width: 0;
  bottom: -10px;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes eDl7o {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes zKS0J {
  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);
  }
}
.ACNQx,
.EyU6- {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
.ACNQx {
  background: rgba(0, 0, 0, 0.8);
  position: fixed;
}
.EyU6- {
  z-index: 2000;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  left: 0;
}
.N1aw1 {
  border-radius: 0.8rem;
  position: relative;
  display: flex;
  padding: 0;
  width: 95%;
}
[data-theme="dark"] .N1aw1 {
  background: #343641;
}
[data-theme="kids"] .N1aw1 {
  background: #e6f3ff;
}
@media (min-width: 768px) {
  .N1aw1 {
    width: 80%;
    min-height: 400px;
    max-width: 76rem;
  }
  [data-theme="dark"] .N1aw1 {
    box-shadow: 0px 8px 10px rgba(0, 0, 0, 0.08);
  }
  [data-theme="kids"] .N1aw1 {
    box-shadow: 0 0.15rem 0.3rem rgba(0, 0, 0, 0.1);
  }
}
._6yBG0 {
  z-index: 1;
  position: absolute;
  top: 3.8rem;
  right: 3.8rem;
  background: transparent;
  border: 0;
  cursor: pointer;
}
[data-theme="dark"] ._6yBG0 {
  color: #f2f2f5;
}
[data-theme="kids"] ._6yBG0 {
  color: #1a191c;
}
._6yBG0:focus {
  border-radius: 0.1rem;
  outline: none;
}
[data-theme="dark"] ._6yBG0:focus {
  box-shadow: #343641 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] ._6yBG0:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
._8oc0m {
  position: relative;
  width: 100%;
  padding: 3.2rem;
  overflow-y: auto;
  max-height: 80vh;
}
[data-theme="kids"] ._8oc0m {
  color: #1a191c;
}
[data-theme="dark"] ._8oc0m {
  color: #f2f2f5;
}
._8oc0m button:focus,
._8oc0m .BoFGc:focus,
._8oc0m .-C8f3:focus {
  border-radius: 0.1rem;
  outline: none;
}
[data-theme="dark"] ._8oc0m button:focus,
[data-theme="dark"] ._8oc0m .BoFGc:focus,
[data-theme="dark"] ._8oc0m .-C8f3:focus {
  box-shadow: #343641 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] ._8oc0m button:focus,
[data-theme="kids"] ._8oc0m .BoFGc:focus,
[data-theme="kids"] ._8oc0m .-C8f3:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _2Vm5O {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes lf4M3 {
  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);
  }
}
.XFeC- {
  color: #f2f2f5;
  display: flex;
  width: 100%;
  height: 100%;
}
.yJZ3P {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
}
.gFenn {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  display: flex;
  opacity: 0;
  transform: translateX(100%);
  will-change: transform;
  transition: opacity 0.3s, transform 0.3s;
}
.gFenn.unBVE {
  transform: translateX(-100%);
}
.gFenn.l4Fgq {
  opacity: 1;
  transform: translateX(0);
}
.gFenn:not(.l4Fgq) button, .gFenn:not(.l4Fgq) a {
  display: none;
}
.-vcL2 {
  background-color: #1a191c;
  position: absolute;
  top: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  z-index: 1;
}
.-vcL2.gdsWl {
  left: 0;
}
.-vcL2.SND1E {
  right: 0;
}
.-vcL2:hover {
  opacity: 0.6;
}
.-vcL2 .vXw1q {
  border-color: #bdbdbd;
  position: relative;
  width: 1.2rem;
  height: 1.2rem;
  border-width: 0.2rem;
  border-style: solid;
  border-left: 0;
  border-top: 0;
}
.-vcL2 .vXw1q.gdsWl {
  transform: rotate(135deg);
  left: 0.2rem;
}
.-vcL2 .vXw1q.SND1E {
  transform: rotate(-45deg);
  left: -0.2rem;
}
.bss-S {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  width: 100%;
}
.bss-S .A4gwj {
  border: 0;
  padding: 0.8rem;
  background: transparent;
}
.bss-S .A4gwj ._21P4i {
  background-color: rgba(189, 189, 189, 0.16);
  cursor: pointer;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
}
.bss-S .A4gwj.l4Fgq {
  padding: 0.7rem;
}
.bss-S .A4gwj.l4Fgq ._21P4i {
  background-color: #ff427c;
  width: 1.2rem;
  height: 1.2rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes O1XL4 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes uyBu- {
  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);
  }
}
.Y89dZ {
  cursor: pointer;
  display: flex;
  align-items: center;
  padding: 1.1rem 1.6rem;
  border: 0;
}
[data-theme="dark"] .Y89dZ {
  font: 800 1.6rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .Y89dZ {
  font: 800 1.8rem/1.2 "Omnes", sans-serif;
}
[data-theme="dark"] .Y89dZ {
  border-radius: 0.4rem;
}
[data-theme="kids"] .Y89dZ {
  border-radius: 10rem;
}
[data-theme="dark"] .Y89dZ.cRDHR {
  background-color: #f2f2f5;
}
[data-theme="kids"] .Y89dZ.cRDHR {
  background-color: #ff427c;
}
[data-theme="dark"] .Y89dZ.cRDHR {
  color: #2b2c32;
}
[data-theme="kids"] .Y89dZ.cRDHR {
  color: #ffffff;
}
.Y89dZ.yaU2b {
  background-color: rgba(242, 242, 245, 0.1);
  color: #f2f2f5;
}
.Y89dZ.rAllV {
  color: #f2f2f5;
  background-color: transparent;
  padding: 1.1rem;
}
[data-theme="dark"] .Y89dZ.rAllV {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .Y89dZ.rAllV {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}
.Y89dZ.cB-fS {
  color: #ff427c;
  background-color: transparent;
}
.Y89dZ.cB-fS:hover {
  color: #db3075;
}
.Y89dZ[disabled] {
  opacity: 0.5;
  cursor: default;
}
.qqXsz {
  margin-right: 1.3rem;
}
[data-theme="dark"] .qqXsz.cRDHR {
  color: #2b2c32;
}
[data-theme="kids"] .qqXsz.cRDHR {
  color: #ffffff;
}
.qqXsz.yaU2b {
  color: #f2f2f5;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes g7wmG {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes OlzUV {
  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);
  }
}
.T22c- {
  max-height: 68rem;
  height: 100%;
}
.W3Ntr {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
  padding-top: 1rem;
}
.W3Ntr .g484G {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  height: 25.6rem;
}
.W3Ntr .g484G .ag6ou {
  height: 100%;
}
.W3Ntr .CkDlK {
  margin-top: 2.7rem;
  margin-bottom: 0;
  padding: 0 10%;
  text-align: center;
}
[data-theme="dark"] .W3Ntr .CkDlK {
  font: 800 2.4rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .W3Ntr .CkDlK {
  font: 800 2.4rem/1.1 "Omnes", sans-serif;
}
.W3Ntr .Lt-D7 {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  color: #bdbdbd;
  margin: 1.6rem auto 0 auto;
  width: 100%;
  max-width: 50rem;
  padding: 0 1rem;
  text-align: center;
}
.W3Ntr ._24rm9 {
  width: 100%;
  display: flex;
  justify-content: center;
  margin: 2.4rem 0;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes BEpYi {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes zJnb- {
  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);
  }
}
.yUtxW {
  z-index: -1;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}
.yUtxW img {
  position: absolute;
  animation: ghXs2 240s linear infinite;
  left: -10%;
}
.yUtxW img:nth-of-type(1) {
  top: 30%;
}
.yUtxW img:nth-of-type(2) {
  top: 10%;
  animation-delay: -120s;
}
.yUtxW img:nth-of-type(3) {
  top: 70%;
  animation-delay: -68.5714285714s;
}
@media (prefers-reduced-motion) {
  .yUtxW img {
    position: relative;
    animation: none;
  }
  .yUtxW img:nth-of-type(1) {
    left: 5%;
  }
  .yUtxW img:nth-of-type(2) {
    left: 55%;
  }
  .yUtxW img:nth-of-type(3) {
    left: 25%;
  }
}
@keyframes ghXs2 {
  0% {
    transform: translateX(-10vw);
  }
  100% {
    transform: translateX(110vw);
  }
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes gVp9D {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _2krVY {
  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);
  }
}
.P-FsT {
  background-color: #343641;
  z-index: 1500;
  border-radius: 0.8rem;
  font: 500 1.2rem/1.5 "Noto Sans", sans-serif;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  padding: 1rem 1.5rem;
}
.P-FsT .-j2sn {
  display: flex;
  align-items: center;
}
.P-FsT .-j2sn .pfNVL {
  border-radius: 0.8rem;
  background: rgba(255, 66, 124, 0.2);
  border: solid 1px #ff427c;
  font-size: 1.2rem;
  padding: 0.4rem 1rem;
  min-width: 2rem;
  text-align: center;
}
.P-FsT .-j2sn .c-TRJ {
  color: rgba(242, 242, 245, 0.5);
  margin: 0 0.5rem;
}
.P-FsT .F5sQU {
  margin-left: 1.75rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes NihP8 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Go3eU {
  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);
  }
}
.affmF {
  position: absolute;
  width: 54%;
  transform: translate(-14px, -37px);
}
.-EpEL {
  position: relative;
}
.-XCvm {
  z-index: 101;
  height: 5.6rem;
  width: 100%;
  padding: 0 2rem;
  position: sticky;
  display: flex;
  align-items: center;
  top: 0;
  justify-content: space-between;
}
[data-theme="kids"] .-XCvm {
  background: rgba(0, 0, 0, 0);
}
[data-theme="dark"] .-XCvm {
  background: rgba(26, 25, 28, 0.9);
}
@media (max-width: 599px) {
  .-XCvm {
    flex-wrap: wrap;
    height: 10.2rem;
    padding-top: 1.6rem;
  }
}
.-XCvm .v0GOk {
  position: relative;
}
.-XCvm .v0GOk .p85de {
  border: none;
  cursor: pointer;
  position: absolute;
  bottom: -4rem;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}
[data-theme="dark"] .-XCvm .v0GOk .p85de {
  color: #f2f2f5;
}
[data-theme="kids"] .-XCvm .v0GOk .p85de {
  color: #1a191c;
}
.-XCvm .v0GOk .p85de:focus {
  pointer-events: all;
  opacity: 1;
  outline: none;
  transition: none;
  border-radius: 0.1rem;
}
[data-theme="kids"] .-XCvm .v0GOk .p85de:focus {
  background-color: #e6f3ff;
}
[data-theme="dark"] .-XCvm .v0GOk .p85de:focus {
  background-color: #1a191c;
}
[data-theme="dark"] .-XCvm .v0GOk .p85de:focus {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .-XCvm .v0GOk .p85de:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
@media (max-width: 599px) {
  .-XCvm .v0GOk {
    display: flex;
    align-items: center;
  }
  .-XCvm .v0GOk .p85de {
    width: 1rem;
    margin-left: 1.5rem;
    position: static;
  }
}
.LR3tA.SLFN1 {
  display: none;
}
@media (min-width: 600px) {
  .LR3tA.SLFN1 {
    display: block;
    align-self: flex-end;
  }
}
.LR3tA._4hhDh {
  display: none;
}
@media (max-width: 599px) {
  .LR3tA._4hhDh {
    display: block;
    width: calc(100% + 2rem);
  }
}
.TlGoA {
  display: flex;
  gap: 0 0.8rem;
  padding: 0;
  margin: 0;
  align-items: center;
  list-style: none;
}
@media (max-width: 767px) {
  .TlGoA {
    overflow-y: auto;
    gap: 0;
  }
}
.c9AG7 {
  color: #bdbdbd;
  text-decoration: none;
  transition: color 0.3s;
  text-align: left;
  white-space: nowrap;
}
[data-theme="dark"] .c9AG7 {
  font: 800 1.6rem/1.5 "Montserrat", sans-serif;
}
[data-theme="kids"] .c9AG7 {
  font: 800 1.6rem/1.3 "Omnes", sans-serif;
}
.c9AG7:hover {
  color: #ff427c;
}
.c9AG7:focus-visible {
  background-color: #1a191c;
  outline: none;
  transition: none;
  border-radius: 0.1rem;
}
[data-theme="dark"] .c9AG7:focus-visible {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .c9AG7:focus-visible {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
.xJ-Y4 {
  color: #ff427c;
}
.sog6I {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 6.2rem;
  gap: 1.6rem;
}
.sog6I .FoLcZ {
  display: flex;
}
.sog6I .FoLcZ:focus-visible {
  outline: none;
  box-shadow: none;
}
.sog6I .FoLcZ:focus-visible svg {
  border-radius: 0.1rem;
}
[data-theme="dark"] .sog6I .FoLcZ:focus-visible svg {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .sog6I .FoLcZ:focus-visible svg {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
.BK1yt {
  position: relative;
  padding: 4rem 3rem 4rem 4.8rem;
  height: auto;
}
.BK1yt .sog6I > * {
  background-color: #ffffff;
  color: #2b2c32;
  border-radius: 10rem;
  box-shadow: 0 0.15rem 3rem rgba(0, 0, 0, 0.1);
  border: solid #eeeeee 0.1rem;
  display: flex;
  align-items: center;
  padding: 1.2rem 1.6rem;
}
[data-theme="dark"] .BK1yt .sog6I > * {
  font: 800 1.6rem/1.5 "Montserrat", sans-serif;
}
[data-theme="kids"] .BK1yt .sog6I > * {
  font: 800 1.6rem/1.3 "Omnes", sans-serif;
}
.BK1yt .sog6I .Kf0oT {
  margin-right: 0.8rem;
}
.BK1yt .sog6I .FoLcZ,
.BK1yt .sog6I .MuDRo {
  margin-top: 0.4rem;
  transition: none;
}
.BK1yt .sog6I .FoLcZ:hover,
.BK1yt .sog6I .MuDRo:hover {
  color: #ff427c;
}
.BK1yt .sog6I .FoLcZ:focus,
.BK1yt .sog6I .MuDRo:focus {
  border-radius: 10rem;
}
[data-theme="dark"] .BK1yt .sog6I .FoLcZ:focus,
[data-theme="dark"] .BK1yt .sog6I .MuDRo:focus {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .BK1yt .sog6I .FoLcZ:focus,
[data-theme="kids"] .BK1yt .sog6I .MuDRo:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
.BK1yt .sog6I .FoLcZ:focus svg,
.BK1yt .sog6I .MuDRo:focus svg {
  box-shadow: none;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _3Hwdj {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes WAuqM {
  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);
  }
}
.NQEG-,
.NQEG- .-r2Ic {
  display: flex;
  justify-content: center;
  align-items: center;
}
.NQEG- {
  z-index: 2000;
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  line-height: 1;
}
.NQEG- .-r2Ic {
  background-color: #e6f3ff;
  width: 54rem;
  margin: 0 auto;
  position: absolute;
  top: 30vh;
  padding: 6.1rem 12.5rem;
  border-radius: 1.1rem;
  flex-direction: column;
}
.NQEG- .-r2Ic.TuuT6 {
  animation: TuuT6 0.3s ease-in-out 0s 1 forwards;
}
.NQEG- ._9R72V {
  display: flex;
  flex-direction: column;
}
.NQEG- ._0gfhc,
.NQEG- ._8VrMa {
  color: #1a191c;
  text-align: center;
}
.NQEG- ._0gfhc {
  font-size: 3.2rem;
  margin-bottom: 0;
}
[data-theme="dark"] .NQEG- ._0gfhc {
  font: 800 3.2rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .NQEG- ._0gfhc {
  font: 800 3.2rem/1.2 "Omnes", sans-serif;
}
.NQEG- ._8VrMa {
  font-size: 1.4rem;
  margin-top: 1.4rem;
}
[data-theme="kids"] .NQEG- ._8VrMa {
  font: 400 1.4rem/1.2 "Noto Sans", sans-serif;
}
.NQEG- .fdx99 {
  background-color: #ff427c;
  color: #ffffff;
  border: none;
  padding: 1rem 2.6rem;
  border-radius: 3rem;
  text-align: center;
  margin: 0 auto;
  margin-top: 3.2rem;
  cursor: pointer;
}
[data-theme="dark"] .NQEG- .fdx99 {
  font: 800 1.6rem/1.5 "Montserrat", sans-serif;
}
[data-theme="kids"] .NQEG- .fdx99 {
  font: 800 1.6rem/1.3 "Omnes", sans-serif;
}
.NQEG- .fdx99:hover {
  background-color: #ff8d9a;
}
.NQEG- .fdx99:disabled {
  background-color: #828282;
}
.NQEG- .A4ahy {
  color: #1a191c;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
}
[data-theme="dark"] .NQEG- .A4ahy {
  font: 800 3.2rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .NQEG- .A4ahy {
  font: 800 3.2rem/1.2 "Omnes", sans-serif;
}
.NQEG- .A4ahy ._98fOW {
  font-size: 4.4rem;
}
.NQEG- .A4ahy .lxdHJ {
  box-shadow: 0px 0.15rem 0.3rem rgba(0, 0, 0, 0.1);
  caret-color: #db3075;
  border: none;
  color: inherit;
  border-radius: 0.8rem;
  height: 5rem;
  width: 10rem;
  padding: 1rem;
  margin-left: 2rem;
}
.NQEG- .A4ahy .lxdHJ.vAKj- {
  border: solid #ff4242 0.1rem;
}
.NQEG- .QL8bO {
  border: 0;
  background: transparent;
  position: absolute;
  right: 2rem;
  top: 2rem;
  cursor: pointer;
}
.NQEG- .QL8bO:focus {
  border-radius: 0.1rem;
  outline: none;
}
[data-theme="dark"] .NQEG- .QL8bO:focus {
  box-shadow: #343641 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .NQEG- .QL8bO:focus {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}
@keyframes TuuT6 {
  0% {
    transform: none;
  }
  33% {
    transform: rotate(-10deg);
  }
  66% {
    transform: rotate(10deg);
  }
  100% {
    transform: none;
  }
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes U4r9K {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes aNdrS {
  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);
  }
}
._6n7hr {
  border-bottom: 0.1rem solid #2b2c32;
  display: flex;
  padding: 0.8rem 2.4rem;
  align-items: center;
}
[data-theme="dark"] ._6n7hr {
  color: #f2f2f5;
}
[data-theme="kids"] ._6n7hr {
  color: #1a191c;
}
.RaEv0 {
  margin-right: 1.6rem;
}
.RaEv0 span {
  background-color: #2b2c32;
  font: 700 2.8rem/1.4 "Noto Sans";
  display: flex;
  align-items: center;
  justify-content: center;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  text-transform: uppercase;
}
[data-theme="dark"] .kSPVN {
  font: 800 2.4rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .kSPVN {
  font: 800 2.4rem/1.1 "Omnes", sans-serif;
}
.kSPVN::first-letter {
  text-transform: uppercase;
}
.PS3ci {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes O3wb6 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _4Eql1 {
  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);
  }
}
.Qr7P6 {
  padding: 1.2rem 2.4rem 0 2.4rem;
}
.lKUtM {
  display: block;
  padding: 1.2rem 0;
  margin-bottom: 1.2rem;
  width: 100%;
  border: 0;
  cursor: pointer;
}
[data-theme="dark"] .lKUtM {
  font: 800 1.6rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .lKUtM {
  font: 800 1.8rem/1.2 "Omnes", sans-serif;
}
[data-theme="dark"] .lKUtM {
  background-color: #f2f2f5;
}
[data-theme="kids"] .lKUtM {
  background-color: #ff427c;
}
[data-theme="dark"] .lKUtM {
  color: #2b2c32;
}
[data-theme="kids"] .lKUtM {
  color: #ffffff;
}
[data-theme="dark"] .lKUtM {
  border-radius: 0.4rem;
}
[data-theme="kids"] .lKUtM {
  border-radius: 3rem;
}
.lKUtM.np6Yg {
  border: 0.1rem solid #f2f2f5;
  color: #f2f2f5;
  background-color: transparent;
  margin-bottom: 0;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes wWnP- {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes Oas61 {
  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);
  }
}
._247Zc {
  z-index: 1500;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  border: 0;
  background-color: transparent;
  pointer-events: none;
  outline: none;
}
.vl5vp {
  z-index: 1500;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.25);
  border-radius: 0.8rem;
  padding: 1.6rem 0;
  margin: 0;
  list-style: none;
  position: absolute;
  animation: huuMJ 0.3s ease-in 1;
  top: var(--top);
  left: var(--left);
}
[data-theme="dark"] .vl5vp {
  background: #343641;
}
[data-theme="kids"] .vl5vp {
  background: #e6f3ff;
}
@keyframes huuMJ {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.HQZ6E {
  position: absolute;
  width: 0;
  height: 0;
  border: 2rem solid transparent;
  left: var(--left);
}
.HQZ6E.To-3C {
  border-bottom-width: 0;
  bottom: -2rem;
}
[data-theme="dark"] .HQZ6E.To-3C {
  border-top-color: #343641;
}
[data-theme="kids"] .HQZ6E.To-3C {
  border-top-color: #e6f3ff;
}
.HQZ6E.-txyB {
  border-top-width: 0;
  top: -2rem;
}
[data-theme="dark"] .HQZ6E.-txyB {
  border-bottom-color: #343641;
}
[data-theme="kids"] .HQZ6E.-txyB {
  border-bottom-color: #e6f3ff;
}
.koZOl {
  background: #343641;
  width: 100%;
  transition: 0.3s;
  padding: 1.2rem 2.4rem;
  background: transparent;
  border: 0;
  display: flex;
  align-items: center;
  width: 100%;
}
[data-theme="dark"] .koZOl {
  color: #f2f2f5;
}
[data-theme="kids"] .koZOl {
  color: #1a191c;
}
.koZOl:not(._2S16U, [disabled]):hover {
  cursor: pointer;
}
[data-theme="dark"] .koZOl:not(._2S16U, [disabled]):hover {
  background: #2b2c32;
}
[data-theme="kids"] .koZOl:not(._2S16U, [disabled]):hover {
  background: rgba(26, 25, 28, 0.08);
}
.koZOl:not(._2S16U, [disabled]):focus {
  outline: none;
}
[data-theme="dark"] .koZOl:not(._2S16U, [disabled]):focus {
  background: #1a191c;
}
[data-theme="kids"] .koZOl:not(._2S16U, [disabled]):focus {
  background: rgba(26, 25, 28, 0.28);
}
.koZOl._2S16U {
  outline: none;
}
.koZOl.fqhor {
  color: #ff427c;
}
.koZOl[disabled] {
  color: #828282;
  cursor: not-allowed;
}
.mDD3z {
  width: 2.4rem;
  height: 2.4rem;
  margin-right: 1.6rem;
}
.IsYlW {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  flex: 1;
  text-align: left;
}
.IsYlW .G7JaD {
  opacity: 0.6;
}
.GQo0o {
  color: #ff427c;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes kDN3P {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _5NP-m {
  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);
  }
}
.n9dHu {
  color: #f2f2f5;
}
.n9dHu .b0lmx {
  width: 10rem;
  height: 10rem;
}
.n9dHu .sFss- {
  width: 4.8rem;
  height: 4.8rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes bTEdE {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes uoCuO {
  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);
  }
}
.olWv- {
  display: flex;
  align-items: center;
  padding: 0.4rem 2.4rem;
  background-color: transparent;
  border: none;
  cursor: pointer;
  width: 100%;
}
.olWv-:hover .fXkm6,
.olWv-:hover .TDyla {
  opacity: 1;
}
.olWv-:focus {
  background: #1a191c;
  outline: none;
}
.TDyla {
  transition: 0.3s;
  opacity: 0.5;
}
.fXkm6 {
  opacity: 0.65;
  margin-left: 2.1rem;
  transition: 0.3s;
}
[data-theme="dark"] .fXkm6 {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .fXkm6 {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}
[data-theme="dark"] .fXkm6 {
  color: #f2f2f5;
}
[data-theme="kids"] .fXkm6 {
  color: #1a191c;
}
.Fom-0 {
  opacity: 1;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes w-Dth {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes ctQj6 {
  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);
  }
}
.msfpy {
  color: #ff427c;
  border-bottom: 0.2rem solid #2b2c32;
  display: flex;
  align-items: center;
  padding: 0.4rem 2.4rem;
  text-decoration: none;
}
.msfpy:hover .iGw2y {
  text-decoration: underline;
}
.msfpy:focus {
  background: #1a191c;
  outline: none;
}
.msfpy .iGw2y {
  font: 400 1.6rem/1.5 "Noto Sans", sans-serif;
  margin-left: 1.6rem;
  transition: font-weight 0.3s;
}
.msfpy .UFFR1 {
  color: #ff427c;
  width: 2.4rem;
  height: 2.4rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes _8Bne4 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes mISyd {
  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);
  }
}
.kywGF {
  max-width: 40rem;
  width: calc(100vw - 3rem);
}
[data-theme="kids"] .kywGF {
  color: #1a191c;
}
[data-theme="dark"] .kywGF {
  color: #f2f2f5;
}
.WB-Qk {
  z-index: 1502;
  max-width: 40rem;
  width: calc(100vw - 3rem);
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes muDE3 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes YfeMg {
  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);
  }
}
main:focus {
  outline: none;
}
.vTOKO {
  margin: 0 auto;
  padding: 0 4.8rem;
  min-height: calc(100vh - 5.6rem);
  max-width: 98.4rem;
  width: 100%;
}
@media (max-width: 599px) {
  .vTOKO {
    padding: 0 1.7rem;
  }
}
.CWTDv {
  margin: 0 auto;
  min-height: calc(100vh - 5.6rem);
  max-width: 143.6rem;
  width: 100%;
}
.UcSEt {
  margin: 0 auto;
  padding: 0 4.8rem;
  min-height: calc(100vh - 5.6rem);
  max-width: 144rem;
  width: 100%;
}
@media (max-width: 767px) {
  .UcSEt {
    padding: 0 1.7rem;
  }
}
.osFNv {
  color: #bdbdbd;
  margin-left: 2.4rem;
  background-color: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}
@media (max-width: 767px) {
  .osFNv {
    margin-left: 1.4rem;
  }
}
.osFNv:hover, .osFNv._1-ITt {
  color: #ff427c;
  outline: none;
}
.osFNv:focus-visible {
  outline: none;
  border-radius: 0.1rem;
}
[data-theme="dark"] .osFNv:focus-visible {
  box-shadow: #1a191c 0rem 0rem 0rem 0.6rem, #f2f2f5 0rem 0rem 0rem 0.9rem;
}
[data-theme="kids"] .osFNv:focus-visible {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.6rem, #db3075 0rem 0rem 0rem 0.9rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes IicXA {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes XUkTD {
  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);
  }
}
.mXQnO {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}
.mXQnO .lxBFP {
  flex: 1;
}
.p5v22 {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 2rem;
  height: 5.6rem;
  align-items: center;
}
.QSntv {
  color: #bdbdbd;
  background-color: transparent;
  border: none;
  padding: 0;
}
.JLAj7 {
  margin-top: 0.4rem;
}
@media (max-width: 767px) {
  .QSntv {
    margin-left: 1.4rem;
  }
}
.QSntv:focus, .QSntv:hover, .QSntv.t-0an {
  color: #ff427c;
  outline: none;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes w8ocI {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes TXvdG {
  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);
  }
}
.RPtvS {
  width: 16.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: none;
  background-color: transparent;
  transition: box-shadow 0.3s;
  padding-top: 1rem;
  position: relative;
  cursor: pointer;
  height: 100%;
}
.RPtvS:focus-visible {
  border-radius: 0.1rem;
  outline: none;
}
[data-theme="dark"] .RPtvS:focus-visible {
  box-shadow: #1a191c 0rem 0rem 0rem 0.3rem, #f2f2f5 0rem 0rem 0rem 0.6rem;
}
[data-theme="kids"] .RPtvS:focus-visible {
  box-shadow: #e6f3ff 0rem 0rem 0rem 0.3rem, #db3075 0rem 0rem 0rem 0.6rem;
}
.RPtvS:focus .UJx7X, .RPtvS:hover .UJx7X {
  opacity: 1;
}
.OjRJz {
  transition: opacity 0.3s;
  opacity: 0.3;
}
.OjRJz:focus, .OjRJz:hover {
  opacity: 1;
}
.UJx7X {
  margin: 1.2rem 0;
  padding: 0 1rem;
  text-align: center;
  text-overflow: ellipsis;
  transition: opacity 0.3s;
  opacity: 0.65;
}
[data-theme="dark"] .UJx7X {
  font: 600 1.6rem/1.4 "Noto Sans", sans-serif;
}
[data-theme="kids"] .UJx7X {
  font: 600 1.6rem/1.2 "Noto Sans", sans-serif;
}
[data-theme="dark"] .UJx7X {
  color: #f2f2f5;
}
[data-theme="kids"] .UJx7X {
  color: #1a191c;
}
.JZH7t {
  opacity: 0.3;
}
.jE4pG {
  position: absolute;
  width: 100%;
  height: 10rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wYVMU {
  color: #f2f2f5;
  width: 4.4rem;
  height: 4.4rem;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes FtNaR {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes db80b {
  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);
  }
}
._2kY8F {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 82rem;
  width: 100%;
  margin: 0 auto;
  padding: 0;
}/* Sets the item to the right percentage width based on the responsive grid.
 * each item keeps a fixed number of columns, the number of columns the whole grid contains,
 * changes on different breakpoints. This only is usable for lists that should interact.
 * It uses the default gutter_width variable value as default, but it can be send in the
 * mixin if the value needs to differ from that.
*/
@keyframes rgIg7 {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.2;
  }
  100% {
    opacity: 1;
  }
}
@keyframes _8OfI8 {
  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);
  }
}
._5Gh8m {
  margin: 6.4rem 0;
  height: 3.5rem;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-content: center;
  position: absolute;
  top: 0;
}
.SUxhU {
  width: 8.95rem;
  height: 3.2rem;
}
.n7wtA {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}
.NIXWc {
  color: #f2f2f5;
  width: 100%;
  text-align: center;
  margin-bottom: 4.8rem;
}
[data-theme="dark"] .NIXWc {
  font: 800 3.2rem/1.4 "Montserrat", sans-serif;
}
[data-theme="kids"] .NIXWc {
  font: 800 3.2rem/1.2 "Omnes", sans-serif;
}