:root {
  /* Stops the @reach/dialog styles warning in dev */
  --reach-dialog: 1;
  /* This varaible is used to change the body background color via the useBodyColor hook */
  --body-bg-color: transparent;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  margin: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  font-family: var(--st--fonts-body);
  opacity: 1;
  background-color: var(--body-bg-color);
  -webkit-font-smoothing: antialiased;
  color: var(--st--colors-black100);
  transition: background-color var(--st--transitions-2) var(--st--transitions-ease);
  overflow-x: hidden;
}

#__remix {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

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

.draggable {
  cursor: move;
  z-index: 9999;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

blockquote, body, dd, dl, dt, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, html, iframe, legend, li, ol, p, pre, textarea, ul {
  margin: 0;
  padding: 0;
}

.slider-control-bottomcenter {
  transform: translateX(0) !important;
}

@media only screen and (max-width: 52em) {
  .has-auth-header {
    padding-bottom: 96px;
  }
}

.safari .center-box {
  display: block;
}

.slider-frame {
  border-radius: 10px;
  overflow: hidden;
}

[data-reach-dialog-content] {
  outline: none;
}

[data-tippy-root] {
  z-index: 900 !important;
}

.body-fixed {
  overflow: hidden;
  position: fixed;
  left: 0;
  right: 0;
}

#portal {
  position: relative;
  z-index: 1000;
}

.blue-background {
  background: #0101ff;
}

.webkit-fit-content {
  height: -webkit-fit-content;
}

.black-background {
  background-color: #000;
}

ul {
  list-style: none;
}