diff --git a/examples/docs/style.css b/examples/docs/style.css
index 099ae16c..cc113eaf 100644
--- a/examples/docs/style.css
+++ b/examples/docs/style.css
@@ -1,3 +1,5 @@
+@import url("styles/elm-syntax.css");
+@import url("styles/normalize.css");
 code {
   font-family: "IBM Plex Mono", monospace !important;
 }
@@ -6,307 +8,3 @@ code::before,
 code::after {
   content: "" !important;
 }
-
-/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
-*,
-::after,
-::before {
-  box-sizing: border-box;
-}
-:root {
-  -moz-tab-size: 4;
-  tab-size: 4;
-}
-html {
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-}
-body {
-  margin: 0;
-}
-body {
-  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
-    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
-}
-hr {
-  height: 0;
-  color: inherit;
-}
-abbr[title] {
-  -webkit-text-decoration: underline dotted;
-  text-decoration: underline dotted;
-}
-b,
-strong {
-  font-weight: bolder;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
-    monospace;
-  font-size: 1em;
-}
-small {
-  font-size: 80%;
-}
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-sub {
-  bottom: -0.25em;
-}
-sup {
-  top: -0.5em;
-}
-table {
-  text-indent: 0;
-  border-color: inherit;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  font-family: inherit;
-  font-size: 100%;
-  line-height: 1.15;
-  margin: 0;
-}
-button,
-select {
-  text-transform: none;
-}
-[type="button"],
-[type="reset"],
-[type="submit"],
-button {
-  -webkit-appearance: button;
-}
-::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-:-moz-ui-invalid {
-  box-shadow: none;
-}
-legend {
-  padding: 0;
-}
-progress {
-  vertical-align: baseline;
-}
-::-webkit-inner-spin-button,
-::-webkit-outer-spin-button {
-  height: auto;
-}
-[type="search"] {
-  -webkit-appearance: textfield;
-  outline-offset: -2px;
-}
-::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-::-webkit-file-upload-button {
-  -webkit-appearance: button;
-  font: inherit;
-}
-summary {
-  display: list-item;
-}
-blockquote,
-dd,
-dl,
-figure,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-p,
-pre {
-  margin: 0;
-}
-button {
-  background-color: transparent;
-  background-image: none;
-}
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-fieldset {
-  margin: 0;
-  padding: 0;
-}
-ol,
-ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-html {
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
-    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  line-height: 1.5;
-}
-body {
-  font-family: inherit;
-  line-height: inherit;
-}
-*,
-::after,
-::before {
-  box-sizing: border-box;
-  border-width: 0;
-  border-style: solid;
-  border-color: #e5e7eb;
-}
-hr {
-  border-top-width: 1px;
-}
-img {
-  border-style: solid;
-}
-textarea {
-  resize: vertical;
-}
-input::placeholder,
-textarea::placeholder {
-  opacity: 1;
-  color: #9ca3af;
-}
-[role="button"],
-button {
-  cursor: pointer;
-}
-table {
-  border-collapse: collapse;
-}
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-a {
-  color: inherit;
-  text-decoration: inherit;
-}
-button,
-input,
-optgroup,
-select,
-textarea {
-  padding: 0;
-  line-height: inherit;
-  color: inherit;
-}
-code,
-kbd,
-pre,
-samp {
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
-    "Liberation Mono", "Courier New", monospace;
-}
-audio,
-canvas,
-embed,
-iframe,
-img,
-object,
-svg,
-video {
-  display: block;
-  vertical-align: middle;
-}
-img,
-video {
-  max-width: 100%;
-  height: auto;
-}
-
-pre.elmsh {
-  padding: 10px;
-  margin: 0;
-  text-align: left;
-  overflow: auto;
-  height: 100%;
-  width: 100%;
-  font-size: 12px;
-  font-family: Menlo, Monaco, "Courier New", monospace;
-}
-code.elmsh {
-  padding: 0;
-}
-.elmsh-line:before {
-  content: attr(data-elmsh-lc);
-  display: inline-block;
-  text-align: right;
-  width: 40px;
-  padding: 0 20px 0 0;
-  opacity: 0.3;
-}
-.elmsh {
-  color: #f8f8f2;
-  background: #1e1e1e;
-}
-.elmsh-hl {
-  background: #4864aa;
-}
-.elmsh-add {
-  background: #003800;
-}
-.elmsh-del {
-  background: #380000;
-}
-.elmsh-comm {
-  color: #d4d4d4;
-}
-.elmsh1 {
-  color: #74b0df;
-}
-.elmsh2 {
-  color: #ce9178;
-}
-.elmsh3 {
-  color: #ff00ff;
-}
-.elmsh4 {
-  color: #4f76ac;
-}
-.elmsh5 {
-  color: #3dc9b0;
-}
-.elmsh6 {
-  color: #74b0df;
-}
-.elmsh7 {
-  color: #ce9178;
-}
-.elmsh-elm-ts,
-.elmsh-js-dk,
-.elmsh-css-p {
-  color: #4f76ac;
-}
-.elmsh-js-ce {
-  color: #5bb498;
-}
-.elmsh-css-ar-i {
-  font-weight: bold;
-  color: #ff0000;
-}
diff --git a/examples/docs/styles/elm-syntax.css b/examples/docs/styles/elm-syntax.css
new file mode 100644
index 00000000..b41d06ff
--- /dev/null
+++ b/examples/docs/styles/elm-syntax.css
@@ -0,0 +1,70 @@
+pre.elmsh {
+  padding: 10px;
+  margin: 0;
+  text-align: left;
+  overflow: auto;
+  height: 100%;
+  width: 100%;
+  font-size: 12px;
+  font-family: Menlo, Monaco, "Courier New", monospace;
+}
+code.elmsh {
+  padding: 0;
+}
+.elmsh-line:before {
+  content: attr(data-elmsh-lc);
+  display: inline-block;
+  text-align: right;
+  width: 40px;
+  padding: 0 20px 0 0;
+  opacity: 0.3;
+}
+.elmsh {
+  color: #f8f8f2;
+  background: #1e1e1e;
+}
+.elmsh-hl {
+  background: #4864aa;
+}
+.elmsh-add {
+  background: #003800;
+}
+.elmsh-del {
+  background: #380000;
+}
+.elmsh-comm {
+  color: #d4d4d4;
+}
+.elmsh1 {
+  color: #74b0df;
+}
+.elmsh2 {
+  color: #ce9178;
+}
+.elmsh3 {
+  color: #ff00ff;
+}
+.elmsh4 {
+  color: #4f76ac;
+}
+.elmsh5 {
+  color: #3dc9b0;
+}
+.elmsh6 {
+  color: #74b0df;
+}
+.elmsh7 {
+  color: #ce9178;
+}
+.elmsh-elm-ts,
+.elmsh-js-dk,
+.elmsh-css-p {
+  color: #4f76ac;
+}
+.elmsh-js-ce {
+  color: #5bb498;
+}
+.elmsh-css-ar-i {
+  font-weight: bold;
+  color: #ff0000;
+}
diff --git a/examples/docs/styles/normalize.css b/examples/docs/styles/normalize.css
new file mode 100644
index 00000000..933b7fae
--- /dev/null
+++ b/examples/docs/styles/normalize.css
@@ -0,0 +1,232 @@
+/*! tailwindcss v2.1.2 | MIT License | https://tailwindcss.com */ /*! modern-normalize v1.0.0 | MIT License | https://github.com/sindresorhus/modern-normalize */
+*,
+::after,
+::before {
+  box-sizing: border-box;
+}
+:root {
+  -moz-tab-size: 4;
+  tab-size: 4;
+}
+html {
+  line-height: 1.15;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+body {
+  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial,
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+}
+hr {
+  height: 0;
+  color: inherit;
+}
+abbr[title] {
+  -webkit-text-decoration: underline dotted;
+  text-decoration: underline dotted;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo,
+    monospace;
+  font-size: 1em;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sub {
+  bottom: -0.25em;
+}
+sup {
+  top: -0.5em;
+}
+table {
+  text-indent: 0;
+  border-color: inherit;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button,
+select {
+  text-transform: none;
+}
+[type="button"],
+[type="reset"],
+[type="submit"],
+button {
+  -webkit-appearance: button;
+}
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+legend {
+  padding: 0;
+}
+progress {
+  vertical-align: baseline;
+}
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+summary {
+  display: list-item;
+}
+blockquote,
+dd,
+dl,
+figure,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+p,
+pre {
+  margin: 0;
+}
+button {
+  background-color: transparent;
+  background-image: none;
+}
+button:focus {
+  outline: 1px dotted;
+  outline: 5px auto -webkit-focus-ring-color;
+}
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+ol,
+ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+html {
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
+    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  line-height: 1.5;
+}
+body {
+  font-family: inherit;
+  line-height: inherit;
+}
+*,
+::after,
+::before {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+  border-color: #e5e7eb;
+}
+hr {
+  border-top-width: 1px;
+}
+img {
+  border-style: solid;
+}
+textarea {
+  resize: vertical;
+}
+input::placeholder,
+textarea::placeholder {
+  opacity: 1;
+  color: #9ca3af;
+}
+[role="button"],
+button {
+  cursor: pointer;
+}
+table {
+  border-collapse: collapse;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+button,
+input,
+optgroup,
+select,
+textarea {
+  padding: 0;
+  line-height: inherit;
+  color: inherit;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
+    "Liberation Mono", "Courier New", monospace;
+}
+audio,
+canvas,
+embed,
+iframe,
+img,
+object,
+svg,
+video {
+  display: block;
+  vertical-align: middle;
+}
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}