@media amzn-kf8{#header,#content,#footnotes,#footer{padding:0}}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
+<head>
+<!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=DotGothic16"> -->
+<!-- <link rel="icon" type="image/x-icon" href="https://raw.githubusercontent.com/A-Larsen/math-notes/refs/heads/main/favicon.png"> -->
+<!-- <link rel="icon" type="image/png" href="N2DE_favicon.png"/> -->
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
+<!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
+<!-- <link href="https://fonts.googleapis.com/css2?family=Abril+Fatface&display=swap" rel="stylesheet"> -->
+<style>
+
+/*--------------------------------------------------------------*/
+/*use '!important' to override default css used by asciidoctor*/
+/*--------------------------------------------------------------*/
+
+:root {
+ --gruvbox-black: #282828;
+ --gruvbox-black2: #1d2021;
+ --gruvbox-black3: #463f39;
+ --gruvbox-red: #fc7869;
+ --gruvbox-yellow: #fabd2f;
+ --gruvbox-white: #ebdbb2;
+ --gruvbox-white2: #a7a187;
+ --gruvbox-blue: #83a598;
+ --gruvbox-green: #b8bb26;
+ --gruvbox-bg1: #7c6f64;
+ --gruvbox-bg2: #665c54;
+}
+
+.title {
+ color: var(--gruvbox-red) !important;
+}
+
+blockquote {
+ color: var(--gruvbox-white) !important;
+}
+
+table {
+ margin: 0 auto !important;
+ margin-bottom: 20px !important;
+}
+
+.hdlist1 {
+ /*font-size: 1.3em;*/
+ text-decoration: underline;
+}
+
+/* for list element definitions * *define-me*: */
+li strong {
+ /*text-decoration: underline;*/
+ border-radius: .2;
+ color: grey;
+}
+
+cite {
+ color: var(--gruvbox-green) !important;
+}
+
+.tableblock {
+ background-color: inherit;
+ color: var(--gruvbox-white);
+ max-width: 95%;
+}
+
+.tableblock th {
+ background-color: var(--gruvbox-black3);
+ color: var(--gruvbox-white);
+ max-width: 97%;
+}
+
+code:not([data-lang]) {
+ background-color: var(--gruvbox-bg2) !important;
+ color: var(--gruvbox-white);
+ text-shadow: none;
+}
+
+.checklist {
+ text-align: left;
+}
+
+.checklist li ul { margin-left: 3%; }
+
+#content, h1, pre {
+ border-radius: 8px !important;
+}
+
+#header, #content, #footnotes, #footer {
+ padding-left: 0 !important;
+ padding-right: 0 !important;
+}
+
+.api-type a:hover {
+ text-decoration: underline;
+}
+
+.api-type, .api-type a {
+ color: var(--gruvbox-green);
+ text-decoration: none;
+}
+
+pre {
+ border-style: solid !important;
+ border-color: white !important;
+ border-width: 2px !important;
+}
+
+h1 {
+ /* font-family: "DotGothic16", sans-serif !important;*/
+
+
+ background-color: var(--gruvbox-white2) !important;
+ color: var(--gruvbox-black) !important;
+}
+
+.admonitionblock > table td.content {
+ color: var(--gruvbox-white) !important;
+}
+
+/*
+html {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+
+
+*/
+/*html {*/
+
+body {
+ /*background: black url("background-image-space.jpeg") no-repeat fixed center;*/
+ /*background-color: black;*/
+ background-color: var(--gruvbox-black);
+ background-attachment: fixed;
+ background-size: cover;
+ overflow-y: scroll;
+ /*
+ margin: 0;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ */
+}
+
+
+/*
+body {
+ overflow-y: scroll;
+ background: rgba(0,0,0,0);
+ height: 100%;
+ margin: 2%;
+}
+*/
+
+#toc {
+ background-color: var(--gruvbox-black2) !important;
+ /*opacity: .9;*/
+}
+
+#toctitle {
+ color: var(--gruvbox-yellow);
+}
+
+a {
+ color: var(--gruvbox-bg1);
+}
+
+#content {
+ color: #ebdbb2;
+ background: var(--gruvbox-black);
+ /*opacity: .9;*/
+}
+
+#header > h1:nth-last-child(2) {
+ border-bottom: none !important;
+ background-color: rgba(0, 0, 0, .1);
+ padding-left: 2%;
+}
+
+.sect1 {
+ padding-bottom: 0;
+}
+
+.sect1 + .sect1 {
+ border-top: none !important;
+}
+
+.sect1 h2 {
+ background-size: cover;
+ background-attachment: fixed;
+ /*
+ border-bottom: 1px solid var(--gruvbox-white);
+ border-top: 1px solid var(--gruvbox-white);
+ */
+ padding: 10px;
+ text-align: left;
+ color: var(--gruvbox-red) !important;
+ /*
+ text-shadow: 1px 1px 1px var(--gruvbox-black);
+ text-shadow: 3px 3px 3px var(--gruvbox-black);
+ text-shadow: 5px 5px 5px var(--gruvbox-blue);
+ border-bottom: solid;
+ */
+ width: fit-content;
+}
+
+h3, h4, h5 {
+ /*
+ text-shadow: 1px 1px 1px var(--gruvbox-white);
+ */
+}
+
+h3 {
+ color: var(--gruvbox-green) !important;
+ opacity: 80%;
+}
+
+h4 {
+ color: var(--gruvbox-yellow) !important;
+}
+
+h5 {
+ color: #83a598 !important;
+}
+
+h2 ~ *:not(h1) {
+ margin-left: .5em;
+}
+
+.pygments {
+ max-width: 97% !important;
+ white-space: pre;
+ overflow-x: scroll !important;
+}
+
+::before {
+ /*makes sure that the programming language that show up on hover is within
+ pre tag*/
+ padding-right: 3%;
+}
+
+@media screen and (max-width: 800px) {
+ .checklist li ul {
+ margin-left: 6% !important;
+ }
+ #toc {
+ padding-left: 10px;
+ }
+
+ footer {
+ margin-bottom: 10px !important;
+ }
+ html {
+ margin-bottom: 10px !important;
+ }
+}
+@media screen and (max-width: 535px) {
+ h3 ~ *:not(h2):not(h3) {
+ margin-left: 0 !important;
+ }
+
+ h4 ~ *:not(h2):not(h3):not(.h3):not(h4) {
+ margin-left: 0 !important;
+ }
+ h5 ~ *:not(h2):not(h3):not(.h3):not(h4):not(.h4):not(h5) {
+ margin-left: 0 !important;
+ }
+
+ footer {
+ margin-bottom: 10px !important;
+ }
+ html {
+ margin-bottom: 10px !important;
+ }
+}
+h3 ~ *:not(h2):not(h3) {
+ margin-left: 1.5em;
+}
+
+h4 ~ *:not(h2):not(h3):not(.h3):not(h4) {
+ margin-left: 2em;
+}
+h5 ~ *:not(h2):not(h3):not(.h3):not(h4):not(.h4):not(h5) {
+ margin-left: 2.5em;
+}
+
+
+.sect1 h2 {
+
+ /*
+ background: linear-gradient(
+ to bottom,
+ rgba(251, 189, 47, 0.2), /* yellow */
+ rgba(0, 0, 0, 0.4) /* black */
+ );
+ */
+ /*opacity: .9;*/
+ }
+
+#preamble p{
+ padding-left: 10px;
+ color: var(--gruvbox-white) !important;
+}
+
+#footer {
+ max-width: 62.5em !important;
+ padding-left: 10px !important;
+ text-align: center;
+}
+
+.logo img {
+ display: block !important;
+ margin-left: auto !important;
+ margin-right: auto !important;
+}
+
+#header > h1:first-child {
+ margin-top: .3em !important;
+ padding-top: .2em !important;
+ text-align: center;
+}
+
+footer {
+ max-width: 62.5em;
+ margin-left: auto;
+ margin-right: auto;
+ display: block;
+
+}
+
+details[open] > summary::before {
+ /* display: none;*/
+ border-top: none;
+ content: "▼";
+ margin-top: -12px;
+}
+
+.example.stemblock {
+ border: solid;
+ font-size: 2vw;
+ max-width: 40%;
+ margin: auto;
+}
+
+.exampleblock >.content {
+ background: var(--gruvbox-black);
+ border-color: #e0e0dc;
+ box-shadow: 3px 2px 9px #e0e0dc;
+}
+
+.center {
+ max-width: 500px;
+ display: flex;
+ justify-content: center;
+}
+
+.highlight {
+ color: var(--gruvbox-yellow)
+}
+
+.border {
+ padding: 4px;
+ border: 2px solid rgba(255, 0, 0, .3);
+}
+
+.dull {
+ opacity: 40%;
+}
+
+.inline {
+ margin-right: 5%;
+ display: inline-block;
+}
+
+img {
+ margin: auto;
+ width: 100%;
+}
+
+/* ================= SCROLLBARS (WebKit) ================= */
+::-webkit-scrollbar {
+ width: 8px;
+}
+
+::-webkit-scrollbar-thumb {
+ background: var(--gruvbox-bg1);
+ border-radius: 4px;
+}
+
+::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+div.ulist {
+ max-width: 95%;
+}
+
+.paragraph {
+ max-width: 98%;
+}
+
+.todo-list li .checkbox {
+ display: inline-block; /* already set */
+ width: 1.5em; /* fixed width */
+ height: 1.5em; /* keep height same */
+ margin-right: 0.5em;
+ vertical-align: middle; /* align with text nicely */
+ text-align: center;
+}
+
+li.started .checkbox {
+ color: var(--gruvbox-yellow);
+}
+
+li.completed .checkbox {
+ color: var(--gruvbox-green);
+}
+
+li.empty .checkbox {
+ color: var(--gruvbox-red);
+}
+
+.todo-list li {
+ font-family: "inherit"; /* inherits whatever body is using */
+ line-height: 1.4em; /* optional: keep spacing nice */
+}
+
+ul.checklist li p {
+ font-size: 1.2em; /* same as body text */
+}
+
+
+
+
+div#header {
+ background-color: var(--gruvbox-blue);
+ height: 100px;
+ top: 0px;
+ background-color: var(--gruvbox-black);
+ z-index: 1000;
+}
+
+
+</style>
+
+</head>
+
+<script>
+function sendHeight() {
+ const height = document.documentElement.scrollHeight;
+ parent.postMessage({ type: "HEIGHT", height }, "*");
+}
+
+window.addEventListener("load", sendHeight);
+window.addEventListener("resize", sendHeight);
+
+/*
+document.addEventListener("keydown", (e) => {
+ if (e.key === "o") {
+ e.preventDefault();
+ parent.postMessage({ type: "CLOSE_NOTES" }, "*");
+ }
+});
+*/
+let scrollKeys = { j: false, k: false };
+let isScrolling = false;
+const SCROLL_SPEED = 10; // pixels per frame
+
+function scrollStep() {
+ let delta = 0;
+ if (scrollKeys.j) delta += SCROLL_SPEED;
+ if (scrollKeys.k) delta -= SCROLL_SPEED;
+
+ if (delta !== 0) {
+ window.scrollBy(0, delta);
+ requestAnimationFrame(scrollStep);
+ } else {
+ isScrolling = false;
+ }
+}
+
+document.addEventListener("keydown", (e) => {
+ const tag = document.activeElement.tagName;
+ if (tag === "INPUT" || tag === "TEXTAREA" || document.activeElement.isContentEditable) return;
+
+ if (e.key === "j" || e.key === "k") {
+ e.preventDefault();
+ scrollKeys[e.key] = true;
+
+ if (!isScrolling) {
+ isScrolling = true;
+ requestAnimationFrame(scrollStep);
+ }
+ }
+ if(e.key === "o") {
+ e.preventDefault();
+ parent.postMessage({ type: "CLOSE_NOTES" }, "*");
+ }
+});
+
+document.addEventListener("keyup", (e) => {
+ if (e.key === "j" || e.key === "k") {
+ scrollKeys[e.key] = false;
+ }
+});
+
+
+
+window.onload = function () {
+
+ // Select all checklist ULs
+ document.querySelectorAll('ul.checklist').forEach(function(ul) {
+ ul.classList.add('todo-list');
+
+ ul.querySelectorAll('li').forEach(function(li) {
+ const p = li.querySelector('p');
+ if (!p) return;
+
+ const text = p.textContent.trim();
+
+ let state = '';
+ if (text.startsWith('❏')) {
+ state = 'empty';
+ } else if (text.startsWith('✓')) {
+ state = 'started';
+ } else if (text.startsWith('[X]')) {
+ state = 'completed';
+ } else {
+ return;
+ }
+
+ li.classList.add(state);
+
+ // Remove the marker
+ let content = '';
+ if (state === 'completed') {
+ content = text.slice(3).trim();
+ } else {
+ content = text.slice(1).trim();
+ }
+
+ // Only rewrite the first <p>, keep nested divs/lists intact
+ p.innerHTML = '';
+
+ const checkbox = document.createElement('span');
+ checkbox.className = 'checkbox';
+
+ /*
+ if (state === 'empty') checkbox.textContent = '🌑';
+ else if (state === 'started') checkbox.textContent = '🌓';
+ else if (state === 'completed') checkbox.textContent = '🌕';
+ */
+ if (state === 'empty') checkbox.textContent = '☐';
+ else if (state === 'started') checkbox.textContent = '◪';
+ else if (state === 'completed') checkbox.textContent = '▣';
+
+ p.appendChild(checkbox);
+ p.appendChild(document.createTextNode(' ' + content));
+ });
+});
+
+};
+window.addEventListener("load", e => {
+ // Request the scroll position as soon as the iframe is loaded
+ window.parent.postMessage({
+ type: "SCROLL_REQUEST_GET"
+ }, "*");
+});
+
+// Capture scroll position while scrolling
+window.addEventListener("scroll", e => {
+ const scrollPosition = window.scrollY || document.documentElement.scrollTop;
+ window.parent.postMessage({
+ type: "SCROLL_REQUEST_SET",
+ scrollPosition: scrollPosition
+ }, "*");
+});
+
+// Receive messages to set the scroll position
+window.addEventListener("message", (e) => {
+ if (e.data.type === "SCROLL_POSITION") {
+ // Set the scroll position to the iframe
+ window.scrollTo(0, e.data.scrollPosition);
+ }
+});
+</script>
</head>
<body class="article">
<div id="header">