/*! tailwindcss v4.1.6 | MIT License | https://tailwindcss.com */
@layer properties;
@layer theme, base, components, utilities;

@layer theme {
  :root,
  :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
      "Liberation Mono", "Courier New", monospace;
    --color-fuchsia-300: oklch(83.3% 0.145 321.434);
    --font-weight-bold: 700;
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
  }
}

@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 0 solid;
  }

  html,
  :host {
    line-height: 1.5;
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    font-family: var(
      --default-font-family,
      ui-sans-serif,
      system-ui,
      sans-serif,
      "Apple Color Emoji",
      "Segoe UI Emoji",
      "Segoe UI Symbol",
      "Noto Color Emoji"
    );
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b,
  strong {
    font-weight: bolder;
  }

  code,
  kbd,
  samp,
  pre {
    font-family: var(
      --default-mono-font-family,
      ui-monospace,
      SFMono-Regular,
      Menlo,
      Monaco,
      Consolas,
      "Liberation Mono",
      "Courier New",
      monospace
    );
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(
      --default-mono-font-variation-settings,
      normal
    );
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol,
  ul,
  menu {
    list-style: none;
  }

  img,
  svg,
  video,
  canvas,
  audio,
  iframe,
  embed,
  object {
    display: block;
    vertical-align: middle;
  }

  img,
  video {
    max-width: 100%;
    height: auto;
  }

  button,
  input,
  select,
  optgroup,
  textarea,
  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    border-radius: 0;
    background-color: transparent;
    opacity: 1;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not (-webkit-appearance: -apple-pay-button)) or
    (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentcolor;

      @supports (color: color-mix(in lab, red, red)) {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit,
  ::-webkit-datetime-edit-year-field,
  ::-webkit-datetime-edit-month-field,
  ::-webkit-datetime-edit-day-field,
  ::-webkit-datetime-edit-hour-field,
  ::-webkit-datetime-edit-minute-field,
  ::-webkit-datetime-edit-second-field,
  ::-webkit-datetime-edit-millisecond-field,
  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button,
  input:where([type="button"], [type="reset"], [type="submit"]),
  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button,
  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer utilities {
  .visible {
    visibility: visible;
  }

  .absolute {
    position: absolute;
  }

  .static {
    position: static;
  }

  .container {
    width: 100%;

    @media (width >=40rem) {
      max-width: 40rem;
    }

    @media (width >=48rem) {
      max-width: 48rem;
    }

    @media (width >=64rem) {
      max-width: 64rem;
    }

    @media (width >=80rem) {
      max-width: 80rem;
    }

    @media (width >=96rem) {
      max-width: 96rem;
    }
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .w-full {
    width: 100%;
  }

  .transform {
    transform: var(--tw-rotate-x) var(--tw-rotate-y) var(--tw-rotate-z)
      var(--tw-skew-x) var(--tw-skew-y);
  }

  .resize {
    resize: both;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .font-bold {
    --tw-font-weight: var(--font-weight-bold);
    font-weight: var(--font-weight-bold);
  }

  .drop-shadow {
    --tw-drop-shadow-size: drop-shadow(
        0 1px 2px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.1))
      )
      drop-shadow(0 1px 1px var(--tw-drop-shadow-color, rgb(0 0 0 / 0.06)));
    --tw-drop-shadow: drop-shadow(0 1px 2px rgb(0 0 0 / 0.1))
      drop-shadow(0 1px 1px rgb(0 0 0 / 0.06));
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }

  .filter {
    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast)
      var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert)
      var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
  }
}

:root {
  --primary: #fcab10;
  --secondary: #13a49b;
  --dark: #333c43;
  --light: #eefdfc;
  --sec: #fcab10;
  --ter: #f8333c;
  --neutr: #e8e8e8;
  --white: #fff;
  --grays-white: #fff;
  --colors-blue: #007aff;
  --colors-purple: #af52de;
  --dark-10: #46545d;
  --dark-20: #586974;
  --dark-30: #607380;
  --dark-40: #697d8c;
  --dark-50: #738796;
  --dark-60: #96a5b0;
  --dark-70: #a2afb9;
  --dark-80: #b9c3ca;
  --dark-90: #c5cdd3;
  --dark-99: #f3f5f6;
  --dark-0: #333c43;
  --light-0: #0f8078;
  --light-10: #13a49b;
  --light-20: #18c9bd;
  --light-30: #1adbce;
  --light-40: #36e7dc;
  --light-50: #6deee5;
  --light-60: #b6f6f2;
  --light-70: #dafbf9;
  --light-80: #eefdfc;
  --light-90: #f8ffff;
  --light-99: #fff;
  --sec-0: #3d2801;
  --sec-10: #654201;
  --sec-20: #8d5c01;
  --sec-30: #b67702;
  --sec-40: #de9102;
  --sec-50: #fcab10;
  --sec-60: #fdbe49;
  --sec-70: #fecd72;
  --sec-80: #fed486;
  --sec-90: #fee2ae;
  --sec-99: #fff1d7;
  --ter-0: #3b0205;
  --ter-10: #620408;
  --ter-20: #8a050c;
  --ter-30: #b1060f;
  --ter-40: #d90812;
  --ter-50: #f6131e;
  --ter-60: #f8333c;
  --ter-70: #f94e56;
  --ter-80: #fa757c;
  --ter-90: #fb9da1;
  --ter-99: #fdc4c7;
  --neu-0: #292929;
  --neu-10: #3d3d3d;
  --neu-20: #525252;
  --neu-30: #666;
  --neu-40: #7a7a7a;
  --neu-50: #8f8f8f;
  --neu-60: #a3a3a3;
  --neu-70: #b8b8b8;
  --neu-80: #ccc;
  --neu-90: #e0e0e0;
  --neu-99: #e8e8e8;
  --userbubbledark: rgba(51, 60, 67, 0.6);
  --logo-orange: #fa9937;
}

.control-panel {
  padding: 20px;
  width: 100%;
  max-width: 300px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(240, 100, 219, 0.2) 100%
  );
  border: 2px solid var(--logo-orange);
  display: flex;
  flex-direction: column;
  gap: 15px;
  position: fixed;
  right: 20px;
  top: 80px;
  z-index: 1000;
  border-radius: 15px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  transform: translateX(120%);
  transition: transform 0.3s ease-in-out;
  backdrop-filter: blur(10px);
}

.control-panel.show-panel {
  transform: translateX(0);
}

.settings-button {
  position: fixed;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(240, 100, 219, 0.1) 100%
  );
  border: 2px solid var(--logo-orange);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
}

.settings-button:hover {
  transform: scale(1.1);
  box-shadow: 0 0 15px rgba(250, 153, 55, 0.3);
}

.settings-button i {
  color: var(--dark-0);
  font-size: 24px;
  transition: transform 0.3s ease;
}

.settings-button.active i {
  transform: rotate(180deg);
}

.settings-button.active {
  background: linear-gradient(
    180deg,
    rgba(240, 100, 219, 0.2) 0%,
    rgba(255, 255, 255, 0.95) 100%
  );
}

.control-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
  position: relative;
  padding: 0 15px;
}

.control-group label {
  font-family: "LigconsolataBold";
  color: var(--dark-0);
  font-size: 14px;
  text-align: center;
  width: 100%;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--logo-orange) 0%,
    var(--dark-80) 100%
  );
  outline: none;
  transition: all 0.2s;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--logo-orange);
  cursor: pointer;
  transition: all 0.2s;
}

.slider::-webkit-slider-thumb:hover {
  transform: scale(1.2);
  box-shadow: 0 0 10px rgba(250, 153, 55, 0.5);
}

.number-input {
  width: 70px;
  padding: 4px 8px;
  border: 2px solid var(--logo-orange);
  border-radius: 8px;
  font-family: "LigconsolataReg";
  color: var(--dark-0);
  text-align: center;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
}

.number-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(250, 153, 55, 0.3);
  background: rgba(255, 255, 255, 0.95);
}

.color-picker {
  -webkit-appearance: none;
  width: 60px;
  height: 60px;
  border: 2px solid var(--logo-orange);
  border-radius: 15px;
  cursor: pointer;
  padding: 0;
  background: transparent;
  transition: all 0.3s ease;
}

.color-picker:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(250, 153, 55, 0.3);
}

.color-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-picker::-webkit-color-swatch {
  border: 2px solid var(--dark-80);
  border-radius: 8px;
}

.dark-text {
  color: var(--dark-0);
}

.dark-text a {
  color: var(--light-0);
}

.light-text {
  color: var(--light-99);
}

a {
  color: none;
  text-decoration: none;
}

.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.josefin-sans {
  font-family: "Josefin Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
}

.inconsolata {
  font-family: "Inconsolata", monospace;
  font-optical-sizing: auto;
  font-weight: weight;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

@font-face {
  font-family: "LigconsolataReg";
  src: url("../fonts/Ligconsolata-Regular.woff") format("woff");
}

@font-face {
  font-family: "LigconsolataBold";
  src: url("../fonts/Ligconsolata-Bold.woff") format("woff");
}

h1 {
  font-family: Josefin Sans;
  font-size: 46px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.51px;
}

h2 {
  font-family: Josefin Sans;
  font-size: 35px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.39px;
}

h3 {
  font-family: Josefin Sans;
  font-size: 30px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  letter-spacing: -0.33px;
}

h4 {
  font-family: Josefin Sans;
  font-size: 20px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.22px;
}

h5 {
  font-family: Josefin Sans;
  font-size: 15px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: -0.17px;
}

.bodyL {
  font-family: Lato;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.BODY-l {
  font-family: Lato;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.15px;
}

.BodyM {
  font-family: Lato;
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.13px;
}

.Body-S {
  font-family: Lato;
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.12px;
}

label {
  font-family: Lato;
  font-size: 11px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.11px;
}

.bot-message {
  font-family: "LigconsolataReg";
  font-size: 13px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.11px;
  overflow: hidden;
  margin: 0 auto;
}

.bot-message-input {
  font-family: "LigconsolataReg";
  font-size: 20px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.11px;
  overflow: hidden;
  text-align: center;
}

.bot-message-truth {
  font-family: "LigconsolataReg";
  border-radius: 10px;
  font-size: 15px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.11px;
  overflow: hidden;
  text-align: center;
  padding: 10px 10px;
  margin: 10px 0px;
  border: 1px solid var(--primary);
}

.prim-color {
  color: var(--primary);
}

.sec-color {
  color: var(--secondary);
}

.AI-login-signup-top-message {
  padding: 0 0 0 1px;
  background-color: var(--dark-0);
  outline: 1px dashed var(--dark-0);
  border-radius: 15px 15px 15px 0px;
  gap: 5px;
  margin: 10px 10px 10px 0px;
  padding: 5px 5px 5px 15px;
  align-self: stretch;
  flex-grow: 0;
  font-family: "Ligconsolata Regular";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-align: left;
  color: var(--light);
  text-decoration: none;
}

.AI-login-signup-top-message a:hover,
.AI-login-signup-bottom-message a:hover {
  background: var(--dark-10);
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
  color: var(--dark-60);
  text-decoration: none;
  transition: all 250ms linear;
}

.AI-login-signup-bottom-message a,
.AI-login-signup-top-message a {
  color: var(--light);
  text-decoration: none;
}

.AI-login-signup-bottom-message {
  padding: 0 0 0 1px;
  background-color: var(--dark-0);
  outline: 1px dashed var(--dark-0);
  border-radius: 0px 15px 15px 15px;
  gap: 5px;
  margin: 10px 10px 5px 0px;
  padding: 5px 5px 5px 15px;
  align-self: stretch;
  flex-grow: 0;
  font-family: "Ligconsolata Regular";
  font-size: 12px;
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.4px;
  text-align: left;
  color: var(--light);
}

.social-button {
  width: 60px;
  border: var(--dark-0) solid 2px;
  border-radius: 50px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  background: linear-gradient(
      360deg,
      rgba(51, 60, 67, 0.25) 0%,
      rgba(255, 255, 255, 0) 63%
    ),
    url("../assets/planet3.png");
  background-size: cover;
  height: 60px;
  margin: 5px;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  padding: 8px;
}

.social-button img,
.social-button span,
.mail-button img,
.mail-button span {
  vertical-align: middle;
  margin: auto;
  font-weight: 700;
}

.social-button:hover {
  background: linear-gradient(
      360deg,
      rgba(51, 60, 67, 0.25) 0%,
      rgba(51, 60, 67, 0.17) 63%
    ),
    url("../assets/planet3.png");
  background-size: cover;
  padding: 10px;
}

.mail-button {
  width: 60px;
  height: 60px;
  border: var(--sec-40) solid 2px;
  border-radius: 50px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  background: linear-gradient(
      360deg,
      rgba(250, 153, 55, 0.25) 0%,
      rgba(255, 255, 255, 0) 63%
    ),
    url("../assets/planet3.png");
  min-height: 60px;
  margin: 5px;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  padding: 20px;
  color: var(--sec-40);
  background-size: cover;
}

.mail-button:hover {
  background: linear-gradient(
      360deg,
      rgba(250, 153, 55, 0.25) 0%,
      rgba(250, 153, 55, 0.17) 63%
    ),
    url("../assets/planet3.png");
  padding: 20px;
  background-size: cover;
}

.planet-button {
  width: 60px;
  border: var(--dark-0) solid 0px;
  border-radius: 50px;
  font-family: "Josefin Sans", sans-serif;
  font-size: 16px;
  background: linear-gradient(
      360deg,
      rgba(51, 60, 67, 0.25) 0%,
      rgba(255, 255, 255, 0) 63%
    ),
    url("../assets/planet-back.jpg");
  background-size: cover;
  height: 60px;
  margin: auto;
  vertical-align: middle;
  align-items: center;
  cursor: pointer;
  padding: 8px;
}

.planet-button img,
.social-button span,
.mail-button img,
.mail-button span {
  vertical-align: middle;
  margin: auto;
  font-weight: 700;
}

.planet-button:hover {
  background: linear-gradient(
      360deg,
      rgba(51, 60, 67, 0.25) 0%,
      rgba(51, 60, 67, 0.17) 63%
    ),
    url("../assets/planet-back.jpg");
  background-size: cover;
  padding: 10px;
}

.messageBox {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255, 255, 255, 0.5);
  padding: 0;
  border-radius: 50px;
  border: 2px solid var(--logo-orange);
  margin: 20px 0px;
}

.messageBox:focus-within,
.messageBox:hover {
  border: 2px solid var(--logo-orange);
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
  background-color: rgba(255, 255, 255, 0.8);
}

.fileUploadWrapper {
  width: fit-content;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "LigconsolataReg";
}

#file {
  display: none;
}

.fileUploadWrapper label {
  cursor: pointer;
  width: fit-content;
  height: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.fileUploadWrapper label svg {
  height: 18px;
}

.fileUploadWrapper label svg path {
  transition: all 0.3s;
}

.fileUploadWrapper label svg circle {
  transition: all 0.3s;
}

.fileUploadWrapper label:hover svg path {
  stroke: #fff;
}

.fileUploadWrapper label:hover svg circle {
  stroke: #fff;
  fill: #3c3c3c;
}

.fileUploadWrapper label:hover .tooltip {
  display: block;
  opacity: 1;
}

.tooltip {
  position: absolute;
  top: -40px;
  display: none;
  opacity: 0;
  color: white;
  font-size: 10px;
  text-wrap: nowrap;
  background-color: #000;
  padding: 6px 10px;
  border: 1px solid #3c3c3c;
  border-radius: 5px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.596);
  transition: all 0.3s;
}

#messageInput {
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0);
  outline: none;
  border: none;
  padding-left: 10px;
  color: var(--dark-0);
}

#messageInput:focus ~ #sendButton svg path,
#messageInput:valid ~ #sendButton svg path {
  fill: var(--logo-orange);
  stroke: #fff;
  box-shadow: none;
  color: var(--dark-0);
}

#sendButton {
  width: 60px;
  height: 50px;
  background-color: #fff;
  outline: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  border-radius: 50px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

#sendButton svg {
  height: 18px;
  transition: all 0.3s;
}

#sendButton svg path {
  transition: all 0.3s;
}

#sendButton:hover {
  box-shadow: none;
}

#sendButton:hover svg path {
  fill: var(--logo-orange);
  stroke: white;
}

.Hide {
  display: none;
}

.show {
  display: block;
}

.button {
  position: relative;
  padding: 0px 15px;
  border-radius: 60px;
  border: 2px #fa9937 solid;
  color: var(--dark-0);
  cursor: pointer;
  background-color: #fa9937;
  background: linear-gradient(
    180deg,
    rgba(250, 153, 55, 0.1) 0%,
    rgba(250, 153, 55, 0.72) 100%
  );
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  transition: all 0.2s ease;
  margin: 40px auto;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  width: 80%;
}

.button .inside {
  display: flex;
  height: 100px;
  justify-content: center;
  rotate: revert;
}

.button span {
  display: flex;
  justify-content: center;
  rotate: revert;
  font-family: "Josefin Sans";
}

.button:active {
  transform: scale(0.96);
}

.button:before,
.button:after {
  position: absolute;
  content: "";
  width: 150%;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  z-index: -1000;
  background-repeat: no-repeat;
}

.button-planet3 {
  position: relative;
  padding: 0px 15px;
  border-radius: 60px;
  border: 2px #c926b0 solid;
  color: var(--dark-0);
  cursor: pointer;
  background-color: rgb(240, 100, 219);
  background: linear-gradient(
    180deg,
    rgba(250, 153, 55, 0.1) 0%,
    rgba(240, 100, 219, 0.3) 100%
  );
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  transition: all 0.2s ease;
  margin: 5px;
  display: flex;
  height: 60px;
  align-items: center;
  justify-content: center;
  width: 160px;
  font-family: "LigconsolataBold";
}

.button-planet3-game {
  position: relative;
  padding: 0px 5px;
  border-radius: 60px;
  border: 2px #c926b0 solid;
  color: var(--dark-0);
  cursor: pointer;
  background-color: rgb(240, 100, 219);
  background: linear-gradient(
    180deg,
    rgba(250, 153, 55, 0.1) 0%,
    rgba(240, 100, 219, 0.3) 100%
  );
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  transition: all 0.2s ease;
  margin: 5px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "LigconsolataBold";
}

.button-game-prim {
  position: relative;
  padding: 0px 5px;
  border-radius: 60px;
  border: 2px var(--primary) solid;
  color: var(--primary);
  cursor: pointer;
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  transition: all 0.2s ease;
  margin: 5px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "LigconsolataBold";
}

.button-game-sec {
  position: relative;
  padding: 0px 5px;
  border-radius: 60px;
  border: 2px var(--secondary) solid;
  color: var(--secondary);
  cursor: pointer;
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  transition: all 0.2s ease;
  margin: 5px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "LigconsolataBold";
}

.button-game-third {
  position: relative;
  padding: 0px 5px;
  border-radius: 60px;
  border: 2px var(--secondary) solid;
  background-color: var(--secondary);
  color: var(--light-99);
  cursor: pointer;
  backdrop-filter: blur(5.5px);
  -webkit-backdrop-filter: blur(7.5px);
  transition: all 0.2s ease;
  margin: 5px;
  display: flex;
  height: 40px;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-family: "LigconsolataBold";
}

.full-width {
  width: 90%;
}

.planet {
  border-radius: 100%;
  background-position: top left;
  background-size: 150% 100%;
  animation: mymove 20s infinite;
  margin: 5px;
  cursor: pointer;
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
}

.planet:hover {
  border: 2px solid #fa9937;
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2),
    inset 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -webkit-box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2),
    inset 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
  -moz-box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2),
    inset 10px 19px 48px -23px rgba(0, 0, 0, 0.48);
}

@keyframes mymove {
  80% {
    background-position: top right;
  }
}

.back1 {
  background-image: url("../assets/planet-back.jpg");
}

.back2 {
  background-image: url("../assets/planet-back1.jpg");
}

.back3 {
  background-image: url("../assets/planet-back2.jpg");
}

.back4 {
  background-image: url("../assets/planet-back3.jpg");
}

.back5 {
  background-image: url("../assets/planet-back4.jpg");
}

.back6 {
  background-image: url("../assets/planet-back5.jpg");
}

.controls {
  margin: 10px 0px;
}

.controls input {
  border-radius: 50px;
}

.gameland1 {
  border-radius: 20px;
  background-image: url("../assets/gameland.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px;
  border: 2px #fa9937 solid;
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
}

.gameland1-control {
  border-radius: 20px;
  background-image: url("../assets/gameland.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: 5px;
  cursor: pointer;
  background-color: rgba(255, 255, 255, 0.4);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
}

.gameland1:hover {
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
}

.meatball-talking {
  border-radius: 100%;
  background-position: top left;
  background-size: cover;
  margin: auto;
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  position: fixed;
  top: -90px;
  left: 37%;
}

.center-content {
  margin: auto;
}

button-margin {
  margin: 0px 10px;
}

.fab-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.fab {
  width: 56px;
  height: 56px;
  background-color: #c926b0;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.3s ease;
  z-index: 10;
}

.fab:hover {
  transform: scale(1.1);
}

.fab-icon {
  color: #ffffff;
  font-size: 40px;
}

.fab.open {
  transform: rotate(45deg);
}

.fab-options {
  position: absolute;
  bottom: 70px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.fab-options.open {
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}

.fab-option {
  width: 48px;
  height: 48px;
  background-color: var(--light-99);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  opacity: 0;
  transform: scale(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.fab-options.open .fab-option:nth-child(1) {
  animation: showOption 0.3s forwards 0.3s;
}

.fab-options.open .fab-option:nth-child(2) {
  animation: showOption 0.3s forwards 0.2s;
}

.fab-options.open .fab-option:nth-child(3) {
  animation: showOption 0.3s forwards 0.1s;
}

@keyframes showOption {
  0% {
    opacity: 0;
    transform: scale(0.5) translateY(10px);
  }

  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.fab-options.open .fab-option:hover {
  transform: scale(1.1);
  background-color: var(--color-fuchsia-300);
  color: var(--light-99);
}

.fab-option.live {
  background-color: var(--light-99);
  color: #e88f37;
}

.fab-option.podcast {
  background-color: var(--light-99);
  color: #e88f37;
}

.fab-option.gallery {
  background-color: var(--light-99);
  color: #e88f37;
}

.fab-option i {
  font-size: 20px;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #2b2930;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.1);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #7b7b7a;
  text-decoration: none;
  font-size: 14px;
  transition: color 0.3s;
}

.nav-item:hover {
  color: #e7e7e6;
}

.nav-icon {
  font-size: 24px;
}

.gameland {
  background-position: top left;
  background-size: cover;
  margin: auto;
  position: fixed;
  top: 350px;
  left: 43%;
}

.loadbar {
  height: 10px;
  border-radius: 10px;
  background-color: var(--logo-orange);
  box-shadow: 5px 10px 18px -13px rgba(0, 0, 0, 0.48) inset;
  -webkit-box-shadow: 5px 10px 18px -13px rgba(0, 0, 0, 0.48) inset;
  -moz-box-shadow: 5px 10px 18px -13px rgba(0, 0, 0, 0.48) inset;
  width: 100%;
}

.one {
  width: 33%;
}

.two {
  width: 66%;
}

.planet3-color {
  background-color: #cc33b5 !important;
}

.planet3-color-border {
  border-color: #cc33b5 !important;
}

.planet3-color-border:hover {
  border: 2px solid #cc33b5;
}

.planet3-background {
  background-color: #980581 !important;
}

.nonactive-color-border {
  border: 2px solid var(--dark-70);
}

.profile-card {
  border-radius: 10px;
  padding: 10px 0px 0px 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  color: var(--light-99);
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.48) inset;
  cursor: pointer;
  border: 1px #c926b0 solid;
  background-color: #ee72db;
}

.profile-card span {
  font-family: "LigconsolataBold";
  font-size: 30px;
  padding: 2px 5px;
  border-radius: 5px;
  position: relative;
  margin-top: 10px;
}

.profile-card p {
  font-family: "LigconsolataBold";
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: #000;
  margin-top: 10px;
}

.score-card {
  border-radius: 10px;
  padding: 0px 0px 0px 0px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  margin: auto;
  color: var(--light-99);
  cursor: pointer;
  border: 1px var(--secondary) solid;
  background-color: var(--primary);
}

.score-card span {
  font-family: "LigconsolataBold";
  font-size: 20px;
  padding: 2px 5px;
  border-radius: 5px;
  position: relative;
  margin-top: 0px;
}

.score-card p {
  font-family: "LigconsolataBold";
  font-size: 8px;
  text-transform: uppercase;
  padding: 2px 5px;
  border-radius: 5px;
  background-color: var(--secondary);
  margin-top: 0px;
}

.streak {
  background-image: url(..//assets/streak.png);
}

.streak:hover {
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
}

.active {
  background-image: url(..//assets/trophy.png);
  background-size: cover;
}

.active:hover {
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
}

.friends {
  background-image: url(..//assets/heart.png);
}

.friends:hover {
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
}

.hs {
  display: flex;
  overflow-x: scroll;
  justify-content: space-between;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  margin: 0 -20px;
}

.hs__header {
  display: flex;
  align-items: center;
  width: 100%;
}

.hs__headline {
  flex: 1;
}

.hs__arrows {
  align-self: center;
}

.hs__arrows .arrow:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  content: "";
  background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNSIgaGVpZ2h0PSI5IiB2aWV3Qm94PSIwIDAgMTUgOSI+Cgk8cGF0aCBmaWxsPSIjMzMzMzMzIiBkPSJNNy44NjcgOC41NzRsLTcuMjItNy4yMi43MDctLjcwOEw3Ljg2NyA3LjE2IDE0LjA1Ljk4bC43MDYuNzA3Ii8+Cjwvc3ZnPgo=");
  background-size: contain;
  filter: brightness(0);
  width: 18px;
  height: 12px;
  cursor: pointer;
}

.hs__arrows .arrow.disabled:before {
  filter: brightness(4);
}

.hs__arrows .arrow.arrow-prev:before {
  transform: rotate(90deg);
  margin-right: 10px;
}

.hs__arrows .arrow.arrow-next:before {
  transform: rotate(-90deg);
}

.hs__item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: calc(100% / 2 - (10px * 2) - (20px / 2));
  margin: 10px 1px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@media only screen and (max-width: 990px) {
  .hs__item {
    flex-basis: calc(100% / 3 - (10px * 2) - (20px / 3));
  }
}

.hs__item:last-child:after {
  content: "";
  display: block;
  position: absolute;
  width: 10px;
  height: 1px;
  right: calc(10px * 2 * -1);
}

.hs__item:first-child {
  margin-left: calc(10px * 2);
}

.hs__item__description {
  z-index: 1;
  align-self: flex-start;
  margin: 10px 0;
}

.hs__item__subtitle {
  color: #aaa;
  display: block;
}

.hs__item__image__wrapper {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.hs__item__image {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
}

@media only screen and (min-width: 990px) {
  .hs__wrapper {
    overflow: hidden;
  }
}

@media (hover: none) and (pointer: coarse) {
  .hs__wrapper .hs__arrows {
    display: none;
  }

  .hs__wrapper .hs__item {
    flex: 1 0 calc(23% - 10px * 2);
  }
}

@media only screen and (hover: none) and (pointer: coarse) and (max-width: 990px) {
  .hs__wrapper .hs__item {
    flex: 1 0 calc(45% - 10px * 2);
  }
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.hidden-overflow {
  overflow: hidden;
}

.content {
  justify-content: center;
  align-items: center;
  text-align: center;
  max-width: 400px;
}

.avatar {
  background-image: url("../assets/1-AI.png"),
    url("../assets/CHARACTER-V3-back-or.png");
  background-position: center, center;
  background-repeat: no-repeat, repeat;
  background-size: cover, cover;
  border-radius: 100px;
  width: 100px;
  height: 100px;
  outline: 2px dashed violet;
  box-shadow: 0 0 0 2px rgb(255, 255, 255), 0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
  margin: 20px auto;
}

textarea {
  border: 2px solid var(--logo-orange);
  width: 350px;
  height: 5em;
  padding: 0.8em;
  outline: none;
  overflow: hidden;
  background-color: #fff;
  border-radius: 10px;
  transition: all 0.5s;
}

textarea:hover,
textarea:focus {
  border: 2px solid #fa9937;
  box-shadow: 0px 0px 0px 7px rgba(236, 171, 74, 0.2);
  background-color: white;
}

.aimessage {
  width: 20em;
  contain: none;
  word-wrap: break-word;
}

.typewriter {
  overflow: hidden;
  border-right: 0.15em solid orange;
  white-space: nowrap;
  margin: 0 auto;
  letter-spacing: 0.15em;
  word-wrap: break-word;
  animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}

@keyframes typing {
  from {
    width: 0;
  }

  to {
    width: 100%;
  }
}

@keyframes blink-caret {
  from,
  to {
    border-color: transparent;
  }

  50% {
    border-color: orange;
  }
}

.float {
  animation: float 6s ease-in-out infinite;
}

.float10 {
  animation: float1 3s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translatey(0px);
    transform: rotate(0deg);
  }

  50% {
    transform: translatey(-20px);
    transform: rotate(20deg);
  }

  100% {
    transform: translatey(0px);
    transform: rotate(0deg);
  }
}

@keyframes float1 {
  0% {
    transform: translatey(0px);
  }

  50% {
    transform: translatey(-10px);
  }

  100% {
    transform: translatey(0px);
  }
}

.background1 {
  background-image: url("../assets/planet.png");
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  background-position: top;
  background-size: cover;
}

.background1-mail {
  background-image: url("../assets/planet-mail.png");
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  background-position: top;
  background-size: cover;
}

.background1-stars {
  background-image: url("../assets/back-stars.png");
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  background-position: top;
  background-size: cover;
}

.background3-stars {
  background-image: url("../assets/back-stars-planet3.png");
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 1;
  background-position: top;
  background-size: cover;
}

@keyframes move {
  100% {
    transform: translate3d(0, 0, 1px) rotate(360deg);
  }
}

.main {
  position: fixed;
  top: 50%;
  left: 50%;
  height: 1px;
  width: 1px;
  z-index: 1;
  background-color: #f4ed31;
  border-radius: 50%;
  box-shadow: -42vw -4vh 0px 0px #f4ed31, 25vw -41vh 0px 0px #f4ed31,
    -20vw 49vh 0px 1px #f4ed31, 5vw 40vh 1px 1px #f4ed31,
    29vw 19vh 1px 0px #f4ed31, -44vw -13vh 0px 0px #f4ed31,
    46vw 41vh 0px 1px #f4ed31, -3vw -45vh 0px 1px #f4ed31,
    47vw 35vh 1px 0px #f4ed31, 12vw -8vh 1px 0px #f4ed31,
    -34vw 48vh 1px 1px #f4ed31, 32vw 26vh 1px 1px #f4ed31,
    32vw -41vh 1px 1px #f4ed31, 0vw 37vh 1px 1px #f4ed31,
    34vw -26vh 1px 0px #f4ed31, -14vw -49vh 1px 0px #f4ed31,
    -12vw 45vh 0px 1px #f4ed31, -44vw -33vh 0px 1px #f4ed31,
    -13vw 41vh 0px 0px #f4ed31, -36vw -11vh 0px 1px #f4ed31,
    -23vw -24vh 1px 0px #f4ed31, -38vw -27vh 0px 1px #f4ed31,
    16vw -19vh 0px 0px #f4ed31, 28vw 33vh 1px 0px #f4ed31,
    -49vw -4vh 0px 0px #f4ed31, 16vw 32vh 0px 1px #f4ed31,
    36vw -18vh 1px 0px #f4ed31, -25vw -30vh 1px 0px #f4ed31,
    -23vw 24vh 0px 1px #f4ed31, -2vw -35vh 1px 1px #f4ed31,
    -25vw 9vh 0px 0px #f4ed31, -15vw -34vh 0px 0px #f4ed31,
    -8vw -19vh 1px 0px #f4ed31, -20vw -20vh 1px 1px #f4ed31,
    42vw 50vh 0px 1px #f4ed31, -32vw 10vh 1px 0px #f4ed31,
    -23vw -17vh 0px 0px #f4ed31, 44vw 15vh 1px 0px #f4ed31,
    -40vw 33vh 1px 1px #f4ed31, -43vw 8vh 0px 0px #f4ed31,
    -48vw -15vh 1px 1px #f4ed31, -24vw 17vh 0px 0px #f4ed31,
    -31vw 50vh 1px 0px #f4ed31, 36vw -38vh 0px 1px #f4ed31,
    -7vw 48vh 0px 0px #f4ed31, 15vw -32vh 0px 0px #f4ed31,
    29vw -41vh 0px 0px #f4ed31, 2vw 37vh 1px 0px #f4ed31,
    7vw -40vh 1px 1px #f4ed31, 15vw 18vh 0px 0px #f4ed31,
    25vw -13vh 1px 1px #f4ed31, -46vw -12vh 1px 1px #f4ed31,
    -18vw 22vh 0px 0px #f4ed31, 23vw -9vh 1px 0px #f4ed31,
    50vw 12vh 0px 1px #f4ed31, 45vw 2vh 0px 0px #f4ed31,
    14vw -48vh 1px 0px #f4ed31, 23vw 43vh 0px 1px #f4ed31,
    -40vw 16vh 1px 1px #f4ed31, 20vw -31vh 0px 1px #f4ed31,
    -17vw 44vh 1px 1px #f4ed31, 18vw -45vh 0px 0px #f4ed31,
    33vw -6vh 0px 0px #f4ed31, 0vw 7vh 0px 1px #f4ed31,
    -10vw -18vh 0px 1px #f4ed31, -19vw 5vh 1px 0px #f4ed31,
    1vw 42vh 0px 0px #f4ed31, 22vw 48vh 0px 1px #f4ed31,
    39vw -8vh 1px 1px #f4ed31, -6vw -42vh 1px 0px #f4ed31,
    -47vw 34vh 0px 0px #f4ed31, -46vw 19vh 0px 1px #f4ed31,
    -12vw -32vh 0px 0px #f4ed31, -45vw -38vh 0px 1px #f4ed31,
    -28vw 18vh 1px 0px #f4ed31, -38vw -46vh 1px 1px #f4ed31,
    49vw -6vh 1px 1px #f4ed31, -28vw 18vh 1px 1px #f4ed31,
    10vw -24vh 0px 1px #f4ed31, -5vw -11vh 1px 1px #f4ed31,
    33vw -8vh 1px 0px #f4ed31, -16vw 17vh 0px 0px #f4ed31,
    18vw 27vh 0px 1px #f4ed31, -8vw -10vh 1px 1px #f4ed31;
  box-shadow: 24vw 9vh 1px 0px #f4ed31, 12vw -24vh 0px 1px #f4ed31,
    -45vw -22vh 0px 0px #f4ed31, -37vw -40vh 0px 1px #f4ed31,
    29vw 19vh 0px 1px #f4ed31, 4vw -8vh 0px 1px #f4ed31,
    -5vw 21vh 1px 1px #f4ed31, -27vw 26vh 1px 1px #f4ed31,
    -47vw -3vh 1px 1px #f4ed31, -28vw -30vh 0px 1px #f4ed31,
    -43vw -27vh 0px 1px #f4ed31, 4vw 22vh 1px 1px #f4ed31,
    36vw 23vh 0px 0px #f4ed31, -21vw 24vh 1px 1px #f4ed31,
    -16vw 2vh 1px 0px #f4ed31, -16vw -6vh 0px 0px #f4ed31,
    5vw 26vh 0px 0px #f4ed31, -34vw 41vh 0px 0px #f4ed31,
    1vw 42vh 1px 1px #f4ed31, 11vw -13vh 1px 1px #f4ed31,
    48vw -8vh 1px 0px #f4ed31, 22vw -15vh 0px 0px #f4ed31,
    45vw 49vh 0px 0px #f4ed31, 43vw -27vh 1px 1px #f4ed31,
    20vw -2vh 0px 0px #f4ed31, 8vw 22vh 0px 1px #f4ed31,
    39vw 48vh 1px 1px #f4ed31, -21vw -11vh 0px 1px #f4ed31,
    -40vw 45vh 0px 1px #f4ed31, 11vw -30vh 1px 0px #f4ed31,
    26vw 30vh 1px 0px #f4ed31, 45vw -29vh 0px 1px #f4ed31,
    -2vw 18vh 0px 0px #f4ed31, -29vw -45vh 1px 0px #f4ed31,
    -7vw -27vh 1px 1px #f4ed31, 42vw 24vh 0px 0px #f4ed31,
    45vw -48vh 1px 0px #f4ed31, -36vw -18vh 0px 0px #f4ed31,
    -44vw 13vh 0px 1px #f4ed31, 36vw 16vh 0px 1px #f4ed31,
    40vw 24vh 0px 0px #f4ed31, 18vw 11vh 0px 0px #f4ed31,
    -15vw -23vh 1px 0px #f4ed31, -24vw 48vh 0px 1px #f4ed31,
    27vw -45vh 1px 0px #f4ed31, -2vw -24vh 0px 1px #f4ed31,
    -15vw -28vh 0px 0px #f4ed31, -43vw 13vh 1px 0px #f4ed31,
    7vw 27vh 1px 0px #f4ed31, 47vw 5vh 0px 0px #f4ed31,
    -45vw 15vh 1px 1px #f4ed31, -5vw -28vh 0px 1px #f4ed31,
    38vw 25vh 1px 1px #f4ed31, -39vw -1vh 1px 0px #f4ed31,
    5vw 0vh 1px 0px #f4ed31, 49vw 13vh 0px 0px #f4ed31,
    48vw 10vh 0px 1px #f4ed31, 19vw -28vh 0px 0px #f4ed31,
    4vw 7vh 0px 0px #f4ed31, 21vw 21vh 1px 1px #f4ed31,
    -15vw -15vh 0px 1px #f4ed31, -6vw -42vh 1px 0px #f4ed31,
    -15vw 48vh 1px 1px #f4ed31, -23vw 25vh 1px 1px #f4ed31,
    -48vw 25vh 0px 1px #f4ed31, -31vw -19vh 0px 1px #f4ed31,
    4vw 37vh 1px 1px #f4ed31, -43vw 28vh 0px 0px #f4ed31,
    3vw -25vh 0px 1px #f4ed31, -39vw 14vh 0px 1px #f4ed31,
    -40vw 31vh 0px 1px #f4ed31, 35vw -36vh 1px 1px #f4ed31,
    16vw 49vh 0px 0px #f4ed31, 6vw 39vh 0px 0px #f4ed31,
    3vw -35vh 0px 1px #f4ed31, -44vw -2vh 1px 0px #f4ed31,
    -6vw 21vh 1px 0px #f4ed31, 48vw 9vh 1px 1px #f4ed31,
    -43vw 30vh 1px 1px #f4ed31, 29vw -12vh 1px 1px #f4ed31,
    -48vw 13vh 1px 0px #f4ed31, -42vw 32vh 1px 1px #f4ed31,
    34vw 15vh 1px 1px #f4ed31, 29vw -37vh 1px 1px #f4ed31,
    28vw 2vh 0px 0px #f4ed31;
  animation: zoom 16s alternate infinite;
}

@keyframes zoom {
  0% {
    transform: scale(1);
  }

  100% {
    transform: scale(1.5);
  }
}

.glass {
  background: rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.3);
  padding: 10px 10px;
  text-align: center;
}

.glass-message {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  border: 1px solid var(--light-80);
  padding: 10px 10px;
  text-align: center;
  margin: 110px 5px 40px 5px;
  align-self: stretch;
  overflow-wrap: break-word;
}

.glass-message-top-card {
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  padding: 10px 10px;
  text-align: center;
  margin: 20px 0px;
  align-self: stretch;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-message-top-card-create {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #f7d5f1;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  padding: 10px 10px;
  text-align: center;
  margin: 20px 0px;
  align-self: stretch;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glass-element-game {
  background: rgba(255, 255, 255, 0.5);
  border-radius: 15px;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  border: 1px solid #f7d5f1;
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
  padding: 10px 10px;
  text-align: center;
  margin: 0px;
  align-self: stretch;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 90%;
}

.horizontal-align {
  padding: 10px 10px;
  text-align: center;
  align-self: stretch;
  overflow-wrap: break-word;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-title {
  font-family: "Josefin Sans";
  font-size: 18px;
  text-transform: uppercase;
  font-weight: 300;
  color: #980581;
}

.game-title {
  font-family: "Josefin Sans";
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #980581;
}

.user {
  background-image: url(../assets/user.png);
  border-radius: 100%;
  background-position: top left;
  background-size: cover;
  margin: auto;
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  height: 80px;
  width: 80px;
}

.user-contain {
  border-radius: 100%;
  background-position: top left;
  background-size: cover;
  margin: auto;
  box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  -webkit-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  -moz-box-shadow: 10px 19px 48px -23px rgba(0, 0, 0, 0.2) inset;
  height: 50px;
  width: 50px;
}

.user0 {
  background-image: url(../assets/user.png);
}

.user1 {
  background-image: url(../assets/user1.png);
}

.user-message {
  font-family: "LigconsolataReg";
  font-size: 12px;
  width: 100px;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: 0.11px;
  overflow: hidden;
  background-color: var(--light-0);
  color: var(--light-99);
  padding: 5px;
  border-radius: 5px;
}

.background {
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
  background: #f5f5f5;
  overflow: hidden;
}

.background span {
  width: 30vmin;
  height: 30vmin;
  border-radius: 50vmin;
  backface-visibility: hidden;
  position: absolute;
  animation: move;
  animation-duration: 17;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

.background span:nth-child(0) {
  color: none;
  top: 18%;
  left: 15%;
  animation-duration: 150s;
  animation-delay: -20s;
  transform-origin: 18vw 4vh;
  box-shadow: 100vmin 0 12.750126843716437vmin currentColor;
}

.background span:nth-child(1) {
  color: #0080ff00;
  top: 27%;
  left: 47%;
  animation-duration: 80s;
  animation-delay: -20s;
  transform-origin: 11vw 9vh;
  box-shadow: 100vmin 0 13.444364777742663vmin currentColor;
}

.background span:nth-child(2) {
  color: #0080ff00;
  top: 38%;
  left: 65%;
  animation-duration: 70s;
  animation-delay: -50s;
  transform-origin: 3vw -9vh;
  box-shadow: -100vmin 0 12.712540264442444vmin currentColor;
}

.background span:nth-child(3) {
  color: #0080ff00;
  top: 86%;
  left: 70%;
  animation-duration: 60s;
  animation-delay: -60s;
  transform-origin: 2vw 7vh;
  box-shadow: -100vmin 0 12.97745315017724vmin currentColor;
}

.background span:nth-child(4) {
  color: #0080ff00;
  top: 16%;
  left: 60%;
  animation-duration: 100s;
  animation-delay: -80s;
  transform-origin: -6vw 8vh;
  box-shadow: 100vmin 0 12.513257620643907vmin currentColor;
}

.background span:nth-child(5) {
  color: #0080ff00;
  top: 72%;
  left: 14%;
  animation-duration: 50s;
  animation-delay: -90s;
  transform-origin: -16vw -23vh;
  box-shadow: 100vmin 0 13.372278565113666vmin currentColor;
}

.background span:nth-child(6) {
  color: #0080ff00;
  top: 18%;
  left: 37%;
  animation-duration: 120s;
  animation-delay: -100s;
  transform-origin: 6vw -2vh;
  box-shadow: -100vmin 0 12.677454562880122vmin currentColor;
}

.background span:nth-child(7) {
  color: #0080ff00;
  top: 69%;
  left: 60%;
  animation-duration: 15s;
  animation-delay: -27s;
  transform-origin: 9vw 22vh;
  box-shadow: 100vmin 0 13.242919563118711vmin currentColor;
}

.background span:nth-child(8) {
  color: #0080ff00;
  top: 89%;
  left: 73%;
  animation-duration: 100s;
  animation-delay: -50s;
  transform-origin: 14vw -8vh;
  box-shadow: -100vmin 0 13.139139319925238vmin currentColor;
}

.background span:nth-child(9) {
  color: #0080ff00;
  top: 6%;
  left: 81%;
  animation-duration: 50s;
  animation-delay: -219s;
  transform-origin: 8vw -12vh;
  box-shadow: 100vmin 0 13.127111938530847vmin currentColor;
}

.background span:nth-child(10) {
  color: #0080ff00;
  top: 2%;
  left: 14%;
  animation-duration: 17s;
  animation-delay: -51s;
  transform-origin: 8vw -1vh;
  box-shadow: 100vmin 0 13.103702338901279vmin currentColor;
}

.background span:nth-child(11) {
  color: #0080ff00;
  top: 52%;
  left: 8%;
  animation-duration: 11s;
  animation-delay: -89s;
  transform-origin: -16vw 22vh;
  box-shadow: 100vmin 0 12.617387626203808vmin currentColor;
}

.background span:nth-child(12) {
  color: #0080ff00;
  top: 92%;
  left: 5%;
  animation-duration: 88s;
  animation-delay: -180s;
  transform-origin: 8vw -16vh;
  box-shadow: -100vmin 0 12.589806508789039vmin currentColor;
}

.background span:nth-child(13) {
  color: #0080ff00;
  top: 33%;
  left: 50%;
  animation-duration: 77s;
  animation-delay: -25s;
  transform-origin: 11vw 5vh;
  box-shadow: -100vmin 0 13.020707564513646vmin currentColor;
}

.background span:nth-child(14) {
  color: #0080ff00;
  top: 99%;
  left: 9%;
  animation-duration: 300s;
  animation-delay: -296s;
  transform-origin: 0vw -5vh;
  box-shadow: 100vmin 0 12.734418527192103vmin currentColor;
}

.background span:nth-child(15) {
  color: #0080ff00;
  top: 57%;
  left: 51%;
  animation-duration: 204s;
  animation-delay: -327s;
  transform-origin: -18vw -10vh;
  box-shadow: -100vmin 0 13.225017288526551vmin currentColor;
}

.background span:nth-child(16) {
  color: #0080ff00;
  top: 52%;
  left: 36%;
  animation-duration: 293s;
  animation-delay: -177s;
  transform-origin: 16vw 22vh;
  box-shadow: 100vmin 0 13.476933821471743vmin currentColor;
}

.background span:nth-child(17) {
  color: #0080ff00;
  top: 95%;
  left: 83%;
  animation-duration: 212s;
  animation-delay: -135s;
  transform-origin: -14vw -20vh;
  box-shadow: -100vmin 0 12.548474447665845vmin currentColor;
}

.background span:nth-child(18) {
  color: #0080ff00;
  top: 46%;
  left: 56%;
  animation-duration: 199s;
  animation-delay: -151s;
  transform-origin: 16vw -16vh;
  box-shadow: 100vmin 0 13.040045550342432vmin currentColor;
}

.background span:nth-child(19) {
  color: #0080ff00;
  top: 93%;
  left: 17%;
  animation-duration: 246s;
  animation-delay: -174s;
  transform-origin: 11vw 15vh;
  box-shadow: -100vmin 0 12.962220792378014vmin currentColor;
}

.background span:nth-child(20) {
  color: #0080ff00;
  top: 36%;
  left: 38%;
  animation-duration: 12s;
  animation-delay: -15s;
  transform-origin: 6vw 8vh;
  box-shadow: -100vmin 0 12.607418916342294vmin currentColor;
}

.background span:nth-child(21) {
  color: #0080ff00;
  top: 77%;
  left: 92%;
  animation-duration: 13s;
  animation-delay: -21s;
  transform-origin: 0vw -9vh;
  box-shadow: -100vmin 0 12.825875934693867vmin currentColor;
}

.background span:nth-child(22) {
  color: #0080ff00;
  top: 4%;
  left: 72%;
  animation-duration: 50s;
  animation-delay: -20s;
  transform-origin: -15vw 22vh;
  box-shadow: 100vmin 0 13.06809834405231vmin currentColor;
}

.background span:nth-child(23) {
  color: #0080ff00;
  top: 23%;
  left: 76%;
  animation-duration: 30s;
  animation-delay: -26s;
  transform-origin: 5vw -11vh;
  box-shadow: 100vmin 0 12.815416278693526vmin currentColor;
}

.background span:nth-child(24) {
  color: #0080ff00;
  top: 56%;
  left: 83%;
  animation-duration: 29s;
  animation-delay: -79s;
  transform-origin: 12vw -22vh;
  box-shadow: 100vmin 0 13.107902426574086vmin currentColor;
}

.background span:nth-child(25) {
  color: #0080ff00;
  top: 31%;
  left: 75%;
  animation-duration: 55s;
  animation-delay: -75s;
  transform-origin: -4vw -11vh;
  box-shadow: 100vmin 0 12.868223963024631vmin currentColor;
}

.background span:nth-child(26) {
  color: #0080ff00;
  top: 23%;
  left: 99%;
  animation-duration: 31s;
  animation-delay: -27s;
  transform-origin: -5vw -10vh;
  box-shadow: 100vmin 0 12.832744297991466vmin currentColor;
}

.background span:nth-child(27) {
  color: #0080ff00;
  top: 96%;
  left: 6%;
  animation-duration: 46s;
  animation-delay: -19s;
  transform-origin: 11vw -13vh;
  box-shadow: 100vmin 0 13.118969807035551vmin currentColor;
}

.background span:nth-child(28) {
  color: #0080ff00;
  top: 76%;
  left: 93%;
  animation-duration: 64s;
  animation-delay: -18s;
  transform-origin: 18vw -9vh;
  box-shadow: 100vmin 0 12.885811914961094vmin currentColor;
}

.background span:nth-child(29) {
  color: #0080ff00;
  top: 25%;
  left: 59%;
  animation-duration: 33s;
  animation-delay: -11s;
  transform-origin: 14vw -22vh;
  box-shadow: 100vmin 0 12.548320624402045vmin currentColor;
}

.background span:nth-child(30) {
  color: #0080ff00;
  top: 6%;
  left: 93%;
  animation-duration: 257s;
  animation-delay: -44s;
  transform-origin: 19vw -12vh;
  box-shadow: -100vmin 0 12.709268648794067vmin currentColor;
}

.background span:nth-child(31) {
  color: #0080ff00;
  top: 8%;
  left: 100%;
  animation-duration: 222s;
  animation-delay: -205s;
  transform-origin: -2vw -17vh;
  box-shadow: -100vmin 0 12.762991438726043vmin currentColor;
}

.background span:nth-child(32) {
  color: #0080ff00;
  top: 71%;
  left: 49%;
  animation-duration: 227s;
  animation-delay: -256s;
  transform-origin: 4vw 10vh;
  box-shadow: -100vmin 0 13.006270904045174vmin currentColor;
}

.background span:nth-child(33) {
  color: #0080ff00;
  top: 50%;
  left: 44%;
  animation-duration: 184s;
  animation-delay: -254s;
  transform-origin: -18vw 24vh;
  box-shadow: 100vmin 0 12.500553707701986vmin currentColor;
}

.background span:nth-child(34) {
  color: #0080ff00;
  top: 63%;
  left: 91%;
  animation-duration: 126s;
  animation-delay: -88s;
  transform-origin: 8vw 9vh;
  box-shadow: 100vmin 0 13.042164147928622vmin currentColor;
}

.background span:nth-child(35) {
  color: #0080ff00;
  top: 15%;
  left: 19%;
  animation-duration: 150s;
  animation-delay: -19s;
  transform-origin: 0vw 15vh;
  box-shadow: 100vmin 0 13.446854025792435vmin currentColor;
}

.background span:nth-child(36) {
  color: #0080ff00;
  top: 9%;
  left: 36%;
  animation-duration: 195s;
  animation-delay: -155s;
  transform-origin: -2vw -8vh;
  box-shadow: -100vmin 0 12.758290100226283vmin currentColor;
}

.background span:nth-child(37) {
  color: #0080ff00;
  top: 20%;
  left: 84%;
  animation-duration: 261s;
  animation-delay: -316s;
  transform-origin: -6vw 12vh;
  box-shadow: -100vmin 0 12.816358292897375vmin currentColor;
}

.background span:nth-child(38) {
  color: #0080ff00;
  top: 62%;
  left: 45%;
  animation-duration: 241s;
  animation-delay: -169s;
  transform-origin: -4vw -17vh;
  box-shadow: -100vmin 0 13.002878762037993vmin currentColor;
}

.background span:nth-child(39) {
  color: #0080ff00;
  top: 45%;
  left: 36%;
  animation-duration: 306s;
  animation-delay: -86s;
  transform-origin: 5vw -23vh;
  box-shadow: 100vmin 0 13.200374667173659vmin currentColor;
}

.background span:nth-child(40) {
  color: #0080ff00;
  top: 40%;
  left: 96%;
  animation-duration: 51s;
  animation-delay: -13s;
  transform-origin: 7vw -1vh;
  box-shadow: 100vmin 0 13.132400450228916vmin currentColor;
}

.background span:nth-child(41) {
  color: #0080ff00;
  top: 69%;
  left: 77%;
  animation-duration: 57s;
  animation-delay: -242s;
  transform-origin: 7vw 9vh;
  box-shadow: 100vmin 0 13.211323467561277vmin currentColor;
}

.background span:nth-child(42) {
  color: #0080ff00;
  top: 73%;
  left: 70%;
  animation-duration: 234s;
  animation-delay: -169s;
  transform-origin: 19vw 19vh;
  box-shadow: -100vmin 0 13.153032976330728vmin currentColor;
}

.background span:nth-child(43) {
  color: #0080ff00;
  top: 97%;
  left: 52%;
  animation-duration: 125s;
  animation-delay: -134s;
  transform-origin: 4vw 2vh;
  box-shadow: 100vmin 0 12.818262252667495vmin currentColor;
}

.background span:nth-child(44) {
  color: #0080ff00;
  top: 89%;
  left: 52%;
  animation-duration: 118s;
  animation-delay: -164s;
  transform-origin: 5vw -14vh;
  box-shadow: 100vmin 0 13.039584775267679vmin currentColor;
}

.background span:nth-child(45) {
  color: #0080ff00;
  top: 55%;
  left: 53%;
  animation-duration: 170s;
  animation-delay: -243s;
  transform-origin: 6vw 4vh;
  box-shadow: -100vmin 0 12.677377719269677vmin currentColor;
}

.background span:nth-child(46) {
  color: #0080ff00;
  top: 55%;
  left: 46%;
  animation-duration: 229s;
  animation-delay: -250s;
  transform-origin: 4vw -17vh;
  box-shadow: -100vmin 0 12.589438526770648vmin currentColor;
}

.background span:nth-child(47) {
  color: #0080ff00;
  top: 16%;
  left: 76%;
  animation-duration: 201s;
  animation-delay: -67s;
  transform-origin: -3vw -8vh;
  box-shadow: 100vmin 0 13.098206955893884vmin currentColor;
}

.background span:nth-child(48) {
  color: #0080ff00;
  top: 59%;
  left: 28%;
  animation-duration: 47s;
  animation-delay: -130s;
  transform-origin: 10vw 2vh;
  box-shadow: 100vmin 0 13.103364428984104vmin currentColor;
}

.background span:nth-child(49) {
  color: #0080ff00;
  top: 76%;
  left: 16%;
  animation-duration: 198s;
  animation-delay: -85s;
  transform-origin: -5vw 20vh;
  box-shadow: 100vmin 0 12.786742903146717vmin currentColor;
}

.countdown-label {
  color: #65584c;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
  letter-spacing: 0.5px;
  margin-top: 9px;
  font-size: 10px;
}

#countdown {
  text-align: center;
  border-radius: 5px;
  margin: auto;
}

#countdown #tiles {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0px #ccc;
  display: inline-block;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: thin;
  display: block;
}

#countdown1 #tiles1 {
  color: #fff;
  position: relative;
  z-index: 1;
  text-shadow: 1px 1px 0px #ccc;
  display: inline-block;
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 10px;
  border-radius: 5px;
  font-size: 12px;
  font-weight: thin;
  display: block;
}

.color-full {
  background: #53bb74;
}

.color-half {
  background: #ebc85d;
}

.color-empty {
  background: #e5554e;
}

#countdown #tiles > span {
  width: 70px;
  max-width: 70px;
  padding: 18px 0;
  position: relative;
}

#countdown1 #tiles1 > span {
  width: 70px;
  max-width: 70px;
  padding: 18px 0;
  position: relative;
}

#countdown .labels {
  width: 100%;
  height: 25px;
  text-align: center;
  position: absolute;
  bottom: 8px;
}

#countdown .labels li {
  width: 102px;
  font: bold 15px "Droid Sans", Arial, sans-serif;
  color: #f47321;
  text-shadow: 1px 1px 0px #000;
  text-align: center;
  text-transform: uppercase;
  display: inline-block;
}

.bounceIn {
  -webkit-animation-name: bounceIn;
  animation-name: bounceIn;
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes bounceIn {
  0%,
  20%,
  40%,
  60%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }

  0% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  20% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
    transform: scale3d(1.1, 1.1, 1.1);
  }

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

  60% {
    opacity: 1;
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
    transform: scale3d(1.03, 1.03, 1.03);
  }

  80% {
    -webkit-transform: scale3d(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

  100% {
    opacity: 1;
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.bounce:hover {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%,
  20%,
  53%,
  80%,
  100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  40%,
  43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }

  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }

  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.tada:hover {
  -webkit-animation-name: tada;
  animation-name: tada;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes tada {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
  }

  30%,
  50%,
  70%,
  90% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
  }

  40%,
  60%,
  80% {
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
  }

  100% {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

.container {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  /* grid-auto-rows: calc(5vw - 10px); */
  gap: 10px;
  padding: 10px;
}

.element {
  width: 100%;
  height: 100%;
  min-height: 150px;

  cursor: pointer;
}

.element--placeholder {
  opacity: 0.4;
  border: 1px solid white;
}

.element--horizontal {
  grid-column-end: span 3;
  grid-row-end: span 2;
}

.element--vertical {
  grid-column-end: span 2;
  grid-row-end: span 3;
}

.image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false;
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false;
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false;
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false;
}

@property --tw-blur {
  syntax: "*";
  inherits: false;
}

@property --tw-brightness {
  syntax: "*";
  inherits: false;
}

@property --tw-contrast {
  syntax: "*";
  inherits: false;
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false;
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false;
}

@property --tw-invert {
  syntax: "*";
  inherits: false;
}

@property --tw-opacity {
  syntax: "*";
  inherits: false;
}

@property --tw-saturate {
  syntax: "*";
  inherits: false;
}

@property --tw-sepia {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false;
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false;
}

@layer properties {
  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or
    ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *,
    ::before,
    ::after,
    ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-font-weight: initial;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
    }
  }
}