.Button_button__exqP_ {
  margin-top: 16px;
  padding: 12px;
  background-color: #4a90e2;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.Button_button__exqP_:hover {
  background-color: #3a80d2;
}

.Button_button__exqP_:disabled {
  background-color: #e9e9e9;
  color: #9ca3af;
  cursor: not-allowed;
  opacity: 0.8;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.ErrorBoundary_email__uW_5G:hover {
  text-decoration: underline;
  font-weight: 600;
}
.Header_header__AF_3G {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100000;

  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  height: 56px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

  background-color: #222426;
}

.Header_headerTitleLogo__P5VGC {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;

  font-family: 'Alfa Slab One', normal;
  font-weight: 400;

  margin: 0;
  font-size: 24px;
}

.Header_settingsIconLink__THCsq {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 999px;

  height: 40px;
  width: 40px;

  transition: background-color 0.2s ease;
  background-color: rgba(255, 255, 255, 0.05);
}
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/roboto-mono-v30-latin-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* alfa-slab-one-regular - latin */
@font-face {
  /* font-display: swap; */
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Alfa Slab One';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/alfa-slab-one-v20-latin-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* inter-regular - latin */
@font-face {
  font-display: swap;
  /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  src: url('/fonts/inter-v19-latin-regular.woff2') format('woff2');
  /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* Over scrolling on iPhone was messing up the 100svh dimensions. */
/* And I think it was also triggering window resizes? Not sure. */
/* Anyway, the video / game height was not correct if users over scrolled. */
html,
body {
  overscroll-behavior: none;
}

body {
  margin: 0;
  /* font-family: 'Roboto', system-ui, sans-serif; */
  font-family: 'Inter', sans-serif;
  /* Set a default font */

  background-color: #222426;
  color: white;
}

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

canvas {
  outline: none;
}


@keyframes flashingGray {
  0% {
    filter: grayscale(0%);
    opacity: 1;
  }

  50% {
    filter: grayscale(100%);
    opacity: 0.6;
  }

  100% {
    filter: grayscale(0%);
    opacity: 1;
  }
}

.gloves-not-visible {
  filter: grayscale(0%);
  animation: flashingGray 0.3s 3 forwards;
}

.gloves-visible {
  filter: grayscale(100%);
  opacity: 0.6;
}

.show {
  opacity: 1 !important;
}


@keyframes flashingYellow {
  0% {
    color: #ffbf00;
  }

  50% {
    color: black;
  }

  100% {
    color: #ffbf00;
  }
}

.flashingYellow {
  animation: flashingYellow 0.3s 3 forwards;
}

.warningSymbol {
  font-size: x-large;
  color: #ffbf00;
  display: inline;
  padding-right: 12px;
}

.main-canvas-and-video {
  position: absolute;
  /* 
  XXX: NOTE: Keep width or height set to "auto".
  This way, we're be able to fetch the real aspect ratio of the camera / video stream.
  I think videoElement.videoWidth and .videoHeight always return the real camera resolution.
  But, just to be safe, keep one of these "auto". 
  */
  width: 100%;
  height: auto;
}

.main-canvas-native {
  /* Unlike the web canvas - we don't have a video element. */
  /* So, in the native case, we can simply strech the canvas across the whole mobile screen. */
  height: "100vh";
  width: "100vw";
}

.main-canvas-default-position {
  width: 100%;
  height: auto;
}

/* Fixes the "Sticky Hover" problem on mobile. */
/* Apply these styles only if the user's primary input mechanism can hover over elements. */
@media (hover: hover) {

  .settingsSpin:hover svg,
  .settingsSpin:hover img {
    animation: spin 2s linear infinite;
  }
}

/* Spin the settings icon: */
@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}