diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 00000000..889bcbe1
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,2 @@
+**/*.html
+**/*.md
\ No newline at end of file
diff --git a/.prettierrc.json b/.prettierrc.json
new file mode 100644
index 00000000..9c1044f6
--- /dev/null
+++ b/.prettierrc.json
@@ -0,0 +1,3 @@
+{
+  "bracketSameLine": true
+}
diff --git a/audiocontext-setsinkid/style.css b/audiocontext-setsinkid/style.css
index c370c14a..0a6b7073 100644
--- a/audiocontext-setsinkid/style.css
+++ b/audiocontext-setsinkid/style.css
@@ -1,46 +1,53 @@
-button, select, label {
-	font-weight: 400;
-	line-height: 1.5;
-	font-size: 1rem;
-	font-family: sans-serif;
-  }
-  
-  button, select {
-	padding: 6px 12px;
-	text-align: center;
-	background-color: transparent;
-	border-radius: .25rem;
-  }
-  
-  button {
-	color: #0d6efd;
-	border: 1px solid transparent;
-	border-color: #0d6efd;
-	cursor: pointer;
-	outline: 0;
-	display: inline-block;
-	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-	margin-bottom: 20px;
-  }
-  
-  button:hover {
-	color: #fff;
-	background-color: #0d6efd;
-	border-color: #0d6efd;
-  }
-  
-  button:disabled {
-	color: #999;
-	border-color: #999;
-	background: white;
-	cursor: not-allowed;
-  }
-  
-  label {
-	padding-right: 24px;
-  }
-  
-  .select-container p {
-	color: red;
-	margin-bottom: 36px;
-  }
\ No newline at end of file
+button,
+select,
+label {
+  font-weight: 400;
+  line-height: 1.5;
+  font-size: 1rem;
+  font-family: sans-serif;
+}
+
+button,
+select {
+  padding: 6px 12px;
+  text-align: center;
+  background-color: transparent;
+  border-radius: 0.25rem;
+}
+
+button {
+  color: #0d6efd;
+  border: 1px solid transparent;
+  border-color: #0d6efd;
+  cursor: pointer;
+  outline: 0;
+  display: inline-block;
+  transition:
+    color 0.15s ease-in-out,
+    background-color 0.15s ease-in-out,
+    border-color 0.15s ease-in-out,
+    box-shadow 0.15s ease-in-out;
+  margin-bottom: 20px;
+}
+
+button:hover {
+  color: #fff;
+  background-color: #0d6efd;
+  border-color: #0d6efd;
+}
+
+button:disabled {
+  color: #999;
+  border-color: #999;
+  background: white;
+  cursor: not-allowed;
+}
+
+label {
+  padding-right: 24px;
+}
+
+.select-container p {
+  color: red;
+  margin-bottom: 36px;
+}
diff --git a/channel-messaging-multimessage/style.css b/channel-messaging-multimessage/style.css
index 0c10a11d..ea128420 100644
--- a/channel-messaging-multimessage/style.css
+++ b/channel-messaging-multimessage/style.css
@@ -1,6 +1,7 @@
-html,body {
-	margin: 0;
-	font-family: 'Open Sans Condensed', sans-serif;
+html,
+body {
+  margin: 0;
+  font-family: "Open Sans Condensed", sans-serif;
 }
 
 body {
@@ -15,7 +16,7 @@ form {
 }
 
 form input {
-	width: 55%;
+  width: 55%;
 }
 
 form label {
@@ -24,7 +25,7 @@ form label {
 }
 
 form button {
-	width: 60%;
+  width: 60%;
   display: block;
   margin: 10px auto 0;
 }
@@ -33,14 +34,15 @@ p {
   margin: 10px 0;
 }
 
-h1, p {
+h1,
+p {
   text-align: center;
 }
 
 h1 {
-  font-family: 'Lobster Two', cursive;
+  font-family: "Lobster Two", cursive;
 }
 
 ul {
   width: 90%;
-}
\ No newline at end of file
+}
diff --git a/css-painting/half-highlight-fixed-size/style.css b/css-painting/half-highlight-fixed-size/style.css
index 9697b809..26f56448 100644
--- a/css-painting/half-highlight-fixed-size/style.css
+++ b/css-painting/half-highlight-fixed-size/style.css
@@ -1,4 +1,3 @@
 .fancy {
-    background-image: paint(headerHighlight);
-  }
-  
\ No newline at end of file
+  background-image: paint(headerHighlight);
+}
diff --git a/document-picture-in-picture/main.css b/document-picture-in-picture/main.css
index 06f31119..ea4ed45c 100644
--- a/document-picture-in-picture/main.css
+++ b/document-picture-in-picture/main.css
@@ -1,13 +1,33 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 #in-pip-message {
-	display: none;
+  display: none;
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: light) {
+	body {
+		background: antiquewhite;
+	}
+}
+
+@media (display-mode: picture-in-picture) and (prefers-color-scheme: dark) {
+	body {
+		background: #333;
+	}
+
+	a {
+		color: antiquewhite;
+	}
 }
diff --git a/document-picture-in-picture/main.js b/document-picture-in-picture/main.js
index 512e958a..d0b8635a 100644
--- a/document-picture-in-picture/main.js
+++ b/document-picture-in-picture/main.js
@@ -22,7 +22,7 @@ async function togglePictureInPicture() {
 		// Open a Picture-in-Picture window.
 		const pipWindow = await window.documentPictureInPicture.requestWindow({
 			width: videoPlayer.clientWidth,
-			height: videoPlayer.clientHeight,
+			height: videoPlayer.clientHeight + 50,
 		});
 
 		// Add pagehide listener to handle the case of the pip window being closed using the browser X button
diff --git a/edit-context/html-editor/converter.js b/edit-context/html-editor/converter.js
new file mode 100644
index 00000000..4c0b844b
--- /dev/null
+++ b/edit-context/html-editor/converter.js
@@ -0,0 +1,96 @@
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts from a DOM selection object to character offsets.
+export function fromSelectionToOffsets(selection, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let anchorNodeFound = false;
+  let extentNodeFound = false;
+  let anchorOffset = 0;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+    if (node === selection.anchorNode) {
+      anchorNodeFound = true;
+      anchorOffset += selection.anchorOffset;
+    }
+
+    if (node === selection.extentNode) {
+      extentNodeFound = true;
+      extentOffset += selection.extentOffset;
+    }
+
+    if (!anchorNodeFound) {
+      anchorOffset += node.textContent.length;
+    }
+    if (!extentNodeFound) {
+      extentOffset += node.textContent.length;
+    }
+  }
+
+  if (!anchorNodeFound || !extentNodeFound) {
+    return null;
+  }
+
+  return { start: anchorOffset, end: extentOffset };
+}
+
+// The EditContext object only knows about a plain text string and about
+// character offsets. However, our editor view renders the text by using
+// DOM nodes. So we sometimes need to convert between the two.
+// This function converts character offsets to a DOM selection object.
+export function fromOffsetsToSelection(start, end, editorEl) {
+  const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
+
+  let offset = 0;
+  let anchorNode = null;
+  let anchorOffset = 0;
+  let extentNode = null;
+  let extentOffset = 0;
+
+  while (treeWalker.nextNode()) {
+    const node = treeWalker.currentNode;
+
+    if (!anchorNode && offset + node.textContent.length >= start) {
+      anchorNode = node;
+      anchorOffset = start - offset;
+    }
+
+    if (!extentNode && offset + node.textContent.length >= end) {
+      extentNode = node;
+      extentOffset = end - offset;
+    }
+
+    if (anchorNode && extentNode) {
+      break;
+    }
+
+    offset += node.textContent.length;
+  }
+
+  return { anchorNode, anchorOffset, extentNode, extentOffset };
+}
+
+// The EditContext object only knows about character offsets. But out editor
+// view renders HTML tokens as DOM nodes. This function finds DOM node tokens
+// that are in the provided EditContext offset range.
+export function fromOffsetsToRenderedTokenNodes(renderedTokens, start, end) {
+  const tokenNodes = [];
+
+  for (let offset = start; offset < end; offset++) {
+    const token = renderedTokens.find(
+      (token) => token.pos <= offset && token.pos + token.value.length > offset
+    );
+    if (token) {
+      tokenNodes.push({
+        node: token.node,
+        nodeOffset: token.pos,
+        charOffset: offset,
+      });
+    }
+  }
+
+  return tokenNodes;
+}
diff --git a/edit-context/html-editor/editor.js b/edit-context/html-editor/editor.js
new file mode 100644
index 00000000..728b89ef
--- /dev/null
+++ b/edit-context/html-editor/editor.js
@@ -0,0 +1,222 @@
+import { tokenizeHTML } from "./tokenizer.js";
+import {
+  fromOffsetsToRenderedTokenNodes,
+  fromSelectionToOffsets,
+  fromOffsetsToSelection,
+} from "./converter.js";
+
+const IS_EDIT_CONTEXT_SUPPORTED = "EditContext" in window;
+const IS_CUSTOM_HIGHLIGHT_SUPPORTED = "Highlight" in window;
+
+// The editor element.
+const editorEl = document.getElementById("html-editor");
+
+// The current tokens from the html text.
+let currentTokens = [];
+
+// Instances of CSS custom Highlight objects, used to render
+// the IME composition text formats.
+const imeHighlights = {
+  "solid-thin": null,
+  "solid-thick": null,
+  "dotted-thin": null,
+  "dotted-thick": null,
+  "dashed-thin": null,
+  "dashed-thick": null,
+  "wavy-thin": null,
+  "wavy-thick": null,
+  "squiggle-thin": null,
+  "squiggle-thick": null,
+};
+if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
+  for (const [key, value] of Object.entries(imeHighlights)) {
+    imeHighlights[key] = new Highlight();
+    CSS.highlights.set(`ime-${key}`, imeHighlights[key]);
+  }
+} else {
+  console.warn(
+    "Custom highlights are not supported in this browser. IME formats will not be rendered."
+  );
+}
+
+(function () {
+  if (!IS_EDIT_CONTEXT_SUPPORTED) {
+    editorEl.textContent =
+      "Sorry, your browser doesn't support the EditContext API. This demo will not work.";
+    return;
+  }
+
+  // Instantiate the EditContext object.
+  const editContext = new EditContext({
+    text: "<html>\n  <body id=foo>\n    <h1 id='header'>Cool Title</h1>\n    <p class=\"wow\">hello<br/>How are you? test</p>\n  </body>\n</html>",
+  });
+
+  // Attach the EditContext object to the editor element.
+  // This makes the element focusable and able to receive text input.
+  editorEl.editContext = editContext;
+
+  // Update the control bounds (i.e. where the editor is on the screen)
+  // now, and when the window is resized.
+  // This helps the OS position the IME composition window correctly.
+  function updateControlBounds() {
+    const editorBounds = editorEl.getBoundingClientRect();
+    editContext.updateControlBounds(editorBounds);
+  }
+  updateControlBounds();
+  window.addEventListener("resize", updateControlBounds);
+
+  // Update the selection and selection bounds in the EditContext object.
+  // This helps the OS position the IME composition window correctly.
+  function updateSelection(start, end) {
+    editContext.updateSelection(start, end);
+    // Get the bounds of the selection.
+    editContext.updateSelectionBounds(
+      document.getSelection().getRangeAt(0).getBoundingClientRect()
+    );
+  }
+
+  // The render function is used to update the view of the editor.
+  // The EditContext object is our "model", and the editorEl is our "view".
+  // The render function's job is to update the view when the model changes.
+  function render(text, selectionStart, selectionEnd) {
+    // Empty the editor. We're re-rendering everything.
+    editorEl.innerHTML = "";
+
+    // Tokenize the text.
+    currentTokens = tokenizeHTML(text);
+
+    // Render each token as a DOM node.
+    for (const token of currentTokens) {
+      const span = document.createElement("span");
+      span.classList.add(`token-${token.type}`);
+      span.textContent = token.value;
+      editorEl.appendChild(span);
+
+      // Store the new DOM node as a property of the token
+      // in the currentTokens array. We will need it again
+      // later in fromOffsetsToRenderedTokenNodes.
+      token.node = span;
+    }
+
+    // Move the selection to the correct location.
+    // It was lost when we updated the DOM.
+    // The EditContext API gives us the selection as text offsets.
+    // Convert it into a DOM selection.
+    const { anchorNode, anchorOffset, extentNode, extentOffset } =
+      fromOffsetsToSelection(selectionStart, selectionEnd, editorEl);
+    document
+      .getSelection()
+      .setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset);
+  }
+
+  // Listen to the EditContext's textupdate event.
+  // This tells us when text input happens. We use it to re-render the view.
+  editContext.addEventListener("textupdate", (e) => {
+    render(editContext.text, e.selectionStart, e.selectionEnd);
+  });
+
+  // Visually show when we're composing text, like when using an IME,
+  // or voice dictation.
+  editContext.addEventListener("compositionstart", (e) => {
+    editorEl.classList.add("is-composing");
+  });
+  editContext.addEventListener("compositionend", (e) => {
+    editorEl.classList.remove("is-composing");
+  });
+
+  // Update the character bounds when the EditContext needs it.
+  editContext.addEventListener("characterboundsupdate", (e) => {
+    const tokenNodes = fromOffsetsToRenderedTokenNodes(
+      currentTokens,
+      e.rangeStart,
+      e.rangeEnd
+    );
+
+    const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => {
+      const range = document.createRange();
+      range.setStart(node.firstChild, charOffset - nodeOffset);
+      range.setEnd(node.firstChild, charOffset - nodeOffset + 1);
+      return range.getBoundingClientRect();
+    });
+
+    editContext.updateCharacterBounds(e.rangeStart, charBounds);
+  });
+
+  // Draw IME composition text formats if needed.
+  editContext.addEventListener("textformatupdate", (e) => {
+    const formats = e.getTextFormats();
+
+    for (const format of formats) {
+      // Find the DOM selection that corresponds to the format's range.
+      const selection = fromOffsetsToSelection(
+        format.rangeStart,
+        format.rangeEnd,
+        editorEl
+      );
+
+      // Highlight the selection with the right style and thickness.
+      addHighlight(selection, format.underlineStyle, format.underlineThickness);
+    }
+  });
+
+  function addHighlight(selection, underlineStyle, underlineThickness) {
+    // Get the right CSS custom Highlight object depending on the
+    // underline style and thickness.
+    const highlight =
+      imeHighlights[
+        `${underlineStyle.toLowerCase()}-${underlineThickness.toLowerCase()}`
+      ];
+
+    if (highlight) {
+      // Add a range to the Highlight object.
+      const range = document.createRange();
+      range.setStart(selection.anchorNode, selection.anchorOffset);
+      range.setEnd(selection.extentNode, selection.extentOffset);
+      highlight.add(range);
+    }
+  }
+
+  // Handle key presses that are not already handled by the EditContext.
+  editorEl.addEventListener("keydown", (e) => {
+    const start = Math.min(
+      editContext.selectionStart,
+      editContext.selectionEnd
+    );
+    const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
+
+    if (e.key === "Tab") {
+      e.preventDefault();
+      editContext.updateText(start, end, "\t");
+      updateSelection(start + 1, start + 1);
+      render(
+        editContext.text,
+        editContext.selectionStart,
+        editContext.selectionEnd
+      );
+    } else if (e.key === "Enter") {
+      editContext.updateText(start, end, "\n");
+      updateSelection(start + 1, start + 1);
+      render(
+        editContext.text,
+        editContext.selectionStart,
+        editContext.selectionEnd
+      );
+    }
+  });
+
+  // Listen to selectionchange events to let the EditContext know where it is.
+  document.addEventListener("selectionchange", () => {
+    const selection = document.getSelection();
+    const offsets = fromSelectionToOffsets(selection, editorEl);
+    if (offsets) {
+      updateSelection(offsets.start, offsets.end);
+    }
+  });
+
+  // Render the initial view.
+  render(
+    editContext.text,
+    editContext.selectionStart,
+    editContext.selectionEnd
+  );
+})();
diff --git a/edit-context/html-editor/index.html b/edit-context/html-editor/index.html
index ad54f6c4..9fc192a7 100644
--- a/edit-context/html-editor/index.html
+++ b/edit-context/html-editor/index.html
@@ -6,481 +6,16 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Edit Context API: HTML editor demo</title>
 
-  <style>
-    html,
-    body {
-      font-size: .9rem;
-      font-family: consolas, monospace;
-      margin: 0;
-      height: 100%;
-      box-sizing: border-box;
-    }
-
-    body {
-      padding: 1rem;
-      display: grid;
-      grid-template-rows: 1fr min-content;
-      gap: 1rem;
-      place-items: center;
-    }
-
-    #html-editor {
-      box-sizing: border-box;
-      width: 100%;
-      height: 100%;
-      border-radius: .5rem;
-      padding: 1rem;
-      overflow: auto;
-      white-space: pre;
-      tab-size: 2;
-      caret-color: red;
-      background: #000;
-      line-height: 1.6;
-      transition: line-height .2s;
-      color: red;
-    }
-
-    #html-editor.debug {
-      line-height: 2.4;
-    }
-
-    #html-editor::selection {
-      color: white;
-      background: red;
-    }
-
-    #html-editor.is-composing {
-      box-shadow: 0 0 0 .25rem red;
-    }
-
-    [data-token-pos] {
-      margin: 0;
-      transition: margin .2s;
-    }
-
-    .debug [data-token-pos] {
-      position: relative;
-      margin: 0 .2rem;
-    }
-
-    .debug [data-token-pos]::before {
-      position: absolute;
-      content: attr(data-token-pos);
-      color: #ddd;
-      font-size: .5rem;
-      top: -1rem;
-      left: 0;
-      line-height: 1;
-      padding: .1rem .1rem 1rem .1rem;
-      background-image:
-        linear-gradient(to bottom, #999 0 1px, transparent 1px .7rem, #999 .7rem calc(.7rem + 1px), transparent 0),
-        linear-gradient(to right, #999 0 1px, transparent 1px calc(100% - 1px), #999 0),
-        linear-gradient(to bottom, #333 0 .7rem, transparent 0),
-        linear-gradient(to right, #999 0 1px, transparent 0);
-      background-size: 100% 100%, 100% .7rem, 100% 100%, 100% 100%;
-      background-repeat: no-repeat;
-    }
-
-    .token-openTagStart,
-    .token-openTagEnd,
-    .token-closeTagStart,
-    .token-closeTagEnd,
-    .token-selfClose {
-      background: rgb(7 53 92);
-      margin: 0 2px;
-      color: white;
-      border-radius: .25rem;
-    }
-
-    .token-equal {
-      color: white;
-    }
-
-    .token-tagName {
-      font-weight: bold;
-      color: rgb(117, 186, 242);
-    }
-
-    .token-attributeName {
-      color: rgb(207, 81, 198);
-    }
-
-    .token-attributeValue {
-      font-style: italic;
-      color: rgb(127 230 127);
-      border: 1px dashed #8c8c8c;
-      border-width: 1px 0 1px 0;
-    }
-
-    .token-quoteStart,
-    .token-quoteEnd {
-      font-weight: bold;
-      color: rgb(127 230 127);
-      border: 1px solid #8c8c8c;
-      border-width: 1px 0 1px 1px;
-      border-radius: .25rem 0 0 .25rem;
-    }
-
-    .token-quoteEnd {
-      border-width: 1px 1px 1px 0;
-      border-radius: 0 .25rem .25rem 0;
-    }
-
-    .token-text {
-      color: #6a6a6a;
-      padding: 0 .25rem;
-    }
-
-
-    ::highlight(ime-solid-thin) {
-      text-decoration: underline 1px;
-    }
-
-    ::highlight(ime-solid-thick) {
-      text-decoration: underline 2px;
-    }
-
-    ::highlight(ime-dotted-thin) {
-      text-decoration: underline dotted 1px;
-    }
-
-    ::highlight(ime-dotted-thick) {
-      text-decoration: underline dotted 2px;
-    }
-
-    ::highlight(ime-dashed-thin) {
-      text-decoration: underline dashed 1px;
-    }
-
-    ::highlight(ime-dashed-thick) {
-      text-decoration: underline dashed 2px;
-    }
-
-    ::highlight(ime-wavy-thin) {
-      text-decoration: underline wavy 1px;
-    }
-
-    ::highlight(ime-wavy-thick) {
-      text-decoration: underline wavy 2px;
-    }
-
-    ::highlight(ime-squiggle-thin) {
-      text-decoration: underline wavy 1px;
-    }
-
-    ::highlight(ime-squiggle-thick) {
-      text-decoration: underline wavy 2px;
-    }
-
-    .controls label {
-      display: flex;
-      align-items: center;
-    }
-
-    .debug .debug-overlay {
-      position: absolute;
-      background: rgba(255, 0, 0, .2);
-      border: 1px solid red;
-    }
-  </style>
+  <!-- The demo CSS styles -->
+  <link rel="stylesheet" href="styles.css">
 </head>
 
 <body>
-
   <!-- The editor element -->
   <div id="html-editor" spellcheck="false"></div>
 
-  <!-- Some debug controls -->
-  <div class="controls">
-    <label><input type="checkbox" id="debug">Debug</label>
-  </div>
-
-  <script type="module">
-    import { tokenizeHTML } from "./tokenizer.js";
-
-    const IS_EDIT_CONTEXT_SUPPORTED = 'EditContext' in window;
-    const IS_CUSTOM_HIGHLIGHT_SUPPORTED = 'Highlight' in window;
-
-    // The editor element.
-    const editorEl = document.getElementById("html-editor");
-
-    // The current tokens from the html text.
-    let currentTokens = [];
-
-    let isDebug = false;
-    const debugCheckbox = document.querySelector(".controls #debug");
-    debugCheckbox.addEventListener("change", e => {
-      editorEl.classList.toggle("debug", e.target.checked);
-      isDebug = e.target.checked;
-      render();
-    });
-
-    // Instances of CSS custom Highlight objects, used to render
-    // the IME composition text formats.
-    const imeHighlights = {
-      "solid-thin": null,
-      "solid-thick": null,
-      "dotted-thin": null,
-      "dotted-thick": null,
-      "dashed-thin": null,
-      "dashed-thick": null,
-      "wavy-thin": null,
-      "wavy-thick": null,
-      "squiggle-thin": null,
-      "squiggle-thick": null
-    };
-    if (IS_CUSTOM_HIGHLIGHT_SUPPORTED) {
-      for (const [key, value] of Object.entries(imeHighlights)) {
-        imeHighlights[key] = new Highlight();
-        CSS.highlights.set(`ime-${key}`, imeHighlights[key]);
-      }
-    } else {
-      console.warn("Custom highlights are not supported in this browser. IME formats will not be rendered.");
-    }
-
-    (function () {
-      if (!IS_EDIT_CONTEXT_SUPPORTED) {
-        editorEl.textContent = "Sorry, your browser doesn't support the EditContext API. This demo will not work.";
-        return;
-      }
-
-      // Instantiate the EditContext object.
-      const editContext = new EditContext({
-        text: "<html>\n  <body id=foo>\n    <h1 id='header'>Cool Title</h1>\n    <p class=\"wow\">hello<br/>How are you? test</p>\n  </body>\n</html>"
-      });
-
-      // Attach the EditContext object to the editor element.
-      // This makes the element focusable and able to receive text input.
-      editorEl.editContext = editContext;
-
-      // Update the control bounds (i.e. where the editor is on the screen)
-      // now, and when the window is resized.
-      // This helps the OS position the IME composition window correctly.
-      function updateControlBounds() {
-        const editorBounds = editorEl.getBoundingClientRect();
-        editContext.updateControlBounds(editorBounds);
-      }
-      updateControlBounds();
-      window.addEventListener("resize", updateControlBounds);
-
-      // Update the selection and selection bounds in the EditContext object.
-      // This helps the OS position the IME composition window correctly.
-      function updateSelection(start, end) {
-        editContext.updateSelection(start, end);
-        // Get the bounds of the selection.
-        editContext.updateSelectionBounds(document.getSelection().getRangeAt(0).getBoundingClientRect());
-      }
-
-      // The render function is used to update the view of the editor.
-      // The EditContext object is our "model", and the editorEl is our "view".
-      // The render function's job is to update the view when the model changes.
-      function render(text = editContext.text, selectionStart = editContext.selectionStart, selectionEnd = editContext.selectionEnd) {
-        // Empty the editor. We're re-rendering everything.
-        editorEl.innerHTML = "";
-
-        // Tokenize the text.
-        currentTokens = tokenizeHTML(text);
-
-        // Render each token.
-        for (const token of currentTokens) {
-          const span = document.createElement("span");
-          span.classList.add(`token-${token.type}`);
-          span.textContent = token.value;
-          span.dataset.tokenPos = token.pos;
-          editorEl.appendChild(span);
-
-          // Store the node in the token so we can find it later.
-          token.node = span;
-        }
-
-        // Move the selection to the correct location.
-        // It was lost when we updated the DOM.
-        // The EditContext API gives us the selection as text offsets.
-        // Convert it into a DOM selection.
-        const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(selectionStart, selectionEnd);
-        document.getSelection().setBaseAndExtent(anchorNode, anchorOffset, extentNode, extentOffset);
-
-        // Render the character bounds in debug mode.
-        if (isDebug) {
-          const bounds = editContext.characterBounds();
-          for (const bound of bounds) {
-            const overlay = document.createElement("div");
-            overlay.classList.add("debug-overlay");
-            overlay.style.top = `${bound.top}px`;
-            overlay.style.left = `${bound.left}px`;
-            overlay.style.width = `${bound.width}px`;
-            overlay.style.height = `${bound.height}px`;
-            editorEl.appendChild(overlay);
-          }
-        }
-      }
-
-      // Listen to the EditContext's textupdate event.
-      // This tells us when text input happens. We use it to re-render the view.
-      editContext.addEventListener("textupdate", e => {
-        render(editContext.text, e.selectionStart, e.selectionEnd);
-      });
-
-      // Visually show when we're composing text, like when using an IME,
-      // or voice dictation.
-      editContext.addEventListener("compositionstart", e => {
-        editorEl.classList.add("is-composing");
-      });
-      editContext.addEventListener("compositionend", e => {
-        editorEl.classList.remove("is-composing");
-      });
-
-      // Update the character bounds when the EditContext needs it.
-      editContext.addEventListener("characterboundsupdate", e => {
-        const tokenNodes = convertFromOffsetsToListOfRenderedTokenNodes(e.rangeStart, e.rangeEnd);
-
-        const charBounds = tokenNodes.map(({ node, nodeOffset, charOffset }) => {
-          const range = document.createRange();
-          range.setStart(node.firstChild, charOffset - nodeOffset);
-          range.setEnd(node.firstChild, charOffset - nodeOffset + 1);
-          return range.getBoundingClientRect();
-        });
-
-        editContext.updateCharacterBounds(e.rangeStart, charBounds);
-      });
-
-      // Draw IME composition text formats if needed.
-      editContext.addEventListener("textformatupdate", e => {
-        const formats = e.getTextFormats();
-
-        for (const format of formats) {
-          const { rangeStart, rangeEnd, underlineStyle, underlineThickness } = format;
-
-          // Find the nodes in the view that are in the range.
-          const { anchorNode, anchorOffset, extentNode, extentOffset } = convertFromOffsetsToSelection(rangeStart, rangeEnd);
-          const highlight = imeHighlights[`${format.underlineStyle.toLowerCase()}-${format.underlineThickness.toLowerCase()}`];
-          if (highlight) {
-            const range = document.createRange();
-            range.setStart(anchorNode, anchorOffset);
-            range.setEnd(extentNode, extentOffset);
-            highlight.add(range);
-          }
-        }
-      });
-
-      // Handle key presses that are not already handled by the EditContext.
-      editorEl.addEventListener("keydown", e => {
-        const start = Math.min(editContext.selectionStart, editContext.selectionEnd);
-        const end = Math.max(editContext.selectionStart, editContext.selectionEnd);
-
-        if (e.key === "Tab") {
-          e.preventDefault();
-          editContext.updateText(start, end, "\t");
-          updateSelection(start + 1, start + 1);
-          render();
-        } else if (e.key === "Enter") {
-          editContext.updateText(start, end, "\n");
-          updateSelection(start + 1, start + 1);
-          render();
-        }
-      });
-
-      // Listen to selectionchange events to let the EditContext know where it is.
-      document.addEventListener("selectionchange", () => {
-        const selection = document.getSelection();
-        const offsets = convertFromSelectionToOffsets(selection);
-        if (offsets) {
-          updateSelection(offsets.start, offsets.end);
-        }
-      });
-
-      // Find the tokens in currentTokens that are in the given range and return
-      // the corresponding nodes.
-      function convertFromOffsetsToListOfRenderedTokenNodes(start, end) {
-        const tokenNodes = [];
-
-        for (let offset = start; offset < end; offset++) {
-          const token = currentTokens.find(token => token.pos <= offset && token.pos + token.value.length > offset);
-          if (token) {
-            tokenNodes.push({ node: token.node, nodeOffset: token.pos, charOffset: offset });
-          }
-        }
-
-        return tokenNodes;
-      }
-
-      // The EditContext object only knows about a plain text string and about
-      // character offsets. However, our editor view renders the text by using
-      // DOM nodes. So we sometimes need to convert between the two.
-      // The two utility functions below convert between selection objects and
-      // text offsets.
-      function convertFromSelectionToOffsets(selection) {
-        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
-
-        let anchorNodeFound = false;
-        let extentNodeFound = false;
-        let anchorOffset = 0;
-        let extentOffset = 0;
-
-        while (treeWalker.nextNode()) {
-          const node = treeWalker.currentNode;
-          if (node === selection.anchorNode) {
-            anchorNodeFound = true;
-            anchorOffset += selection.anchorOffset;
-          }
-
-          if (node === selection.extentNode) {
-            extentNodeFound = true;
-            extentOffset += selection.extentOffset;
-          }
-
-          if (!anchorNodeFound) {
-            anchorOffset += node.textContent.length;
-          }
-          if (!extentNodeFound) {
-            extentOffset += node.textContent.length;
-          }
-        }
-
-        if (!anchorNodeFound || !extentNodeFound) {
-          return null;
-        }
-
-        return { start: anchorOffset, end: extentOffset };
-      }
-
-      function convertFromOffsetsToSelection(start, end) {
-        const treeWalker = document.createTreeWalker(editorEl, NodeFilter.SHOW_TEXT);
-
-        let offset = 0;
-        let anchorNode = null;
-        let anchorOffset = 0;
-        let extentNode = null;
-        let extentOffset = 0;
-
-        while (treeWalker.nextNode()) {
-          const node = treeWalker.currentNode;
-
-          if (!anchorNode && offset + node.textContent.length >= start) {
-            anchorNode = node;
-            anchorOffset = start - offset;
-          }
-
-          if (!extentNode && offset + node.textContent.length >= end) {
-            extentNode = node;
-            extentOffset = end - offset;
-          }
-
-          if (anchorNode && extentNode) {
-            break;
-          }
-
-          offset += node.textContent.length;
-        }
-
-        return { anchorNode, anchorOffset, extentNode, extentOffset };
-      }
-
-      // Render the initial view.
-      render();
-      setInterval(render, 1000);
-    })();
-  </script>
+  <!-- The demo JavaScript code -->
+  <script type="module" src="editor.js"></script>
 </body>
 
 </html>
\ No newline at end of file
diff --git a/edit-context/html-editor/styles.css b/edit-context/html-editor/styles.css
new file mode 100644
index 00000000..b37ac938
--- /dev/null
+++ b/edit-context/html-editor/styles.css
@@ -0,0 +1,126 @@
+html,
+body {
+  font-size: 0.9rem;
+  font-family: consolas, monospace;
+  margin: 0;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+body {
+  padding: 1rem;
+}
+
+#html-editor {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  overflow: auto;
+  white-space: pre;
+  tab-size: 2;
+  caret-color: red;
+  background: #000;
+  line-height: 1.6;
+  color: red;
+}
+
+#html-editor::selection {
+  color: white;
+  background: red;
+}
+
+#html-editor.is-composing {
+  box-shadow: 0 0 0 0.25rem red;
+}
+
+.token-openTagStart,
+.token-openTagEnd,
+.token-closeTagStart,
+.token-closeTagEnd,
+.token-selfClose {
+  background: rgb(7 53 92);
+  margin: 0 2px;
+  color: white;
+  border-radius: 0.25rem;
+}
+
+.token-equal {
+  color: white;
+}
+
+.token-tagName {
+  font-weight: bold;
+  color: rgb(117, 186, 242);
+}
+
+.token-attributeName {
+  color: rgb(207, 81, 198);
+}
+
+.token-attributeValue {
+  font-style: italic;
+  color: rgb(127 230 127);
+  border: 1px dashed #8c8c8c;
+  border-width: 1px 0 1px 0;
+}
+
+.token-quoteStart,
+.token-quoteEnd {
+  font-weight: bold;
+  color: rgb(127 230 127);
+  border: 1px solid #8c8c8c;
+  border-width: 1px 0 1px 1px;
+  border-radius: 0.25rem 0 0 0.25rem;
+}
+
+.token-quoteEnd {
+  border-width: 1px 1px 1px 0;
+  border-radius: 0 0.25rem 0.25rem 0;
+}
+
+.token-text {
+  color: #6a6a6a;
+  padding: 0 0.25rem;
+}
+
+::highlight(ime-solid-thin) {
+  text-decoration: underline 1px;
+}
+
+::highlight(ime-solid-thick) {
+  text-decoration: underline 2px;
+}
+
+::highlight(ime-dotted-thin) {
+  text-decoration: underline dotted 1px;
+}
+
+::highlight(ime-dotted-thick) {
+  text-decoration: underline dotted 2px;
+}
+
+::highlight(ime-dashed-thin) {
+  text-decoration: underline dashed 1px;
+}
+
+::highlight(ime-dashed-thick) {
+  text-decoration: underline dashed 2px;
+}
+
+::highlight(ime-wavy-thin) {
+  text-decoration: underline wavy 1px;
+}
+
+::highlight(ime-wavy-thick) {
+  text-decoration: underline wavy 2px;
+}
+
+::highlight(ime-squiggle-thin) {
+  text-decoration: underline wavy 1px;
+}
+
+::highlight(ime-squiggle-thick) {
+  text-decoration: underline wavy 2px;
+}
diff --git a/fullscreen-api/main.css b/fullscreen-api/main.css
index c613fe9a..a8b267da 100644
--- a/fullscreen-api/main.css
+++ b/fullscreen-api/main.css
@@ -1,8 +1,10 @@
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 12px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 12px "Open Sans",
+    sans-serif;
 }
 
 #video {
-	max-width: 100%;
-}
\ No newline at end of file
+  max-width: 100%;
+}
diff --git a/indexeddb-examples/idbindex/style/style.css b/indexeddb-examples/idbindex/style/style.css
index 5627d6f6..a96799a3 100644
--- a/indexeddb-examples/idbindex/style/style.css
+++ b/indexeddb-examples/idbindex/style/style.css
@@ -10,8 +10,13 @@ h1 {
   font-family: "Bevan", cursive;
   font-size: 4rem;
   letter-spacing: 0.2rem;
-  text-shadow: 1px 1px 1px #eee4fe, 2px 2px 1px #eee4fe, 3px 3px 1px #7b62ae,
-    4px 4px 1px #7b62ae, 5px 5px 1px #261758, 6px 6px 1px #261758;
+  text-shadow:
+    1px 1px 1px #eee4fe,
+    2px 2px 1px #eee4fe,
+    3px 3px 1px #7b62ae,
+    4px 4px 1px #7b62ae,
+    5px 5px 1px #261758,
+    6px 6px 1px #261758;
 }
 
 table {
diff --git a/media-session/moz.css b/media-session/moz.css
index e50f740a..5f1a303a 100644
--- a/media-session/moz.css
+++ b/media-session/moz.css
@@ -1,85 +1,113 @@
 @font-face {
-  font-family: 'zillaslab';
-  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2');
+  font-family: "zillaslab";
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2")
+    format("woff2");
 }
 
 :root {
-	--black: hsl(0, 0%, 16%);
-	--white: hsl(0,0%,97%);
-	--blue: hsl(198, 100%, 66%);
-	--teal: hsl(198, 43%, 42%);
-	--lightYellow: hsl(43, 100%, 92%);
-	--grey: hsl(0, 0%, 80%);
-	--unit: 1.2rem;
+  --black: hsl(0, 0%, 16%);
+  --white: hsl(0, 0%, 97%);
+  --blue: hsl(198, 100%, 66%);
+  --teal: hsl(198, 43%, 42%);
+  --lightYellow: hsl(43, 100%, 92%);
+  --grey: hsl(0, 0%, 80%);
+  --unit: 1.2rem;
 }
 
 body {
-	padding: var(--unit);
-	background-color: var(--white);
-	font-family: 'Arial', sans-serif; font-size: 100%;
-	color: var(--black); line-height: 1.3;
+  padding: var(--unit);
+  background-color: var(--white);
+  font-family: "Arial", sans-serif;
+  font-size: 100%;
+  color: var(--black);
+  line-height: 1.3;
 }
 
 /* page partials */
 footer {
-	padding: var(--unit);
-	margin-top: calc(var(--unit)*2);
-	border-top: 1px solid var(--grey);
+  padding: var(--unit);
+  margin-top: calc(var(--unit) * 2);
+  border-top: 1px solid var(--grey);
 }
 footer p {
-	margin: 0px; text-align: center;
+  margin: 0px;
+  text-align: center;
 }
 
 /* base styles */
-h1, h2 {
-	font-family: "zillaslab", serif;
+h1,
+h2 {
+  font-family: "zillaslab", serif;
 }
 
 h2 {
-	padding: calc(var(--unit)/2);
-	background-color: var(--black);
-	color: var(--white); font-weight: normal;
+  padding: calc(var(--unit) / 2);
+  background-color: var(--black);
+  color: var(--white);
+  font-weight: normal;
 }
 
-p {}
+p {
+}
 
 a {
-	border: 1px solid var(--teal);
-	border-width: 0px 0px 1px 0px;
-	color: var(--teal);
-	text-decoration: none;
+  border: 1px solid var(--teal);
+  border-width: 0px 0px 1px 0px;
+  color: var(--teal);
+  text-decoration: none;
 }
 a:hover {
-	border-width: 1px 0px 0px 0px;
+  border-width: 1px 0px 0px 0px;
 }
 
 nav ul {
-	display: flex; justify-content: space-between;
-	margin: 0px; padding: 0px;
-	list-style: none;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+nav li {
+  margin: 0px;
+  padding: 0px;
 }
-nav li {margin: 0px; padding: 0px;}
 
-dl {display: flex; flex-wrap: wrap;}
-dt, dd {padding: 2%; box-sizing: border-box;}
-dt {width: 30%; font-weight: bold; text-align: right;}
-dd {width: 66%; margin: 0px;}
+dl {
+  display: flex;
+  flex-wrap: wrap;
+}
+dt,
+dd {
+  padding: 2%;
+  box-sizing: border-box;
+}
+dt {
+  width: 30%;
+  font-weight: bold;
+  text-align: right;
+}
+dd {
+  width: 66%;
+  margin: 0px;
+}
 
 code {
-	background-color: var(--lightYellow);
-	font-family:monospace; font-size:110%;
-	letter-spacing:0.5px;
+  background-color: var(--lightYellow);
+  font-family: monospace;
+  font-size: 110%;
+  letter-spacing: 0.5px;
 }
 
 pre {
-	padding: var(--unit);
-	background-color: var(--grey);
-	border-left: 4px solid var(--teal);
-	white-space: pre-wrap;
-	overflow-wrap: break-word;
-	tab-size: 4; font-size: 86%;
+  padding: var(--unit);
+  background-color: var(--grey);
+  border-left: 4px solid var(--teal);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 4;
+  font-size: 86%;
 }
 
 pre code {
-	background: none;
-}
\ No newline at end of file
+  background: none;
+}
diff --git a/media/mediaerror/main.css b/media/mediaerror/main.css
index a1686056..473de5d0 100644
--- a/media/mediaerror/main.css
+++ b/media/mediaerror/main.css
@@ -1,18 +1,22 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 #controls {
-	border: 1px solid black;
+  border: 1px solid black;
 }
 
 #log {
-	font: 14px monospace;
-	padding: 6px 0;
-}
\ No newline at end of file
+  font: 14px monospace;
+  padding: 6px 0;
+}
diff --git a/media/web-dictaphone/styles/app.css b/media/web-dictaphone/styles/app.css
index ae6f1b6c..01feb166 100644
--- a/media/web-dictaphone/styles/app.css
+++ b/media/web-dictaphone/styles/app.css
@@ -4,12 +4,13 @@
   box-sizing: border-box;
 }
 
-html, body {
+html,
+body {
   height: 100%;
 }
 
 body {
-  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   font-size: 0.8rem;
 }
 
@@ -19,7 +20,8 @@ body {
   flex-direction: column;
 }
 
-h1, h2 {
+h1,
+h2 {
   font-size: 2rem;
   text-align: center;
   font-weight: normal;
@@ -57,17 +59,17 @@ button {
   padding: 0.5rem;
 }
 
-button:hover, button:focus {
+button:hover,
+button:focus {
   box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 1);
   background: #0ae;
 }
 
 button:active {
-  box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5);
+  box-shadow: inset 0px 0px 20px rgba(0, 0, 0, 0.5);
   transform: translateY(2px);
 }
 
-
 /* Make the clips use as much space as possible, and
  * also show a scrollbar when there are too many clips to show
  * in the available space */
@@ -76,7 +78,8 @@ button:active {
   overflow: auto;
 }
 
-section, article {
+section,
+article {
   display: block;
 }
 
@@ -119,9 +122,9 @@ label {
   border-radius: 10px;
 }
 
-input[type=checkbox] {
-   position: absolute;
-   top: -100px;
+input[type="checkbox"] {
+  position: absolute;
+  top: -100px;
 }
 
 aside {
@@ -146,7 +149,7 @@ aside a {
 }
 
 /* Toggled State of information box */
-input[type=checkbox]:checked ~ aside {
+input[type="checkbox"]:checked ~ aside {
   transform: translateX(0);
 }
 
diff --git a/picture-in-picture/main.css b/picture-in-picture/main.css
index 577a3182..c97680b6 100644
--- a/picture-in-picture/main.css
+++ b/picture-in-picture/main.css
@@ -1,13 +1,17 @@
 #contents {
-	width: 600px;
-	font: 14px "Open Sans", sans-serif;
+  width: 600px;
+  font:
+    14px "Open Sans",
+    sans-serif;
 }
 
 #credits {
-	padding: 0 0 10px 0;
-	font: italic 10px "Open Sans", sans-serif;
+  padding: 0 0 10px 0;
+  font:
+    italic 10px "Open Sans",
+    sans-serif;
 }
 
 :picture-in-picture {
-	box-shadow: 0 0 0 5px red;
+  box-shadow: 0 0 0 5px red;
 }
diff --git a/pointer-lock/style.css b/pointer-lock/style.css
index 84d4c112..7a1edaf3 100644
--- a/pointer-lock/style.css
+++ b/pointer-lock/style.css
@@ -1,30 +1,31 @@
-html, body {
-	margin: 0;
-	padding: 0;
+html,
+body {
+  margin: 0;
+  padding: 0;
 }
 
 html {
-	font-family: sans-serif;
+  font-family: sans-serif;
 }
 
 canvas {
-	display: block;
-	margin: 0 auto;
-	border: 1px solid black;
+  display: block;
+  margin: 0 auto;
+  border: 1px solid black;
 }
 
 .information {
-	width: 640px;
-	margin: 0 auto 50px;
+  width: 640px;
+  margin: 0 auto 50px;
 }
 
 #tracker {
-	position: absolute;
-	top: 0;
-	right: 10px;
-	background-color: white;
+  position: absolute;
+  top: 0;
+  right: 10px;
+  background-color: white;
 }
 
 h1 {
-	font-size: 200%;
-}
\ No newline at end of file
+  font-size: 200%;
+}
diff --git a/screen-wake-lock-api/moz.css b/screen-wake-lock-api/moz.css
index e50f740a..5f1a303a 100644
--- a/screen-wake-lock-api/moz.css
+++ b/screen-wake-lock-api/moz.css
@@ -1,85 +1,113 @@
 @font-face {
-  font-family: 'zillaslab';
-  src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2') format('woff2');
+  font-family: "zillaslab";
+  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/858/ZillaSlab.woff2")
+    format("woff2");
 }
 
 :root {
-	--black: hsl(0, 0%, 16%);
-	--white: hsl(0,0%,97%);
-	--blue: hsl(198, 100%, 66%);
-	--teal: hsl(198, 43%, 42%);
-	--lightYellow: hsl(43, 100%, 92%);
-	--grey: hsl(0, 0%, 80%);
-	--unit: 1.2rem;
+  --black: hsl(0, 0%, 16%);
+  --white: hsl(0, 0%, 97%);
+  --blue: hsl(198, 100%, 66%);
+  --teal: hsl(198, 43%, 42%);
+  --lightYellow: hsl(43, 100%, 92%);
+  --grey: hsl(0, 0%, 80%);
+  --unit: 1.2rem;
 }
 
 body {
-	padding: var(--unit);
-	background-color: var(--white);
-	font-family: 'Arial', sans-serif; font-size: 100%;
-	color: var(--black); line-height: 1.3;
+  padding: var(--unit);
+  background-color: var(--white);
+  font-family: "Arial", sans-serif;
+  font-size: 100%;
+  color: var(--black);
+  line-height: 1.3;
 }
 
 /* page partials */
 footer {
-	padding: var(--unit);
-	margin-top: calc(var(--unit)*2);
-	border-top: 1px solid var(--grey);
+  padding: var(--unit);
+  margin-top: calc(var(--unit) * 2);
+  border-top: 1px solid var(--grey);
 }
 footer p {
-	margin: 0px; text-align: center;
+  margin: 0px;
+  text-align: center;
 }
 
 /* base styles */
-h1, h2 {
-	font-family: "zillaslab", serif;
+h1,
+h2 {
+  font-family: "zillaslab", serif;
 }
 
 h2 {
-	padding: calc(var(--unit)/2);
-	background-color: var(--black);
-	color: var(--white); font-weight: normal;
+  padding: calc(var(--unit) / 2);
+  background-color: var(--black);
+  color: var(--white);
+  font-weight: normal;
 }
 
-p {}
+p {
+}
 
 a {
-	border: 1px solid var(--teal);
-	border-width: 0px 0px 1px 0px;
-	color: var(--teal);
-	text-decoration: none;
+  border: 1px solid var(--teal);
+  border-width: 0px 0px 1px 0px;
+  color: var(--teal);
+  text-decoration: none;
 }
 a:hover {
-	border-width: 1px 0px 0px 0px;
+  border-width: 1px 0px 0px 0px;
 }
 
 nav ul {
-	display: flex; justify-content: space-between;
-	margin: 0px; padding: 0px;
-	list-style: none;
+  display: flex;
+  justify-content: space-between;
+  margin: 0px;
+  padding: 0px;
+  list-style: none;
+}
+nav li {
+  margin: 0px;
+  padding: 0px;
 }
-nav li {margin: 0px; padding: 0px;}
 
-dl {display: flex; flex-wrap: wrap;}
-dt, dd {padding: 2%; box-sizing: border-box;}
-dt {width: 30%; font-weight: bold; text-align: right;}
-dd {width: 66%; margin: 0px;}
+dl {
+  display: flex;
+  flex-wrap: wrap;
+}
+dt,
+dd {
+  padding: 2%;
+  box-sizing: border-box;
+}
+dt {
+  width: 30%;
+  font-weight: bold;
+  text-align: right;
+}
+dd {
+  width: 66%;
+  margin: 0px;
+}
 
 code {
-	background-color: var(--lightYellow);
-	font-family:monospace; font-size:110%;
-	letter-spacing:0.5px;
+  background-color: var(--lightYellow);
+  font-family: monospace;
+  font-size: 110%;
+  letter-spacing: 0.5px;
 }
 
 pre {
-	padding: var(--unit);
-	background-color: var(--grey);
-	border-left: 4px solid var(--teal);
-	white-space: pre-wrap;
-	overflow-wrap: break-word;
-	tab-size: 4; font-size: 86%;
+  padding: var(--unit);
+  background-color: var(--grey);
+  border-left: 4px solid var(--teal);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+  tab-size: 4;
+  font-size: 86%;
 }
 
 pre code {
-	background: none;
-}
\ No newline at end of file
+  background: none;
+}
diff --git a/service-worker/simple-service-worker/app.js b/service-worker/simple-service-worker/app.js
index 72472bf5..e5f4f308 100644
--- a/service-worker/simple-service-worker/app.js
+++ b/service-worker/simple-service-worker/app.js
@@ -42,7 +42,11 @@ const createGalleryFigure = async (galleryImage) => {
     const myImage = document.createElement('img');
     const myCaption = document.createElement('caption');
     const myFigure = document.createElement('figure');
-    myCaption.textContent = `${galleryImage.name}: Taken by ${galleryImage.credit}`;
+    const myName = document.createElement('span');
+    myName.textContent = `${galleryImage.name}: `;
+    const myCredit = document.createElement('span');
+    myCredit.innerHTML = `Taken by ${galleryImage.credit}`;
+    myCaption.append(myName, myCredit);
     myImage.src = window.URL.createObjectURL(imageBlob);
     myImage.setAttribute('alt', galleryImage.alt);
     myFigure.append(myImage, myCaption);
diff --git a/to-do-notifications/style/style.css b/to-do-notifications/style/style.css
index ffaca88b..ec9ed54b 100644
--- a/to-do-notifications/style/style.css
+++ b/to-do-notifications/style/style.css
@@ -59,7 +59,8 @@ input[type="submit"] {
   color: black;
   text-shadow: 1px 1px 1px black;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  box-shadow: inset 0px 5px 3px rgba(255, 255, 255, 0.2),
+  box-shadow:
+    inset 0px 5px 3px rgba(255, 255, 255, 0.2),
     inset 0px -5px 3px rgba(0, 0, 0, 0.2);
 }
 
diff --git a/view-transitions/style.css b/view-transitions/style.css
index 1a8a3ff6..412b44ad 100644
--- a/view-transitions/style.css
+++ b/view-transitions/style.css
@@ -1,7 +1,7 @@
 /* resets */
 
 figure {
-  margin: 0
+  margin: 0;
 }
 
 /* layout */
@@ -32,7 +32,8 @@ a {
   outline: 0;
 }
 
-.thumbs a:hover img, .thumbs a:focus img {
+.thumbs a:hover img,
+.thumbs a:focus img {
   opacity: 1;
 }
 
@@ -46,10 +47,11 @@ a {
   border-radius: 7px;
 }
 
-footer, figcaption {
+footer,
+figcaption {
   position: absolute;
   padding: 5px 10px;
-  background-color: rgba(255,255,255,0.5);
+  background-color: rgba(255, 255, 255, 0.5);
 }
 
 footer {
@@ -70,8 +72,10 @@ figcaption {
 
 /* text */
 
-h1, figcaption, a {
-  font-family: 'Roboto Slab', serif;
+h1,
+figcaption,
+a {
+  font-family: "Roboto Slab", serif;
 }
 
 h1 {
@@ -150,4 +154,4 @@ figcaption {
 
 ::view-transition-new(figure-caption) {
   animation: 0.25s 0.25s linear both grow-x;
-} */
\ No newline at end of file
+} */
diff --git a/web-crypto/derive-bits/style.css b/web-crypto/derive-bits/style.css
index d5ceac2b..703427db 100644
--- a/web-crypto/derive-bits/style.css
+++ b/web-crypto/derive-bits/style.css
@@ -1,93 +1,95 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .derive-bits {
-    margin: 0 .5rem;
+.description,
+.derive-bits {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .derive-bits {
-    box-shadow: -1px 2px 5px gray;
-    padding: .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.5rem;
+  margin-bottom: 2rem;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
 .derived-bits-value {
-    padding-left: .5rem;
-    font-family: monospace;
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 40rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 40rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* derive-bits controls grid */
 .derive-bits-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr;
 }
 
 .derived-bits {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .derive-bits-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/derive-key/style.css b/web-crypto/derive-key/style.css
index c97e99e3..a73bf319 100644
--- a/web-crypto/derive-key/style.css
+++ b/web-crypto/derive-key/style.css
@@ -1,46 +1,49 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .derive-key {
-    margin: 0 .5rem;
+.description,
+.derive-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .derive-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .derive-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
-.ciphertext-value, .decrypted-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.decrypted-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 .error {
@@ -49,68 +52,68 @@ input[type="button"] {
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 32rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* derive-key controls grid */
 .derive-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .ciphertext {
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .decrypted {
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .encrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 .decrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/encrypt-decrypt/style.css b/web-crypto/encrypt-decrypt/style.css
index 8627f88a..14fcc420 100644
--- a/web-crypto/encrypt-decrypt/style.css
+++ b/web-crypto/encrypt-decrypt/style.css
@@ -1,112 +1,115 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .encrypt-decrypt {
-    margin: 0 .5rem;
+.description,
+.encrypt-decrypt {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .encrypt-decrypt {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .encrypt-decrypt-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
 input[type="button"] {
-    width: 5rem;
+  width: 5rem;
 }
 
-.ciphertext-value, .decrypted-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.decrypted-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 32rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 32rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .encrypt-decrypt-controls {
-    display: grid;
-    grid-template-columns: 1fr 5rem;
-    grid-template-rows: 1fr 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 5rem;
+  grid-template-rows: 1fr 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
 .ciphertext {
-    grid-column-start: 1;
-    grid-row-start: 2;
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .decrypted {
-    grid-column-start: 1;
-    grid-row-start: 3;
+  grid-column-start: 1;
+  grid-row-start: 3;
 }
 
 .encrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
 .decrypt-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/export-key/style.css b/web-crypto/export-key/style.css
index 2d62b92c..d4bd28ad 100644
--- a/web-crypto/export-key/style.css
+++ b/web-crypto/export-key/style.css
@@ -1,72 +1,74 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .examples {
-    margin: 0 .5rem;
+.description,
+.examples {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .output {
-    box-shadow: inset 0 0 3px 1px black;
-    height: 100%;
+  box-shadow: inset 0 0 3px 1px black;
+  height: 100%;
 }
 
 .exported-key {
-    padding: 1em;
-    white-space: pre-wrap;
-    word-break: break-all;
+  padding: 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 48rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 48rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/import-key/style.css b/web-crypto/import-key/style.css
index 7034d177..2611a356 100644
--- a/web-crypto/import-key/style.css
+++ b/web-crypto/import-key/style.css
@@ -1,112 +1,118 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .import-key {
-    margin: 0 .5rem;
+.description,
+.import-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .import-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .import-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
-.ciphertext-value, .signature-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.signature-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
-.sign-button, .encrypt-button {
-    background-color: green;
-    color: white;
+.sign-button,
+.encrypt-button {
+  background-color: green;
+  color: white;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 36rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 36rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .import-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 8rem;
-    grid-template-rows: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 8rem;
+  grid-template-rows: 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
-.ciphertext, .signature {
-    grid-column-start: 1;
-    grid-row-start: 2;
+.ciphertext,
+.signature {
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .import-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
-.encrypt-button, .sign-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+.encrypt-button,
+.sign-button {
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/unwrap-key/style.css b/web-crypto/unwrap-key/style.css
index 0871e6f1..a451057e 100644
--- a/web-crypto/unwrap-key/style.css
+++ b/web-crypto/unwrap-key/style.css
@@ -1,112 +1,118 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .unwrap-key {
-    margin: 0 .5rem;
+.description,
+.unwrap-key {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .unwrap-key {
-    box-shadow: -1px 2px 5px gray;
-    padding: .2rem .5rem;
-    margin-bottom: 2rem;
+  box-shadow: -1px 2px 5px gray;
+  padding: 0.2rem 0.5rem;
+  margin-bottom: 2rem;
 }
 
 .unwrap-key-controls > * {
-    margin: .5rem 0;
+  margin: 0.5rem 0;
 }
 
-.ciphertext-value, .signature-value {
-    padding-left: .5rem;
-    font-family: monospace;
+.ciphertext-value,
+.signature-value {
+  padding-left: 0.5rem;
+  font-family: monospace;
 }
 
-.sign-button, .encrypt-button {
-    background-color: green;
-    color: white;
+.sign-button,
+.encrypt-button {
+  background-color: green;
+  color: white;
 }
 
 .hidden {
-    display: none;
+  display: none;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 36rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 36rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* encrypt-decrypt controls grid */
 .unwrap-key-controls {
-    display: grid;
-    grid-template-columns: 1fr 8rem;
-    grid-template-rows: 1fr 1fr;
+  display: grid;
+  grid-template-columns: 1fr 8rem;
+  grid-template-rows: 1fr 1fr;
 }
 
 .message-control {
-    grid-column-start: 1;
-    grid-row-start: 1;
+  grid-column-start: 1;
+  grid-row-start: 1;
 }
 
-.ciphertext, .signature {
-    grid-column-start: 1;
-    grid-row-start: 2;
+.ciphertext,
+.signature {
+  grid-column-start: 1;
+  grid-row-start: 2;
 }
 
 .unwrap-button {
-    grid-column-start: 2;
-    grid-row-start: 1;
+  grid-column-start: 2;
+  grid-row-start: 1;
 }
 
-.encrypt-button, .sign-button {
-    grid-column-start: 2;
-    grid-row-start: 2;
+.encrypt-button,
+.sign-button {
+  grid-column-start: 2;
+  grid-row-start: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-crypto/wrap-key/style.css b/web-crypto/wrap-key/style.css
index 5c3b4410..0dda8b40 100644
--- a/web-crypto/wrap-key/style.css
+++ b/web-crypto/wrap-key/style.css
@@ -1,72 +1,74 @@
 /* General setup */
 
 * {
-    box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-    font-family: sans-serif;
-    line-height: 1.2rem;
+html,
+body {
+  font-family: sans-serif;
+  line-height: 1.2rem;
 }
 
 /* Layout and styles */
 
 h1 {
-    color: green;
-    margin-left: .5rem;
+  color: green;
+  margin-left: 0.5rem;
 }
 
-.description, .examples {
-    margin: 0 .5rem;
+.description,
+.examples {
+  margin: 0 0.5rem;
 }
 
 .description > p {
-    margin-top: 0;
+  margin-top: 0;
 }
 
 .output {
-    box-shadow: inset 0 0 3px 1px black;
-    height: 100%;
+  box-shadow: inset 0 0 3px 1px black;
+  height: 100%;
 }
 
 .wrapped-key {
-    padding: 1em;
-    white-space: pre-wrap;
-    word-break: break-all;
+  padding: 1em;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 
 /* Whole page grid */
 main {
-    display: grid;
-    grid-template-columns: 48rem 1fr;
-    grid-template-rows: 4rem 1fr;
+  display: grid;
+  grid-template-columns: 48rem 1fr;
+  grid-template-rows: 4rem 1fr;
 }
 
 h1 {
-    grid-column: 1/2;
-    grid-row: 1;
+  grid-column: 1/2;
+  grid-row: 1;
 }
 
 .examples {
-    grid-column: 1;
-    grid-row: 2;
+  grid-column: 1;
+  grid-row: 2;
 }
 
 .description {
-    grid-column: 2;
-    grid-row: 2;
+  grid-column: 2;
+  grid-row: 2;
 }
 
 /* Animate output display */
 .fade-in {
-    animation: fadein .5s;
+  animation: fadein 0.5s;
 }
 
 @keyframes fadein {
-    from {
-        opacity: 0;
-    }
-    to {
-        opacity: 1;
-    }
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
diff --git a/web-speech-api/phrase-matcher/style.css b/web-speech-api/phrase-matcher/style.css
index 85d842ca..5dab06ad 100644
--- a/web-speech-api/phrase-matcher/style.css
+++ b/web-speech-api/phrase-matcher/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -12,14 +13,15 @@ body {
   overflow: hidden;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
 }
 
 div p {
   padding: 20px;
-  background-color: rgba(0,0,0,0.2);
+  background-color: rgba(0, 0, 0, 0.2);
 }
 
 div {
@@ -51,4 +53,4 @@ button {
 
 .output {
   font-style: italic;
-}
\ No newline at end of file
+}
diff --git a/web-speech-api/speak-easy-synthesis/style.css b/web-speech-api/speak-easy-synthesis/style.css
index 60b6b878..48ce6339 100644
--- a/web-speech-api/speak-easy-synthesis/style.css
+++ b/web-speech-api/speak-easy-synthesis/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -12,13 +13,16 @@ body {
   margin: 0 auto;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
   padding: 20px;
 }
 
-.txt, select, form > div {
+.txt,
+select,
+form > div {
   display: block;
   margin: 0 auto;
   font-family: sans-serif;
@@ -38,7 +42,8 @@ form > div {
   width: 81%;
 }
 
-.txt, form > div {
+.txt,
+form > div {
   margin-bottom: 10px;
   overflow: auto;
 }
@@ -53,13 +58,15 @@ label {
   line-height: 1.5;
 }
 
-.rate-value, .pitch-value {
+.rate-value,
+.pitch-value {
   float: right;
   width: 5%;
   line-height: 1.5;
 }
 
-#rate, #pitch {
+#rate,
+#pitch {
   float: right;
   width: 81%;
 }
@@ -71,4 +78,4 @@ label {
 
 .controls button {
   padding: 10px;
-}
\ No newline at end of file
+}
diff --git a/web-speech-api/speech-color-changer/style.css b/web-speech-api/speech-color-changer/style.css
index f6f12cce..1c735605 100644
--- a/web-speech-api/speech-color-changer/style.css
+++ b/web-speech-api/speech-color-changer/style.css
@@ -1,4 +1,5 @@
-body, html {
+body,
+html {
   margin: 0;
 }
 
@@ -13,7 +14,8 @@ body {
   margin: 0 auto;
 }
 
-h1, p {
+h1,
+p {
   font-family: sans-serif;
   text-align: center;
   padding: 20px;
@@ -26,7 +28,7 @@ div {
   bottom: 0px;
   right: 0;
   left: 0;
-  background-color: rgba(255,255,255,0.2);
+  background-color: rgba(255, 255, 255, 0.2);
 }
 
 ul {
@@ -34,5 +36,5 @@ ul {
 }
 
 .hints span {
-  text-shadow: 0px 0px 6px rgba(255,255,255,0.7);
+  text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
 }
diff --git a/web-storage/style.css b/web-storage/style.css
index 1b5d0d5d..837e2d15 100644
--- a/web-storage/style.css
+++ b/web-storage/style.css
@@ -1,83 +1,87 @@
 /* General setup */
 
 * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
-html,body {
-	margin: 0;
+html,
+body {
+  margin: 0;
 }
 
 html {
-	font-size: 10px;
-	font-family: sans-serif;
+  font-size: 10px;
+  font-family: sans-serif;
 }
 
 /* Typography */
 
 h1 {
-	font-size: 6rem;
+  font-size: 6rem;
 }
 
-p,form,li {
-	font-size: 1.6rem;
-	line-height: 1.5;
-	font-family: sans-serif;
+p,
+form,
+li {
+  font-size: 1.6rem;
+  line-height: 1.5;
+  font-family: sans-serif;
 }
 
 /* Layout and styles */
 
 html {
-	background-color: #FF0000;
-	height: 100%;
+  background-color: #ff0000;
+  height: 100%;
 }
 
 body {
-	display: -webkit-box;
-	display: -moz-box;
-	display: box;
-	display: flex;
-    
-    -webkit-box-align: center;
-	-moz-box-align: center;
-	box-align: center;
-	justify-content: center;
+  display: -webkit-box;
+  display: -moz-box;
+  display: box;
+  display: flex;
+
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  box-align: center;
+  justify-content: center;
 
-    -webkit-box-pack: center;
-	-moz-box-pack: center;
-	box-pack: center;
-    align-items: center;
+  -webkit-box-pack: center;
+  -moz-box-pack: center;
+  box-pack: center;
+  align-items: center;
 
-    height: inherit;
+  height: inherit;
 }
 
 body > .wrapper {
-    width: 90%;
-	max-width: 800px;
-	background-color: rgb(250,250,250);
-	padding: 2rem;
-	position: relative;
-	border: 5px solid black;
+  width: 90%;
+  max-width: 800px;
+  background-color: rgb(250, 250, 250);
+  padding: 2rem;
+  position: relative;
+  border: 5px solid black;
 }
 
 body > div > div {
-	width: 300px;
+  width: 300px;
 }
 
 h1 {
-	margin: 0;
-	padding: 0;
-	font-family: sans-serif;
-	position: absolute;
-	left: 2rem;
-	top: -4.6rem;
-	text-transform: uppercase;
-	color: rgb(250,250,250);
-	text-shadow: 0px -1px 1px black,
-	             0px -2px 1px black,
-	             0px -3px 1px black,
-	             0px -4px 1px black,
-	             0px -5px 1px black;
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  position: absolute;
+  left: 2rem;
+  top: -4.6rem;
+  text-transform: uppercase;
+  color: rgb(250, 250, 250);
+  text-shadow:
+    0px -1px 1px black,
+    0px -2px 1px black,
+    0px -3px 1px black,
+    0px -4px 1px black,
+    0px -5px 1px black;
 }
 
 form div label {
@@ -86,69 +90,70 @@ form div label {
   text-align: right;
 }
 
-form div input, form div select {
-	float: right;
+form div input,
+form div select {
+  float: right;
 }
 
 form div input {
-	width: 49%;
-	line-height: 1.5;
+  width: 49%;
+  line-height: 1.5;
 }
 
 form div select {
-	width: 50%;
+  width: 50%;
 }
 
 form div option {
-		height: 2rem;
+  height: 2rem;
 }
 
 form div {
-	clear: both;
-	margin: 0 auto;
-	width: 70%;
-	padding-bottom: 4rem;
+  clear: both;
+  margin: 0 auto;
+  width: 70%;
+  padding-bottom: 4rem;
 }
 
 footer {
-	clear: both;
+  clear: both;
 }
 
 img {
-	position: absolute;
-	bottom: 1rem;
-	left: 1rem;
+  position: absolute;
+  bottom: 1rem;
+  left: 1rem;
 }
 
 @media (max-width: 800px) {
-	body > div {
-	  width: 100%;
-	}
+  body > div {
+    width: 100%;
+  }
 }
 
 @media (max-width: 600px) {
-    h1 {
-      font-size: 3rem;
-      top: -2.2rem;
-    }
-
-	form div label {
-      float: none;
-      width: 100%;
-      text-align: left;
-    }
-
-    form div input, form div select {
-	  float: none;
-	  width: 100%;
-    }
-
-    form div {
-	  padding-bottom: 1.5rem;
-    }
-
-    img {
-	  bottom: -4rem;
-    }
-
+  h1 {
+    font-size: 3rem;
+    top: -2.2rem;
+  }
+
+  form div label {
+    float: none;
+    width: 100%;
+    text-align: left;
+  }
+
+  form div input,
+  form div select {
+    float: none;
+    width: 100%;
+  }
+
+  form div {
+    padding-bottom: 1.5rem;
+  }
+
+  img {
+    bottom: -4rem;
+  }
 }
diff --git a/web-workers/simple-shared-worker/style.css b/web-workers/simple-shared-worker/style.css
index 343ad8aa..b7d5d5f3 100644
--- a/web-workers/simple-shared-worker/style.css
+++ b/web-workers/simple-shared-worker/style.css
@@ -1,17 +1,8 @@
 html {
-  background-color: #7d2663;
+  background-color: rgb(230, 230, 230);
   font-family: sans-serif;
 }
 
-h1 {
-  margin: 0;
-  font-size: 15vw;
-  letter-spacing: -0.2rem;
-  position: absolute;
-  top: 0;
-  z-index: -1;
-}
-
 p {
   margin: 0 0 1rem 0;
 }
@@ -20,15 +11,8 @@ p {
   padding: 4vw;
   width: 75%;
   margin: 3vw auto;
-  background-color: rgba(255, 255, 255, 0.7);
-  border: 5px solid black;
-  opacity: 0.3;
-  transition: 1s all;
-}
-
-.controls:hover,
-.controls:focus {
-  opacity: 1;
+  border: 2px solid;
+  border-radius: 6px;
 }
 
 .controls label,
diff --git a/web-workers/simple-web-worker/style.css b/web-workers/simple-web-worker/style.css
index 1e522576..b7d5d5f3 100644
--- a/web-workers/simple-web-worker/style.css
+++ b/web-workers/simple-web-worker/style.css
@@ -1,40 +1,26 @@
 html {
-	background-color: #7D2663;
-	font-family: sans-serif;
-}
-
-h1 {
-	margin: 0;
-	font-size: 20vmin;
-	letter-spacing: -0.2rem;
-	position: absolute;
-	top: 0;
-	z-index: -1;
+  background-color: rgb(230, 230, 230);
+  font-family: sans-serif;
 }
 
 p {
-	margin: 0;
+  margin: 0 0 1rem 0;
 }
 
 .controls {
-	padding: 4vw;
-	width: 75%;
-	margin: 10vw auto;
-	background-color: rgba(255,255,255,0.7);
-	border: 5px solid black;
-	opacity: 0.3;
-	transition: 1s all;
+  padding: 4vw;
+  width: 75%;
+  margin: 3vw auto;
+  border: 2px solid;
+  border-radius: 6px;
 }
 
-.controls:hover, .controls:focus {
-  opacity: 1;
-}
-
-.controls label, .controls p, .controls input {
-	font-size: 3vw;
+.controls label,
+.controls p,
+.controls input {
+  font-size: 3vw;
 }
 
 .controls div {
   padding-bottom: 1rem;
 }
-
diff --git a/webgl-examples/tutorial/tetrahedron/index.html b/webgl-examples/tutorial/tetrahedron/index.html
deleted file mode 100644
index 6074a84f..00000000
--- a/webgl-examples/tutorial/tetrahedron/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <title>WebGL Demo</title>
-    <link rel="stylesheet" href="../webgl.css" type="text/css" />
-  </head>
-
-  <body>
-    <canvas id="glcanvas" width="640" height="480"></canvas>
-  </body>
-
-  <script src="../gl-matrix.js"></script>
-  <script src="webgl-demo.js"></script>
-</html>
diff --git a/webgl-examples/tutorial/tetrahedron/webgl-demo.js b/webgl-examples/tutorial/tetrahedron/webgl-demo.js
deleted file mode 100644
index c07f4543..00000000
--- a/webgl-examples/tutorial/tetrahedron/webgl-demo.js
+++ /dev/null
@@ -1,440 +0,0 @@
-var tetrahedronRotation = 0.0;
-
-main();
-
-//
-// Start here
-//
-function main() {
-  const canvas = document.querySelector("#glcanvas");
-  const gl =
-    canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-
-  // If we don't have a GL context, give up now
-
-  if (!gl) {
-    alert(
-      "Unable to initialize WebGL. Your browser or machine may not support it."
-    );
-    return;
-  }
-
-  // Vertex shader program
-
-  const vsSource = `
-    attribute vec4 aVertexPosition;
-    attribute vec4 aVertexColor;
-
-    uniform mat4 uModelViewMatrix;
-    uniform mat4 uProjectionMatrix;
-
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
-      vColor = aVertexColor;
-    }
-  `;
-
-  // Fragment shader program
-
-  const fsSource = `
-    varying lowp vec4 vColor;
-
-    void main(void) {
-      gl_FragColor = vColor;
-    }
-  `;
-
-  // Initialize a shader program; this is where all the lighting
-  // for the vertices and so forth is established.
-  const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
-
-  // Collect all the info needed to use the shader program.
-  // Look up which attributes our shader program is using
-  // for aVertexPosition, aVevrtexColor and also
-  // look up uniform locations.
-  const programInfo = {
-    program: shaderProgram,
-    attribLocations: {
-      vertexPosition: gl.getAttribLocation(shaderProgram, "aVertexPosition"),
-      vertexColor: gl.getAttribLocation(shaderProgram, "aVertexColor"),
-    },
-    uniformLocations: {
-      projectionMatrix: gl.getUniformLocation(
-        shaderProgram,
-        "uProjectionMatrix"
-      ),
-      modelViewMatrix: gl.getUniformLocation(shaderProgram, "uModelViewMatrix"),
-    },
-  };
-
-  // Here's where we call the routine that builds all the
-  // objects we'll be drawing.
-  const buffers = initBuffers(gl);
-
-  var then = 0;
-
-  // Draw the scene repeatedly
-  function render(now) {
-    now *= 0.001; // convert to seconds
-    const deltaTime = now - then;
-    then = now;
-
-    drawScene(gl, programInfo, buffers, deltaTime);
-
-    requestAnimationFrame(render);
-  }
-
-  requestAnimationFrame(render);
-}
-
-//
-// initBuffers
-//
-// Initialize the buffers we'll need. For this demo, we just
-// have one object -- a simple three-dimensional tetrahedron.
-//
-function initBuffers(gl) {
-  // Create a buffer for the tetrahedron's vertex positions.
-
-  const positionBuffer = gl.createBuffer();
-
-  // Select the positionBuffer as the one to apply buffer
-  // operations to from here out.
-
-  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
-
-  // Now create an array of positions for the tetrahedron.
-  // A equilateral triangle is needed ( well 4 of them )
-  // Point `O` is where the height is projected
-  // The tetrahedron is rotated around point `M`
-  // Height from vertex `A` to the edge `BC` is `H`
-  // The edge of the tetrahedron is 2 units long
-  // |AH| = 1.7320508075688772935274463415059
-  // The median and a height AH divides itself by
-  // the other medians into 1x and 2x ( one part and two parts )
-  // |AH|/3 = 0.57735026918962576450914878050197
-  // Find the tetrahedron height by argument sine (<OAD)
-  // <OAD = 54.735610317245345684622999669982
-  // |DO|  = 1.6329931618554520654648560498039
-  // |DO|/3 = 0.5443310539518173551549520166013
-  // 2 * (|DO|/3) = 1.0886621079036347103099040332026
-  const positions = [
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    1.1547,
-    -0.54433, // C
-
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    0.0,
-    1.08866, // D
-
-    1.0,
-    -0.5773,
-    -0.54433, // B
-    0.0,
-    1.1547,
-    -0.54433, // C
-    0.0,
-    0.0,
-    1.08866, // D
-
-    -1.0,
-    -0.5773,
-    -0.54433, // A
-    0.0,
-    1.1547,
-    -0.54433, // C
-    0.0,
-    0.0,
-    1.08866, // D
-  ];
-
-  // Now pass the list of positions into WebGL to build the
-  // shape. We do this by creating a Float32Array from the
-  // JavaScript array, then use it to fill the current buffer.
-
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
-
-  // Now set up the colors for the faces. We'll use solid colors
-  // for each face.
-
-  const faceColors = [
-    [1.0, 1.0, 1.0, 1.0], // Front face: white
-    [1.0, 0.0, 0.0, 1.0], // Back face: red
-    [0.0, 1.0, 0.0, 1.0], // Top face: green
-    [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
-  ];
-
-  // Convert the array of colors into a table for all the vertices.
-
-  var colors = [];
-
-  for (var j = 0; j < faceColors.length; ++j) {
-    const c = faceColors[j];
-
-    // Repeat each color four times for the four vertices of the face
-    colors = colors.concat(c, c, c);
-  }
-
-  const colorBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
-  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
-
-  // Build the element array buffer; this specifies the indices
-  // into the vertex arrays for each face's vertices.
-
-  const indexBuffer = gl.createBuffer();
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
-
-  // This array defines each face as two triangles, using the
-  // indices into the vertex array to specify each triangle's
-  // position.
-
-  const indices = [
-    0,
-    1,
-    2,
-    0,
-    1,
-    2, // ABC
-    3,
-    4,
-    5,
-    3,
-    4,
-    5, // ABD
-    6,
-    7,
-    8,
-    6,
-    7,
-    8, // BCD
-    9,
-    10,
-    11,
-    9,
-    10,
-    11, // ACD
-    0,
-    0,
-    0,
-    0,
-    0,
-    0, // Dummy1
-    0,
-    0,
-    0,
-    0,
-    0,
-    0, // Dummy2
-  ];
-
-  // Now send the element array to GL
-
-  gl.bufferData(
-    gl.ELEMENT_ARRAY_BUFFER,
-    new Uint16Array(indices),
-    gl.STATIC_DRAW
-  );
-
-  return {
-    position: positionBuffer,
-    color: colorBuffer,
-    indices: indexBuffer,
-  };
-}
-
-//
-// Draw the scene.
-//
-function drawScene(gl, programInfo, buffers, deltaTime) {
-  gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
-  gl.clearDepth(1.0); // Clear everything
-  gl.enable(gl.DEPTH_TEST); // Enable depth testing
-  gl.depthFunc(gl.LEQUAL); // Near things obscure far things
-
-  // Clear the canvas before we start drawing on it.
-
-  gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-  // Create a perspective matrix, a special matrix that is
-  // used to simulate the distortion of perspective in a camera.
-  // Our field of view is 45 degrees, with a width/height
-  // ratio that matches the display size of the canvas
-  // and we only want to see objects between 0.1 units
-  // and 100 units away from the camera.
-
-  const fieldOfView = (45 * Math.PI) / 180; // in radians
-  const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
-  const zNear = 0.1;
-  const zFar = 100.0;
-  const projectionMatrix = mat4.create();
-
-  // note: glmatrix.js always has the first argument
-  // as the destination to receive the result.
-  mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
-
-  // Set the drawing position to the "identity" point, which is
-  // the center of the scene.
-  const modelViewMatrix = mat4.create();
-
-  // Now move the drawing position a bit to where we want to
-  // start drawing the square.
-
-  mat4.translate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to translate
-    [-0.0, 0.0, -6.0]
-  ); // amount to translate
-  mat4.rotate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to rotate
-    tetrahedronRotation, // amount to rotate in radians
-    [0, 0, 1]
-  ); // axis to rotate around (Z)
-  mat4.rotate(
-    modelViewMatrix, // destination matrix
-    modelViewMatrix, // matrix to rotate
-    tetrahedronRotation * 0.7, // amount to rotate in radians
-    [0, 1, 0]
-  ); // axis to rotate around (X)
-
-  // Tell WebGL how to pull out the positions from the position
-  // buffer into the vertexPosition attribute
-  {
-    const numComponents = 3;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
-    gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexPosition,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset
-    );
-    gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
-  }
-
-  // Tell WebGL how to pull out the colors from the color buffer
-  // into the vertexColor attribute.
-  {
-    const numComponents = 4;
-    const type = gl.FLOAT;
-    const normalize = false;
-    const stride = 0;
-    const offset = 0;
-    gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
-    gl.vertexAttribPointer(
-      programInfo.attribLocations.vertexColor,
-      numComponents,
-      type,
-      normalize,
-      stride,
-      offset
-    );
-    gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
-  }
-
-  // Tell WebGL which indices to use to index the vertices
-  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
-
-  // Tell WebGL to use our program when drawing
-
-  gl.useProgram(programInfo.program);
-
-  // Set the shader uniforms
-
-  gl.uniformMatrix4fv(
-    programInfo.uniformLocations.projectionMatrix,
-    false,
-    projectionMatrix
-  );
-  gl.uniformMatrix4fv(
-    programInfo.uniformLocations.modelViewMatrix,
-    false,
-    modelViewMatrix
-  );
-
-  {
-    const vertexCount = 36;
-    const type = gl.UNSIGNED_SHORT;
-    const offset = 0;
-    gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
-  }
-
-  // Update the rotation for the next draw
-
-  tetrahedronRotation += deltaTime;
-}
-
-//
-// Initialize a shader program, so WebGL knows how to draw our data
-//
-function initShaderProgram(gl, vsSource, fsSource) {
-  const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
-  const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
-
-  // Create the shader program
-
-  const shaderProgram = gl.createProgram();
-  gl.attachShader(shaderProgram, vertexShader);
-  gl.attachShader(shaderProgram, fragmentShader);
-  gl.linkProgram(shaderProgram);
-
-  // If creating the shader program failed, alert
-
-  if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
-    alert(
-      "Unable to initialize the shader program: " +
-        gl.getProgramInfoLog(shaderProgram)
-    );
-    return null;
-  }
-
-  return shaderProgram;
-}
-
-//
-// creates a shader of the given type, uploads the source and
-// compiles it.
-//
-function loadShader(gl, type, source) {
-  const shader = gl.createShader(type);
-
-  // Send the source to the shader object
-
-  gl.shaderSource(shader, source);
-
-  // Compile the shader program
-
-  gl.compileShader(shader);
-
-  // See if it compiled successfully
-
-  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
-    alert(
-      "An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader)
-    );
-    gl.deleteShader(shader);
-    return null;
-  }
-
-  return shader;
-}