@import url("https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;500;600;700&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
  user-select: none;
  touch-action: pan-x pan-y;
  -webkit-touch-callout: none;
}

:focus {
  outline: 1px solid var(--color-primary);
}

:root {
  font-family: var(--font-base);
  font-size: var(--font-size-base);
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

body {
  min-width: 100%;
  background-color: var(--color-body-bg);
  color: var(--color-body-fg);
}

section,
header,
main,
footer {
  display: block;
}

button,
a[href] {
  cursor: pointer;
}

menu,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

ul,
ul li {
  margin: 0;
  padding: 0;
  list-style: none;
}

pre {
  white-space: pre-wrap;
  margin: 0;
}

img {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

canvas {
  display: block;
}

:root {
  --color-primary: #FFC74A;
  --color-primary-rgb: 255, 199, 74;
  --color-primary-bg: #FFC74A;
  --color-primary-bg-rgb: 255, 199, 74;
  --color-primary-fg: #080707;
  --color-primary-fg-rgb: 8, 7, 7;
  --color-primary-inverted-bg: #0038b5;
  --color-primary-inverted-bg-rgb: 0, 56, 181;
  --color-primary-inverted-fg: #f7f8f8;
  --color-primary-inverted-fg-rgb: 247, 248, 248;
  --color-primary-light: #ffe7b0;
  --color-primary-light-rgb: 255, 231, 176;
  --color-primary-light-bg: #ffe7b0;
  --color-primary-light-bg-rgb: 255, 231, 176;
  --color-primary-light-fg: #080707;
  --color-primary-light-fg-rgb: 8, 7, 7;
  --color-primary-light-inverted-bg: #00184f;
  --color-primary-light-inverted-bg-rgb: 0, 24, 79;
  --color-primary-light-inverted-fg: #f7f8f8;
  --color-primary-light-inverted-fg-rgb: 247, 248, 248;
  --color-danger: #DB2520;
  --color-danger-rgb: 219, 37, 32;
  --color-danger-bg: #DB2520;
  --color-danger-bg-rgb: 219, 37, 32;
  --color-danger-fg: #E6E6E6;
  --color-danger-fg-rgb: 230, 230, 230;
  --color-danger-inverted-bg: #24dadf;
  --color-danger-inverted-bg-rgb: 36, 218, 223;
  --color-danger-inverted-fg: #191919;
  --color-danger-inverted-fg-rgb: 25, 25, 25;
  --color-warning: #FF7A18;
  --color-warning-rgb: 255, 122, 24;
  --color-warning-bg: #FF7A18;
  --color-warning-bg-rgb: 255, 122, 24;
  --color-warning-fg: #080707;
  --color-warning-fg-rgb: 8, 7, 7;
  --color-warning-inverted-bg: #0085e7;
  --color-warning-inverted-bg-rgb: 0, 133, 231;
  --color-warning-inverted-fg: #f7f8f8;
  --color-warning-inverted-fg-rgb: 247, 248, 248;
  --color-success: #b7ff4a;
  --color-success-rgb: 183, 255, 74;
  --color-success-bg: #b7ff4a;
  --color-success-bg-rgb: 183, 255, 74;
  --color-success-fg: #080707;
  --color-success-fg-rgb: 8, 7, 7;
  --color-success-inverted-bg: #4800b5;
  --color-success-inverted-bg-rgb: 72, 0, 181;
  --color-success-inverted-fg: #f7f8f8;
  --color-success-inverted-fg-rgb: 247, 248, 248;
  --color-info: #1C2851;
  --color-info-rgb: 28, 40, 81;
  --color-info-bg: #1C2851;
  --color-info-bg-rgb: 28, 40, 81;
  --color-info-fg: #E6E6E6;
  --color-info-fg-rgb: 230, 230, 230;
  --color-info-inverted-bg: #e3d7ae;
  --color-info-inverted-bg-rgb: 227, 215, 174;
  --color-info-inverted-fg: #191919;
  --color-info-inverted-fg-rgb: 25, 25, 25;
  --color-dark: #080707;
  --color-dark-rgb: 8, 7, 7;
  --color-dark-bg: #080707;
  --color-dark-bg-rgb: 8, 7, 7;
  --color-dark-fg: #E6E6E6;
  --color-dark-fg-rgb: 230, 230, 230;
  --color-dark-inverted-bg: #f7f8f8;
  --color-dark-inverted-bg-rgb: 247, 248, 248;
  --color-dark-inverted-fg: #191919;
  --color-dark-inverted-fg-rgb: 25, 25, 25;
  --color-medium: #49636B;
  --color-medium-rgb: 73, 99, 107;
  --color-medium-bg: #49636B;
  --color-medium-bg-rgb: 73, 99, 107;
  --color-medium-fg: #E6E6E6;
  --color-medium-fg-rgb: 230, 230, 230;
  --color-medium-inverted-bg: #b69c94;
  --color-medium-inverted-bg-rgb: 182, 156, 148;
  --color-medium-inverted-fg: #191919;
  --color-medium-inverted-fg-rgb: 25, 25, 25;
  --color-light: #E6E6E6;
  --color-light-rgb: 230, 230, 230;
  --color-light-bg: #E6E6E6;
  --color-light-bg-rgb: 230, 230, 230;
  --color-light-fg: #080707;
  --color-light-fg-rgb: 8, 7, 7;
  --color-light-inverted-bg: #191919;
  --color-light-inverted-bg-rgb: 25, 25, 25;
  --color-light-inverted-fg: #f7f8f8;
  --color-light-inverted-fg-rgb: 247, 248, 248;
  --color-body: #080707;
  --color-body-rgb: 8, 7, 7;
  --color-body-bg: #080707;
  --color-body-bg-rgb: 8, 7, 7;
  --color-body-fg: #E6E6E6;
  --color-body-fg-rgb: 230, 230, 230;
  --color-body-inverted-bg: #f7f8f8;
  --color-body-inverted-bg-rgb: 247, 248, 248;
  --color-body-inverted-fg: #191919;
  --color-body-inverted-fg-rgb: 25, 25, 25;
  --color-element: #2D393A;
  --color-element-rgb: 45, 57, 58;
  --color-element-bg: #2D393A;
  --color-element-bg-rgb: 45, 57, 58;
  --color-element-fg: #E6E6E6;
  --color-element-fg-rgb: 230, 230, 230;
  --color-element-inverted-bg: #d2c6c5;
  --color-element-inverted-bg-rgb: 210, 198, 197;
  --color-element-inverted-fg: #191919;
  --color-element-inverted-fg-rgb: 25, 25, 25;
  --color-scale: 255, 255, 255;
  --color-scale-inverted: 0, 0, 0;
  --font-base: "Cairo", sans-serif;
  --font-headers: "Cairo", sans-serif;
  --font-legible: "Cairo", sans-serif;
  --font-size-base: 16px;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: var(--color-body-bg);
  color: var(--color-body-fg);
}

body > main {
  -webkit-overflow-scrolling: touch;
  overflow: overlay;
  overflow-y: overlay;
  overflow-x: hidden;
}
body > main::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0);
}
body > main::-webkit-scrollbar-thumb {
  background: rgba(var(--color-scale), 0.3);
  -webkit-border-radius: 3px;
}
body > main::-webkit-scrollbar-track, body > main::-webkit-scrollbar-track-piece {
  background: rgba(0, 0, 0, 0);
}
body > main::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

body.error {
  padding: 2rem;
  background-color: var(--color-danger-bg);
  color: var(--color-danger-fg);
}

.scrolling-element {
  -webkit-overflow-scrolling: touch;
  overflow: overlay;
  overflow-y: overlay;
  overflow-x: hidden;
}
.scrolling-element::-webkit-scrollbar {
  width: 8px;
  height: 8px;
  background: rgba(0, 0, 0, 0);
}
.scrolling-element::-webkit-scrollbar-thumb {
  background: rgba(var(--color-scale), 0.3);
  -webkit-border-radius: 3px;
}
.scrolling-element::-webkit-scrollbar-track, .scrolling-element::-webkit-scrollbar-track-piece {
  background: rgba(0, 0, 0, 0);
}
.scrolling-element::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0);
}

/*# sourceMappingURL=app.css.map */