:root {
  color-scheme: dark;
  --re-bg: #0b0c0d;
  --re-panel: #111211;
  --re-panel-2: #171a16;
  --re-ink: #efeee7;
  --re-muted: #a2a59d;
  --re-dim: #6f746b;
  --re-line: #343831;
  --re-red: #ff2a2a;
  --re-green: #4af626;
  --re-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --re-body: "Avenir Next", "Apple SD Gothic Neo", "Helvetica Neue", sans-serif;
}

html,
body[data-basepath="/auth"] {
  min-height: 100%;
  background: var(--re-bg);
}

body[data-basepath="/auth"] {
  margin: 0;
  background-color: var(--re-bg);
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(255, 42, 42, .12) 0 1px, transparent 1px);
  background-size: auto, 88px 88px;
  color: var(--re-ink);
  font-family: var(--re-body);
}

body[data-basepath="/auth"]::before {
  content: "REAPPLE AUTH";
  position: fixed;
  left: clamp(18px, 5vw, 72px);
  bottom: clamp(18px, 6vw, 74px);
  z-index: 0;
  color: rgba(239, 238, 231, .045);
  font-family: "DIN Condensed", "Avenir Next Condensed", "Apple SD Gothic Neo", sans-serif;
  font-size: clamp(58px, 12vw, 180px);
  font-weight: 950;
  line-height: .82;
  letter-spacing: 0;
  pointer-events: none;
  white-space: nowrap;
}

body[data-basepath="/auth"] #root {
  position: relative;
  z-index: 1;
  min-height: 100vh;
}

body[data-basepath="/auth"] #root::before {
  content: "R";
  position: fixed;
  top: 18px;
  left: 18px;
  z-index: 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--re-ink);
  background: var(--re-ink);
  color: var(--re-bg);
  font-family: "DIN Condensed", "Avenir Next Condensed", sans-serif;
  font-size: 30px;
  font-weight: 950;
  line-height: 1;
}

body[data-basepath="/auth"] #root::after {
  content: "AUTHELIA PROTECTED SESSION";
  position: fixed;
  top: 30px;
  left: 76px;
  z-index: 2;
  color: var(--re-muted);
  font-family: var(--re-mono);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0;
}

body[data-basepath="/auth"] a,
body[data-basepath="/auth"] button,
body[data-basepath="/auth"] input {
  letter-spacing: 0;
}

body[data-basepath="/auth"] [class*="MuiPaper-root"],
body[data-basepath="/auth"] [class*="MuiCard-root"],
body[data-basepath="/auth"] [class*="MuiContainer-root"] [class*="MuiBox-root"] {
  border-color: var(--re-line);
  border-radius: 0;
  background-color: rgba(17, 18, 17, .96);
  box-shadow: none;
}

body[data-basepath="/auth"] [class*="MuiTypography-h"],
body[data-basepath="/auth"] h1,
body[data-basepath="/auth"] h2 {
  color: var(--re-ink);
  font-family: "DIN Condensed", "Avenir Next Condensed", "Apple SD Gothic Neo", sans-serif;
  font-weight: 950;
  line-height: .98;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-basepath="/auth"] [class*="MuiTypography-body"],
body[data-basepath="/auth"] p,
body[data-basepath="/auth"] label {
  color: var(--re-muted);
  letter-spacing: 0;
}

body[data-basepath="/auth"] [class*="MuiOutlinedInput-root"],
body[data-basepath="/auth"] [class*="MuiInputBase-root"] {
  border-radius: 0;
  background: #0f110f;
  color: var(--re-ink);
}

body[data-basepath="/auth"] input {
  color: var(--re-ink);
  caret-color: var(--re-green);
}

body[data-basepath="/auth"] [class*="MuiOutlinedInput-notchedOutline"],
body[data-basepath="/auth"] fieldset {
  border-color: var(--re-line);
  border-radius: 0;
}

body[data-basepath="/auth"] [class*="MuiOutlinedInput-root"]:hover [class*="MuiOutlinedInput-notchedOutline"],
body[data-basepath="/auth"] [class*="Mui-focused"] [class*="MuiOutlinedInput-notchedOutline"],
body[data-basepath="/auth"] [class*="Mui-focused"] fieldset {
  border-color: var(--re-green);
}

body[data-basepath="/auth"] [class*="MuiButton-root"] {
  border-radius: 0;
  box-shadow: none;
  font-family: var(--re-mono);
  font-weight: 900;
  letter-spacing: 0;
  text-transform: uppercase;
}

body[data-basepath="/auth"] [class*="MuiButton-contained"],
body[data-basepath="/auth"] button[type="submit"] {
  background: var(--re-ink);
  color: var(--re-bg);
}

body[data-basepath="/auth"] [class*="MuiButton-contained"]:hover,
body[data-basepath="/auth"] button[type="submit"]:hover {
  background: var(--re-green);
  color: var(--re-bg);
}

body[data-basepath="/auth"] [class*="MuiButton-text"],
body[data-basepath="/auth"] [class*="MuiLink-root"] {
  color: var(--re-ink);
}

body[data-basepath="/auth"] [class*="MuiAlert-root"] {
  border-radius: 0;
  border: 1px solid var(--re-red);
  background: rgba(255, 42, 42, .08);
  color: var(--re-ink);
}

body[data-basepath="/auth"] [class*="MuiDivider-root"] {
  border-color: var(--re-line);
}

body[data-basepath="/auth"] [class*="MuiCheckbox-root"],
body[data-basepath="/auth"] [class*="MuiSvgIcon-root"] {
  color: var(--re-muted);
}

body[data-basepath="/auth"] [class*="Mui-checked"],
body[data-basepath="/auth"] [class*="MuiSwitch-switchBase"][class*="Mui-checked"] {
  color: var(--re-green);
}

@media (max-width: 640px) {
  body[data-basepath="/auth"]::before {
    white-space: normal;
  }

  body[data-basepath="/auth"] #root::after {
    top: 68px;
    left: 18px;
  }
}