:root {
  --color-primary-50: 254 242 242 !important;
  --color-primary-100: 254 226 226 !important;
  --color-primary-200: 252 202 202 !important;
  --color-primary-300: 248 151 151 !important;
  --color-primary-400: 232 84 84 !important;
  --color-primary-500: 210 43 43 !important;
  --color-primary-600: 178 34 34 !important;
  --color-primary-700: 145 28 28 !important;
  --color-primary-800: 111 24 24 !important;
  --color-primary-900: 72 18 18 !important;
  --color-accent-300: 248 151 151 !important;
  --color-accent-500: 210 43 43 !important;
  --color-accent-blue: 178 34 34 !important;
  --color-gradient-start: 210 43 43 !important;
  --color-gradient-end: 178 34 34 !important;
}

::selection {
  background-color: rgb(210 43 43 / 0.22) !important;
  color: inherit !important;
}

::-moz-selection {
  background-color: rgb(210 43 43 / 0.22) !important;
  color: inherit !important;
}

:focus-visible,
[data-reach-menu-button]:focus,
[data-reach-tab]:focus-visible {
  --tw-ring-color: rgb(210 43 43 / 0.70) !important;
}

a,
.text-primary-500,
.text-primary-600,
[data-markup] a,
[data-markup] .status-link,
.\[\&_a\]\:text-primary-600 a,
.\[\&_\.mention\]\:text-primary-600 .mention {
  color: rgb(178 34 34 / var(--tw-text-opacity, 1)) !important;
}

a:hover,
.hover\:text-primary-500:hover,
.hover\:text-primary-600:hover,
.hover\:text-primary-700:hover,
[data-markup] .status-link:hover {
  color: rgb(145 28 28 / var(--tw-text-opacity, 1)) !important;
}

.bg-primary-50 {
  background-color: rgb(254 242 242 / var(--tw-bg-opacity, 1)) !important;
}

.bg-primary-100,
.hover\:bg-primary-100:hover {
  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)) !important;
}

.bg-primary-500,
.checked\:bg-primary-500:checked,
.hover\:bg-primary-500:hover {
  background-color: rgb(210 43 43 / var(--tw-bg-opacity, 1)) !important;
}

.bg-primary-600,
.hover\:bg-primary-600:hover {
  background-color: rgb(178 34 34 / var(--tw-bg-opacity, 1)) !important;
}

.border-primary-300 {
  border-color: rgb(248 151 151 / var(--tw-border-opacity, 1)) !important;
}

.border-primary-400,
.border-primary-500,
.focus\:border-primary-500:focus,
.focus-within\:border-primary-500:focus-within {
  border-color: rgb(210 43 43 / var(--tw-border-opacity, 1)) !important;
}

.border-primary-600 {
  border-color: rgb(178 34 34 / var(--tw-border-opacity, 1)) !important;
}

.ring-primary-300 {
  --tw-ring-color: rgb(248 151 151 / var(--tw-ring-opacity, 1)) !important;
}

.ring-primary-500,
.focus\:ring-primary-500:focus,
.focus-within\:ring-primary-500:focus-within {
  --tw-ring-color: rgb(210 43 43 / var(--tw-ring-opacity, 1)) !important;
}

.ring-primary-700 {
  --tw-ring-color: rgb(145 28 28 / var(--tw-ring-opacity, 1)) !important;
}

.from-accent-500.via-primary-500.to-gradient-end {
  --tw-gradient-from: rgb(178 34 34 / 1) var(--tw-gradient-from-position) !important;
  --tw-gradient-to: rgb(178 34 34 / 1) var(--tw-gradient-to-position) !important;
  --tw-gradient-stops: rgb(178 34 34 / 1), rgb(178 34 34 / 1), rgb(178 34 34 / 1) !important;
  filter: none !important;
}

button[data-testid="button"].bg-primary-500,
button[data-testid="button"].bg-secondary-500 {
  background-color: #D22B2B !important;
  background-image: none !important;
  border-color: transparent !important;
  color: #F8FCEE !important;
  box-shadow: none !important;
}

button[data-testid="button"].bg-primary-500:not(:disabled):hover,
button[data-testid="button"].bg-secondary-500:not(:disabled):hover {
  background-color: #B22222 !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
}

button[data-testid="button"].bg-primary-500:active,
button[data-testid="button"].bg-secondary-500:active {
  transform: translateY(0);
}

button[data-testid="button"].bg-primary-100 {
  background-color: rgb(254 242 242 / 1) !important;
  border-color: rgb(252 202 202 / 0.85) !important;
  color: #8F1D1D !important;
  box-shadow: inset 0 0 0 1px rgb(210 43 43 / 0.12) !important;
}

button[data-testid="button"].bg-primary-100:not(:disabled):hover {
  background-color: rgb(254 226 226 / 1) !important;
  border-color: rgb(210 43 43 / 0.42) !important;
  color: #6F1818 !important;
}

[data-testid="sign-up-panel"] button[data-testid="button"],
[data-testid="cta-banner"] button[data-testid="button"] {
  box-shadow: none !important;
}

[data-testid="cta-banner"] > * {
  background: #B22222 !important;
  border: 1px solid rgb(178 34 34 / 0.35) !important;
  box-shadow: none !important;
}

.my-12.mb-16.px-4.sm\:mb-20 {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  margin-top: 2rem !important;
  padding: 0 1rem !important;
}

.my-12.mb-16.px-4.sm\:mb-20 h1 {
  background-image: none !important;
  color: #B22222 !important;
  filter: none !important;
}

.my-12.mb-16.px-4.sm\:mb-20 [data-markup],
.my-12.mb-16.px-4.sm\:mb-20 p {
  color: #6F1818 !important;
}

.my-12.mb-16.px-4.sm\:mb-20 ~ * {
  display: none !important;
}

img[src="https://nso.fail/favicon.png"][title="nso.fail"] {
  display: none !important;
}

img[src*="/packs/assets/soapbox-logo-"] {
  height: 58px !important;
  width: 58px !important;
  max-height: 58px !important;
  object-fit: contain !important;
}

[data-testid="sign-up-panel"] {
  background: #FEF2F2 !important;
  border: 1px solid rgb(210 43 43 / 0.12) !important;
  border-radius: 14px;
  padding: 1rem;
}

[data-testid="sign-up-panel"] button[data-testid="button"].bg-transparent,
[data-testid="sign-up-panel"] button[data-testid="button"].border-gray-400 {
  background: #FFFFFF !important;
  border-color: rgb(210 43 43 / 0.20) !important;
  color: #8F1D1D !important;
}

[data-testid="sign-up-panel"] button[data-testid="button"].bg-transparent:hover,
[data-testid="sign-up-panel"] button[data-testid="button"].border-gray-400:hover {
  background: #FEE2E2 !important;
  border-color: rgb(210 43 43 / 0.35) !important;
  color: #6F1818 !important;
}