:root {
  --color-bg-primary: #fff;
  --color-bg-secondary: #eef6fa;
  --color-bg-sign: #fff;
  --color-text-primary: #333;
  --color-text-secondary: #777;
  --color-img-details: #f62f37;
  --color-img-primary: #7990a1;
  --color-img-secondary: #00baff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg-primary: #222526;
    --color-bg-secondary: #292e2f;
    --color-bg-sign: #262828;
    --color-text-primary: #fff;
    --color-text-secondary: #999;
    --color-img-details: #c72d34;
    --color-img-primary: #adacac;
    --color-img-secondary: #dedede
  }
}

body, html {
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  min-height: 100%;
  height: 100%;
  width: 100%;
  overflow-x: hidden;
  font-size: 16px;
  word-break: keep-all;
}

@media screen and (min-width: 2000px) {
  body, html {
    font-size: 20px;
  }
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

main {
  width: 100%;
  max-width: 1024px;
  padding: 0 40px;
  display: flex;
  justify-content: space-between;
}

article, .pic {
  box-sizing: border-box;
}

article {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  justify-content: space-around;
  width: 45%;
  z-index: 1;
}

article h1 {
  font-size: 2.8em;
  margin: 0 0 30px;
  width: 130%;
}

.subtitle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 16px 0;
}

ul {
  padding: 0;
  list-style: none;
  line-height: 1.4em;
}

ul li::before {
  content: '•';
  padding-right: 7px;
  color: var(--color-img-secondary);
}

.details {
  margin: 0 0 16px 0;
  font-size: 0.9em;
}

.details code {
  padding-left: 0.2em;
  font-size: 0.95em;
  font-family: monospace;
}

a {
  text-decoration: underline;
  color: var(--color-img-secondary);
}

.hidden {
  display: none;
}

.pic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 55%;
  user-select: none;
  z-index: 0;
}

.pic svg {
  width: 100%;
}

.pic svg .st10, .pic svg .st11, .pic svg .st12, .pic svg .st13,
.pic svg .st14, .pic svg .st15, .pic svg .st16, .pic svg .st17,
.pic svg .st3, .pic svg .st6, .pic svg .st9 {
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.pic svg .st0 {
  fill: var(--color-bg-primary);
}

.pic svg .st1 {
  fill: url(#svg-background-gradient);
}

.pic svg .st2 {
  fill: var(--color-bg-secondary);
}

.pic svg .st3 {
  fill: var(--color-bg-primary);
  stroke: var(--color-img-primary);
  stroke-width: 3.5;
}

.pic svg .st4 {
  fill: var(--color-img-secondary);
}

.pic svg .st5 {
  fill: none;
  stroke: var(--color-img-secondary);
  stroke-width: 4;
  stroke-linejoin: round;
  stroke-miterlimit: 10;
}

.pic svg .st6 {
  fill: var(--color-bg-primary);
  stroke: var(--color-img-primary);
  stroke-width: 3;
}

.pic svg .st7 {
  fill: var(--color-img-primary);
}

.pic svg .st8 {
  fill: none;
  stroke: var(--color-img-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.pic svg .st9 {
  fill: none;
  stroke: var(--color-img-primary);
  stroke-width: 3;
}

.pic svg .st10 {
  fill: none;
  stroke: var(--color-img-primary);
  stroke-width: 3.5;
}

.pic svg .st11 {
  fill: none;
  stroke: var(--color-img-secondary);
  stroke-width: 4;
}

.pic svg .st12 {
  fill: var(--color-bg-primary);
  stroke: var(--color-img-primary);
  stroke-width: 4;
}

.pic svg .st13 {
  fill: none;
  stroke: var(--color-img-primary);
  stroke-width: 4;
}

.pic svg .st14 {
  fill: none;
  stroke: var(--color-img-secondary);
  stroke-width: 4.5;
}

.pic svg .st15 {
  fill: none;
  stroke: var(--color-img-secondary);
  stroke-width: 5;
}

.pic svg .st16 {
  fill: none;
  stroke: var(--color-img-primary);
  stroke-width: 5;
}

.pic svg .st17 {
  fill: var(--color-bg-primary);
  stroke: var(--color-img-details);
  stroke-width: 3.5;
}

.pic svg .st19 {
  fill: none;
  stroke: var(--color-img-details);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-miterlimit: 10;
}

.pic svg .error-code {
  font: bold 40px sans-serif;
  fill: var(--color-img-details);
}

@media (max-width: 800px) {
  body, html {
    font-size: 14px;
  }

  article, .pic, article h1 {
    width: 100%;
  }

  .pic {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    opacity: .2;
    width: 100%;
    height: 100%;
  }

  .pic svg {
    max-width: 70%;
  }
}

@media (max-width: 600px) {
  body, html {
    font-size: 12px;
  }

  .pic svg {
    max-width: 90%;
  }
}

/* --- Rules below replace what were previously inline style="" attributes --- */

/* Was: <stop style="stop-color:var(--color-bg-secondary)"> */
.pic svg .stop-bg-secondary {
  stop-color: var(--color-bg-secondary);
}

/* Was: <stop style="stop-color:var(--color-bg-primary)"> */
.pic svg .stop-bg-primary {
  stop-color: var(--color-bg-primary);
}

/* Was: <polygon class="st17" style="fill:var(--color-bg-sign)">
   Declared after .st17 so it wins on the shared "sign" polygon without !important. */
.pic svg .st17-sign-fill {
  fill: var(--color-bg-sign);
}