@charset "UTF-8"; @font-face { font-family: 'Droid Serif'; font-style: normal; font-weight: 400; font-display: swap; src: local("Droid Serif Regular"), local("DroidSerif-Regular"), url(/resources/fonts/droid-serif.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Droid Serif'; font-style: italic; font-weight: 400; font-display: swap; src: local("Droid Serif Italic"), local("DroidSerif-Italic"), url(/resources/fonts/droid-serif-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Droid Sans Mono'; font-style: normal; font-weight: 400; font-display: swap; src: local("Droid Sans Mono Regular"), local("DroidSansMono-Regular"), url(/resources/fonts/droid-sans-mono.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } html { font: 400 0.9em "Droid Serif", Cambria, Big Carslon, Lucida Bright, Georgia, "DejaVu Serif", serif; } :root { --sans: -apple-system, BlinkMacSystemFont, San Francisco, Helvetica Neue, Helvetica, Ubuntu, Roboto, Noto, Segoe UI, Arial, sans-serif; } * { box-sizing: border-box; } :root { --body-left: 0px; --body-right: 0px; --body-padding: 10px; } @media (min-width: 850px) and (max-width: 1000px) { :root { --body-left: 25px; --body-right: 15px; } } @media (min-width: 1000px) { :root { --body-left: 50px; --body-right: 30px; --body-padding: 20px; } } @media (min-width: 1600px) { :root { --body-left: 80px; --body-right: 50px; --body-padding: 30px; } } html { margin: 0; overflow-x: hidden; } body { margin: calc(2.4rem + 16px) var(--body-right) 0 var(--body-left); padding: 0 var(--body-padding); background-color: #fafafa; } #content { font-size: 1.2em; line-height: 1.4; max-width: 60rem; margin: auto; } #content p { padding-right: 7pt; } h1.title { display: none; } h3 { display: none; font-size: 1.4em; } .outline-3 { background-color: #ebebeb; border-left: 4px solid #587e72; padding: 5pt; width: 27em; max-width: 80%; font-size: 1em; margin-top: 20pt; } .outline-3 p { margin: 3pt; padding: 0; } h2 { display: block; padding-top: 30px; font-size: 1.8em; margin-top: 0; margin-bottom: 30pt; line-height: 1.1; } .outline-2 { font-size: 1em; margin-top: 40px; width: 100%; } *.outline-2 img { margin-left: 50px; max-width: 80%; } *.outline-2 p { margin-right: 5px; margin-left: 5px; padding-right: 5px; padding-left: 5px; } .org-right { margin-left: auto; margin-right: 0px; text-align: right; } .org-left { margin-left: 0px; margin-right: auto; text-align: left; } .org-center { margin-left: auto; margin-right: auto; text-align: center; } table { border-collapse: collapse; } caption.t-above { caption-side: top; } caption.t-bottom { caption-side: bottom; } td, th { vertical-align: top; } th.org-right { text-align: center; } th.org-left { text-align: center; } th.org-center { text-align: center; } td.org-right { text-align: right; } td.org-left { text-align: left; } td.org-center { text-align: center; } dt { font-weight: bold; } dd { margin-bottom: 0.5em; } .footpara { display: inline; } .footdef { margin-bottom: 1em; } .figure { padding: 1em; } .figure p { text-align: center; } .equation-container { display: table; text-align: center; width: 100%; } .equation { vertical-align: middle; } .equation-label { display: table-cell; text-align: right; vertical-align: middle; } img.inline { height: 1em; margin-bottom: -0.15em; } #a-quote { font-style: italic; opacity: 0.7; } .inline { display: inline-block; } nav#main { background-color: #689486; background-image: url(/resources/img/greenteselatedband.png); background-size: auto calc(2.5rem + 16px); background-repeat: repeat-x; padding: 8px; margin-bottom: 20px; display: flex; justify-content: center; font-size: 1.2rem; font-family: var(--sans); /* fix the position for now - easy solution */ position: fixed; width: 100vw; top: 0; left: 0; z-index: 1; line-height: 2em; } nav#main a { padding: 0 10px; text-decoration: none; font-weight: 500; color: #fff; } nav#main a p.logo { display: inline-block; font-weight: 700; margin: 0; color: #323232; } nav#main a p.logo img { height: 2em; margin-bottom: -0.8em; position: relative; top: -0.2em; } nav#main #translate { position: absolute; left: 1em; color: #eeeeee; font-weight: bold; } nav#main #translate a { color: #d5d5d5; font-weight: bold; padding: 0px; margin: 0 -2px 0 -2px; } nav#main label, nav#main input { display: none; } @media (max-width: 850px) { nav#main { flex-direction: column; } nav#main label { display: block; font-weight: 700; color: #fff; line-height: 1; font-size: 1.6em; } nav#main > a:first-of-type { margin-top: -1.8em; } nav#main > a:last-child { margin-bottom: -8px; z-index: 0; } nav#main p { align-self: center; margin-bottom: -0.4em; } nav#main a, nav#main #translate { display: none; align-self: center; } nav#main #translate { left: 0; right: 0; bottom: 0; margin-top: 0.35em; height: 1.9em; line-height: 1.7; text-align: right; padding-right: 1em; background-color: #fff4; } nav#main a.view-source { position: relative; align-self: baseline; background-color: transparent; font-size: 0.9em; line-height: 1; margin-left: 10pt; padding-bottom: 3pt; top: 2px; } nav#main a.view-source::after { content: ' view source'; font-weight: 400; } nav#main input:checked ~ a, nav#main input:checked ~ #translate { display: block; } nav#main input:checked ~ #translate a { display: inline-block; } } h2[id]:target { padding-top: calc(40px + 2rem); } button.btn, a.btn { display: inline-block; padding: 8px 15px; border-radius: 3px; margin: 5px 0px; color: #fafafa; background-color: #77aa99; } button.btn:hover, a.btn:hover { text-decoration: none; color: #fafafa; background-color: #587e72; } a { text-decoration: none; color: #567b70; } a:visited { text-decoration: none; } a:not(.btn):hover { text-decoration: underline; filter: brightness(85%); } a[href^="https://orgmode.org"]:not(.btn):hover, a:not(.btn):not([href^="https://"]):not([href^="http://"]):hover { text-decoration: underline dashed; } code, kbd { font-family: "Droid Sans Mono"; hyphens: none; word-break: break-word; white-space: normal; word-wrap: break-word; } code { color: #323232; background-color: #e6e6e6; border-radius: 4px; padding: 2px 4px; font-size: 85%; } kbd { background-color: whitesmoke; border: 1px solid #323232; border-radius: 3px; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2), 0 0 0 2px #fff inset; color: #323232; line-height: 1.4; margin: 0 .1em; padding: .1em .6em; text-shadow: 0 1px 0 #fff; font-size: 75%; } pre { font-family: "Droid Sans Mono", monospace; font-size: .8em; font-weight: normal; line-height: 1.4em; background-color: #eeeeee; border-left: 4px solid #aaaaaa; margin-right: 1pt; padding: 0.4em 0.6em; overflow-x: auto; } pre.src { position: relative; } pre.src::before { display: none; position: absolute; right: 10px; padding: 3px; background-color: rgba(238, 238, 238, 0.8); color: #555555; top: 0; } pre.src:hover::before { display: inline; } pre.src-org:before { content: 'Org mode'; } pre.src-shell:before { content: 'Shell'; } pre.src-emacs-lisp:before { content: 'Elisp'; } .example { color: #2c3e50; } .src { color: #2c3e50; } .src .org-keyword { color: #3a81c3; } .src .org-variable-name { color: #715ab1; } .src .org-rainbow-delimiters-depth-1, .src .org-rainbow-delimiters-depth-2, .src .org-rainbow-delimiters-depth-3, .src .org-rainbow-delimiters-depth-4, .src .org-rainbow-delimiters-depth-5, .src .org-rainbow-delimiters-depth-6, .src .org-rainbow-delimiters-depth-7, .src .org-rainbow-delimiters-depth-8, .src .org-rainbow-delimiters-depth-9 { color: #555555; } .src .org-string { color: #2d9574; } .src .org-comment, .src .org-comment-delimiter { color: #555555; } .src .org-function-name { color: #6c3163; } .src .org-constant, .src .org-highlight-numbers-number, .src .org-builtin { color: #4e3163; } div.side-fig { max-width: 1600px; margin: auto; display: flex; flex-wrap: wrap-reverse; flex-direction: row-reverse; justify-content: space-evenly; position: relative; padding-top: 5rem; } div.side-fig h2 { position: absolute; top: 0; width: 100%; left: 0; text-align: center; } @media (min-width: 850px) { div.side-fig h2 { width: 95%; } } div.side-fig h2:target { top: calc(-10px - 3rem); } div.side-fig > div.outline-text-2 > figure { width: min(600px, 100vw); margin: 26px 0 10px 0; } @media (min-width: 850px) { div.side-fig > div.outline-text-2 > figure { width: min(700px, 50vw); } } div.side-fig > div.outline-text-2 > figure img, div.side-fig > div.outline-text-2 > figure object { width: 100%; margin-left: 0; max-height: 500px; object-fit: contain; object-position: left center; } div.side-fig > div.outline-text-2 .move { position: absolute; top: 5rem; left: 0; width: 100%; text-align: center; } @media (max-width: 1800px) { div.side-fig > div.outline-text-2 .move { display: none; } } div.side-fig > div.outline-3 { border: none; background-color: transparent; width: 600px; max-width: 100%; } div.side-fig > div.outline-3 > div.outline-4 { background-color: #ebebeb; border-left: 4px solid #587e72; padding: 5px; } div.side-fig > div.outline-3 > div.outline-4 h4 { display: none; } div.banner { margin-left: min(calc(0px - var(--body-left) - var(--body-padding)), calc(30rem - 50vw - 0.5*var(--body-left) + 0.5*var(--body-right))); width: 100vw; padding: 10px 5px 10px 5px; text-align: center; font-size: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-evenly; align-items: center; } div.banner #a-quote { flex-basis: 100%; max-width: none; } div.banner.slim { padding: 0.5rem 1rem; font-size: 1rem; font-family: var(--sans); } div.banner.inline { display: flex; flex-wrap: wrap; justify-content: space-evenly; } div.banner.inline p { display: inline-block; margin: 0.2em; } div.banner.grey { background-color: #f1f1f1; } div.banner.grey a { color: #121212; font-weight: bold; } div.banner.faded { color: #505050; } div.banner.faded a { color: #505050; } div.banner p.small { font-size: 0.7em; } .columns { display: flex; flex-wrap: wrap; justify-content: center; max-width: none; width: 100%; margin-top: 0; position: relative; } .columns.no-heading h2 { display: none; } .columns h2 { position: absolute; left: 0; top: -1.2em; } .columns .outline-3 { background: none; border: none; text-align: center; width: 18rem; min-height: 10rem; margin-top: 1rem; } .columns .outline-3 a { display: block; text-decoration: none; color: inherit; } .columns .outline-3 a a { display: initial; } .columns .outline-3 figure { margin: 0; } .columns .outline-3 .org-svg, .columns .outline-3 img { width: auto; margin-left: 0; height: 9rem; max-width: 80%; padding-bottom: 2.5rem; pointer-events: none; } .columns .outline-3 h3 { display: block; position: relative; top: 7rem; margin-bottom: -2.5rem; pointer-events: none; height: 1em; width: 110%; margin-left: -5%; } .starred { position: relative; } .starred::before { content: '🟊'; text-align: right; padding: 0 1.5px 4px 2.5px; line-height: 0.9; width: 22px; height: 22px; background: #74a5d4; color: #fafafa; position: absolute; top: 0; right: 0; clip-path: polygon(0 0, 100% 100%, 100% 0); } #postamble { text-align: center; background: #eaeaea; color: #4d4d4d; font-family: var(--sans); font-family: var(--sans); padding: 0.4rem 0; margin: 5rem calc(0px - var(--body-right) - var(--body-padding)) 0 calc(0px - var(--body-left) - var(--body-padding)); } #postamble p { display: inline; margin: 0; } #postamble p a:hover { text-decoration: none; } #postamble p:not(:first-child) { margin-left: 1rem; } #src { position: fixed; left: 0; top: 0; border: none; width: 100%; height: 100%; overflow-y: auto; padding-top: calc(2.3rem + 16px); } @media (max-width: 850px) { #src { padding-top: calc(1.4rem + 16px); } }