:root {
  --brandColor: #6A3CE2;
  --backgroundColor: #FFFFFF;
  --backgroundAccentLight: #FFFFFF;
  --backgroundAccentDark: #F5F7F8;
  --backgroundActive: #F4F4FE;
  --backgroundHover: #F5F7F8;
  --lightFontColor: #555D67;
  --darkFontColor: #121417;
  --checkboxColor: #6A3CE2;
  --contrastLightFontColor: #FFFFFF;
  --contrastDarkFontColor: #121417;
  --buttonColor: #121417;
  --buttonTextColor: #FFFFFF;
  --borderColor: #DFE5E9;
  --borderColorLight: #E9EDF0;
  --borderColorActive: #6A3CE2;
  --linkColor: #6461FC;
  --menuBackground: #FFFFFF;
  --gridLine: #E8E8E8;
  --thinColor: #A2AAB4;
  --inputBorder: #C9C9CB;
  --inputBorderHover: #E5DFFA;
  --transparent: #FFFFFF00;
  --imagePlaceholder: #E9EDF0;

  --black9: #121417;
  --black8: #1B1F23;
  --black7: #262A30;
  --black6: #454C56;
  --black5: #555D67;
  --black4: #777F89;
  --black3: #A2AAB4;
  --black2: #DFE5E9;
  --black1: #E8EDF0;
  --black0: #F5F7F8;
  --white: #FFFFFF;
  --black: #000000;

  --purple9: #43248E;
  --purple8: #5129AE;
  --purple7: #6132cf;
  --purple6: #6a3ce2;
  --purple5: #8164ee;
  --purple4: #a191f4;
  --purple3: #c0b9f9;
  --purple2: #dbd8fc;
  --purple1: #eceafd;
  --purple0: #f4f4fe;

  --red9: #381E1D;
  --red8: #60211F;
  --red7: #A53E3E;
  --red6: #D24242;
  --red5: #E85757;
  --red4: #f87171;
  --red3: #fca5a5;
  --red2: #fecaca;
  --red1: #fee2e2;
  --red0: #fef2f2;

  --orange9: #35241E;
  --orange8: #753621;
  --orange7: #BC542A;
  --orange6: #E16727;
  --orange5: #F17C2A;
  --orange4: #F69546;
  --orange3: #FCB871;
  --orange2: #fed7aa;
  --orange1: #F9ECDB;
  --orange0: #fff7ed;

  --green9: #143120;
  --green8: #166534;
  --green7: #15803d;
  --green6: #239F51;
  --green5: #35C068;
  --green4: #66DB91;
  --green3: #8CEDAF;
  --green2: #bbf7d0;
  --green1: #E3F5E9;
  --green0: #f0fdf4;

  --blue9: #1E3A8A;
  --blue8: #1E40AF;
  --blue7: #1D4ED8;
  --blue6: #2563EB;
  --blue5: #3B82F6;
  --blue4: #60A5FA;
  --blue3: #93C5FD;
  --blue2: #BFDBFE;
  --blue1: #DBEAFE;
  --blue0: #EFF6FF;

  --cyan9: #164E63;
  --cyan8: #155E75;
  --cyan7: #0E7490;
  --cyan6: #0891B2;
  --cyan5: #06B6D4;
  --cyan4: #22D3EE;
  --cyan3: #67E8F9;
  --cyan2: #A5F3FC;
  --cyan1: #D4F6F9;
  --cyan0: #EEF7F8;

  --pink9: #701338;
  --pink8: #9D174D;
  --pink7: #BE185D;
  --pink6: #DB2777;
  --pink5: #EC4899;
  --pink4: #F472B6;
  --pink3: #F9A8D4;
  --pink2: #FBCFE8;
  --pink1: #FCE7F3;
  --pink0: #FDF2F8;

  --contentWidth: 1080px;
}

* {
  box-sizing: border-box;
}
html {
  width: 100vw;
  margin-left: 0;
  background-color: #fff;
  overflow-x: hidden;
}
body {
  transition: background 0.9s;
  background-color: #0000;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: "Inter", sans-serif !important;
}
a {
  color: #6461fc;
  text-decoration: none;
  background-color: #0000;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  font-weight: 500;
  line-height: 1.2;
}
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  justify-content: center;
  align-items: center;
  position: relative;
}

.shop-error-wrapper {
  margin: 0 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 600px;
}

.shop-error-wrapper svg {
  width: 160px;
  height: 160px;
  margin-bottom: 1.75rem;
}

.shop-error-wrapper .error-title {
  margin-bottom: 1rem;
  color: var(--black9);
  text-align: center;
  font-family: "Inter";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

.shop-error-wrapper .error-description {
  color: var(--black5);
  text-align: center;
  font-family: "Inter";
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px;
}

.shop-error-wrapper .error-stack {
  overflow-x: auto;
  margin-top: 1rem;
  color: var(--black9);
  text-align: center;
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}

.shop-error-wrapper .error-stack pre {
  margin: 0;
  white-space: pre-line;
}

.shop-error-wrapper .button {
  margin-top: 2rem;
  padding: 9px 16px 9px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;

  border-radius: 8px;
  border: 1px solid var(--black2);
  background: var(--white);
  box-shadow: 0 1px 2px 0 rgba(18, 20, 23, 0.06);

  color: var(--black5);
  text-align: center;
  font-family: "Inter";
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.shop-error-wrapper .button svg {
  margin: 0;
  height: 18px;
  width: 18px;
}

@media (hover: hover) {
  .shop-error-wrapper .button:hover {
    background: var(--black0);
  }
}

@media (max-width: 640px) {
  .shop-error-wrapper {
    max-width: 400px;
  }

  .shop-error-wrapper .error-title {
    font-size: 20px;
  }
  .shop-error-wrapper .error-description {
    font-size: 14px;
  }
}

@media (max-width: 400px) {
  .shop-error-wrapper {
    max-width: 300px;
  }
}