html {
  --article-text-color: #0b0b0b;
  --background-color: #fff;
  --text-link: #0a69da;
  --pre-background: #d3d3d3;
  --title-color: rgba(0, 0, 0, 0.8);
  --controls-color: #0275ff;
}
:not(pre)>code,pre {
  background: #f6f6f6;
  border: 1px solid #e7e7e7;
  overflow: auto;
}

:not(pre)>code {
  padding: 2px;
}

@media (prefers-color-scheme: dark) {
  html,
  html[data-theme='dark'] {
    --article-text-color: #d8d8d8;
    --background-color: #010409;
    --text-link: #03C4A1;
    --pre-background: #444444;
    --title-color: rgba(255, 255, 255, 0.8);
  }
}

::selection {
  background: var(--article-text-color);
  color: var(--background-color);
}

h1 {
  font-weight: 600;
  margin: 1rem 0 1rem 0;
  line-height: 1.15;
}

html {
  background-color: var(--background-color);
  color: var(--article-text-color);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  height: 100%;
}
button {
  color: var(--article-text-color);
  background-color: var(--pre-background);
}
h1 {
  font-size: 400%;
  margin: 0 0 0.5rem;
  font-weight: 500;
  line-height: 1.15;
}
h2 {
  line-height: 1.15;
  font-size: 250%;
  margin: 1rem 0 1rem;
  font-weight: 500;
}
h3 {
  line-height: 1.15;
  font-size: 200%;
  margin: 1rem 0 1rem;
  font-weight: 500;
}
body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
#content {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-left: auto;
  margin-right: auto;
  min-width: 300px;
  max-width: 800px;
  width: calc(100% - 20px);
}
.header {
  display: flex;
  justify-content: space-between;
}
.step {
  padding-top: 10px;
  position: relative;
}
.footer p {
  text-align: center;
}
pre {
  padding: 16px;
  line-height: 1.5;
  margin-top: 8px;
  margin-bottom: 8px;
}
code {
  display: inline;
  border-radius: 4px;
  font-family: Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;
}
a {
  color: var(--text-link);
  text-decoration: none;
}
a::selection {
  background: var(--text-link);
}
ul {
  padding-left: 24px;
}
li {
  line-height: 2.0;
}
p {
  line-height: 1.5;
  text-align: left;
  margin-top: 12px;
  margin-bottom: 12px;
}
label {
  user-select: none;
}
canvas {
  image-rendering: pixelated;
  border: solid 2px #e7e7e7;
  border-radius: 4px;
  -webkit-touch-callout: none; /* iOS Safari */
  -webkit-user-select: none; /* Safari */
  -moz-user-select: none; /* Old versions of Firefox */
  -ms-user-select: none; /* Internet Explorer/Edge */
  user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */
}
pre {
  border-radius: 4px;
}
img {
  max-width: 100%;
}
@media (max-width:400px) {
  pre, code {
    font-size: 0.9em !important;
  }
}
@media (prefers-color-scheme: dark) {
  :not(pre)>code,pre{
    background: #0d1014 !important;
    border: 1px solid #3b3b3b !important;
  }
  canvas {
    border: solid 2px #3b3b3b;
  }
}

@media (max-width:800px) {
  h1 {
    font-size: 200%;
  }
}

input[type="range"]::-webkit-slider-runnable-track {
  -webkit-appearance: none;
  background: var(--article-text-color);
  height: 8px;
  border-radius: 4px;
}

input[type="range"]::-moz-range-track {
  background: var(--article-text-color);
  height: 8px;
  border-radius: 4px;
}

input[type="range"]::-webkit-slider-thumb {
  margin: -4px;
  background: var(--controls-color);
}

input[type="range"]::-moz-range-thumb {
  margin: -4px;
  color: var(--controls-color);
}

@media (pointer: coarse) {
  input[type="range"]::-webkit-slider-thumb,
  input[type="range"]::-moz-range-thumb  {
    width: 20px;
    height: 20px;
  }
}