app: Refactor and CSS rewrite

5 files changed, 1615 insertions, 2688 deletions

diff --git a/public/css/bulma-timeline.css b/public/css/bulma-timeline.css
deleted file mode 100644
index b1476be..0000000
--- a/public/css/bulma-timeline.css
+++ /dev/null
@@ -1,754 +0,0 @@
-@-webkit-keyframes spinAround {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0)
-    }
-
-    to {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg)
-    }
-
-}
-
-@keyframes spinAround {
-    from {
-        -webkit-transform: rotate(0);
-        transform: rotate(0)
-    }
-
-    to {
-        -webkit-transform: rotate(359deg);
-        transform: rotate(359deg)
-    }
-
-}
-
-.timeline {
-    display: flex;
-    flex-direction: column
-}
-
-.timeline .timeline-header {
-    width: 4em;
-    min-width: 4em;
-    max-width: 8em;
-    word-wrap: normal;
-    text-align: center;
-    display: flex;
-    justify-content: center
-}
-
-.timeline .timeline-item {
-    display: flex;
-    display: -webkit-flex;
-    position: relative;
-    margin-left: 0.35em;
-    padding-bottom: 2em
-}
-
-.timeline .timeline-item::before {
-    content: "";
-    background-color: #dbdbdb;
-    display: block;
-    width: 1px;
-    height: 100%;
-    position: absolute;
-    left: 0;
-    top: 0
-}
-
-.timeline .timeline-item .timeline-marker {
-    position: absolute;
-    background: #b3cfe6;
-    border: 3px solid #fff;
-    border-radius: 100%;
-    content: "";
-    display: block;
-    height: .8em;
-    left: -.35em;
-    top: 1.2rem;
-    width: .8em
-}
-
-.timeline .timeline-item .timeline-marker.is-image {
-    background: #dbdbdb;
-    border: .1em solid #dbdbdb;
-    border-radius: 100%;
-    display: block;
-    overflow: hidden
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-16x16 {
-    height: 16px;
-    width: 16px;
-    left: -8px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-24x24 {
-    height: 24px;
-    width: 24px;
-    left: -12px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-32x32 {
-    height: 32px;
-    width: 32px;
-    left: -16px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-48x48 {
-    height: 48px;
-    width: 48px;
-    left: -24px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-64x64 {
-    height: 64px;
-    width: 64px;
-    left: -32px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-96x96 {
-    height: 96px;
-    width: 96px;
-    left: -48px
-}
-
-.timeline .timeline-item .timeline-marker.is-image.is-128x128 {
-    height: 128px;
-    width: 128px;
-    left: -64px
-}
-
-.timeline .timeline-item .timeline-marker.is-icon {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 1.5em;
-    width: 1.5em;
-    left: -.7em;
-    line-height: .75rem;
-    padding: .25rem;
-    background: #dbdbdb;
-    border: .1em solid #dbdbdb;
-    border-radius: 100%
-}
-
-.timeline .timeline-item .timeline-marker.is-icon>i {
-    color: #fff;
-    font-size: .75rem !important
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined .image {
-    background: #fff
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined.is-icon {
-    background: #fff
-}
-
-.timeline .timeline-item .timeline-marker.is-outlined.is-icon>i {
-    color: #dbdbdb
-}
-
-.timeline .timeline-item .timeline-marker.is-white {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white .image {
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-icon {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-icon>i {
-    color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined {
-    background-color: #fff !important;
-    border-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-white.is-outlined.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black {
-    background-color: #0a0a0a !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black .image {
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-icon {
-    background-color: #0a0a0a !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined {
-    background-color: #fff !important;
-    border-color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-black.is-outlined.is-icon>i {
-    color: #0a0a0a !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light {
-    background-color: #f5f5f5 !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light .image {
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-icon {
-    background-color: #f5f5f5 !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-icon>i {
-    color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined {
-    background-color: #fff !important;
-    border-color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-light.is-outlined.is-icon>i {
-    color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark {
-    background-color: #363636 !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark .image {
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-icon {
-    background-color: #363636 !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-icon>i {
-    color: #f5f5f5 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined {
-    background-color: #fff !important;
-    border-color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-dark.is-outlined.is-icon>i {
-    color: #363636 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary {
-    background-color: #00d1b2 !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary .image {
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-icon {
-    background-color: #00d1b2 !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined {
-    background-color: #fff !important;
-    border-color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-primary.is-outlined.is-icon>i {
-    color: #00d1b2 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link {
-    background-color: #3273dc !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link .image {
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-icon {
-    background-color: #3273dc !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined {
-    background-color: #fff !important;
-    border-color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-link.is-outlined.is-icon>i {
-    color: #3273dc !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info {
-    background-color: #209cee !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info .image {
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-icon {
-    background-color: #209cee !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined {
-    background-color: #fff !important;
-    border-color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-info.is-outlined.is-icon>i {
-    color: #209cee !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success {
-    background-color: #23d160 !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success .image {
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-icon {
-    background-color: #23d160 !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined {
-    background-color: #fff !important;
-    border-color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-success.is-outlined.is-icon>i {
-    color: #23d160 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning {
-    background-color: #ffdd57 !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning .image {
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-icon {
-    background-color: #ffdd57 !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-icon>i {
-    color: rgba(0, 0, 0, .7) !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined {
-    background-color: #fff !important;
-    border-color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-warning.is-outlined.is-icon>i {
-    color: #ffdd57 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger {
-    background-color: #ff3860 !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger .image {
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-icon {
-    background-color: #ff3860 !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-icon>i {
-    color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined {
-    background-color: #fff !important;
-    border-color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined .image {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon {
-    background-color: #fff !important
-}
-
-.timeline .timeline-item .timeline-marker.is-danger.is-outlined.is-icon>i {
-    color: #ff3860 !important
-}
-
-.timeline .timeline-item .timeline-content {
-    padding: 1em 0 0 .5em;
-    padding: 1em 0 0 2em
-}
-
-.timeline .timeline-item .timeline-content .heading {
-    font-weight: 600
-}
-
-.timeline .timeline-item.is-white::before {
-    background-color: #fff
-}
-
-.timeline .timeline-item.is-black::before {
-    background-color: #0a0a0a
-}
-
-.timeline .timeline-item.is-light::before {
-    background-color: #f5f5f5
-}
-
-.timeline .timeline-item.is-dark::before {
-    background-color: #363636
-}
-
-.timeline .timeline-item.is-primary::before {
-    background-color: #00d1b2
-}
-
-.timeline .timeline-item.is-link::before {
-    background-color: #3273dc
-}
-
-.timeline .timeline-item.is-info::before {
-    background-color: #209cee
-}
-
-.timeline .timeline-item.is-success::before {
-    background-color: #23d160
-}
-
-.timeline .timeline-item.is-warning::before {
-    background-color: #ffdd57
-}
-
-.timeline .timeline-item.is-danger::before {
-    background-color: #ff3860
-}
-
-.timeline.is-centered .timeline-header {
-    display: flex;
-    width: 100%;
-    align-self: center
-}
-
-.timeline.is-centered .timeline-item {
-    width: 50%;
-    align-self: flex-end
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) {
-    align-self: flex-start;
-    margin-left: 0;
-    margin-right: 2em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n)::before {
-    right: -.1em;
-    left: auto
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker {
-    left: auto;
-    right: -.45em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-16x16 {
-    left: auto;
-    right: -8px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-24x24 {
-    left: auto;
-    right: -12px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-32x32 {
-    left: auto;
-    right: -16px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-48x48 {
-    left: auto;
-    right: -24px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-64x64 {
-    left: auto;
-    right: -32px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-96x96 {
-    left: auto;
-    right: -48px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-image.is-128x128 {
-    left: auto;
-    right: -64px
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-marker.is-icon {
-    left: auto;
-    right: -.8em
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n) .timeline-content {
-    padding: 1em 2em 0 0;
-    text-align: right;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    flex-basis: 100%
-}
-
-.timeline.is-centered .timeline-item:nth-of-type(2n+1)::before {
-    content: "";
-    background-color: #dbdbdb;
-    display: block;
-    width: .1em;
-    height: 100%;
-    position: absolute;
-    top: 0
-}
-
-.timeline.is-centered .timeline-item.is-white::before {
-    background-color: #fff
-}
-
-.timeline.is-centered .timeline-item.is-black::before {
-    background-color: #0a0a0a
-}
-
-.timeline.is-centered .timeline-item.is-light::before {
-    background-color: #f5f5f5
-}
-
-.timeline.is-centered .timeline-item.is-dark::before {
-    background-color: #363636
-}
-
-.timeline.is-centered .timeline-item.is-primary::before {
-    background-color: #00d1b2
-}
-
-.timeline.is-centered .timeline-item.is-link::before {
-    background-color: #3273dc
-}
-
-.timeline.is-centered .timeline-item.is-info::before {
-    background-color: #209cee
-}
-
-.timeline.is-centered .timeline-item.is-success::before {
-    background-color: #23d160
-}
-
-.timeline.is-centered .timeline-item.is-warning::before {
-    background-color: #ffdd57
-}
-
-.timeline.is-centered .timeline-item.is-danger::before {
-    background-color: #ff3860
-}
-
-.timeline.is-rtl {
-    justify-content: flex-end;
-    align-items: flex-end
-}
-
-.timeline.is-rtl .timeline-item {
-    justify-content: flex-end;
-    border-left: none;
-    margin-left: 0;
-    margin-right: 2em
-}
-
-.timeline.is-rtl .timeline-item::before {
-    right: 0;
-    left: auto
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker {
-    left: auto;
-    right: -.35em
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-16x16 {
-    left: auto;
-    right: -8px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-24x24 {
-    left: auto;
-    right: -12px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-32x32 {
-    left: auto;
-    right: -16px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-48x48 {
-    left: auto;
-    right: -24px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-64x64 {
-    left: auto;
-    right: -32px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-96x96 {
-    left: auto;
-    right: -48px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-image.is-128x128 {
-    left: auto;
-    right: -64px
-}
-
-.timeline.is-rtl .timeline-item .timeline-marker.is-icon {
-    left: auto;
-    right: -.7em
-}
-
-.timeline.is-rtl .timeline-item .timeline-content {
-    padding: 1em 2em 0 0;
-    text-align: right
-}
-
-.timeline.no-headers .timeline-item.is-first::before {
-    height: calc(100% - 1.2rem);
-    top: 1.2rem
-}
-
-.timeline.no-headers .timeline-item.is-last::before {
-    height: 1.2rem
-}
diff --git a/public/css/syntax-highlight.css b/public/css/syntax-highlight.css
index bc2fc10..40be532 100644
--- a/public/css/syntax-highlight.css
+++ b/public/css/syntax-highlight.css
@@ -1,3 +1,8 @@
+/* ----- Colors ----- */
+
+code-block language-label   { background-color: #0079ad; }
+code-block language-label a { color: #fff; }
+
 /* Background               */ .chroma             { color: #f8f8f2; background-color: #002e42; }
 /* Error                    */ .chroma .err        { color: #960050; background-color: #1e0010; }
 /* LineTableTD              */ .chroma .lntd       { vertical-align: top; padding: 0; margin: 0; border: 0; }
@@ -5,7 +10,6 @@
 /* LineHighlight            */ .chroma .hl         { display: block; background-color: #004766; padding: 0 1.25rem; margin: 0 -1.25rem; }
 /* LineNumbersTable         */ .chroma .lnt        { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
 /* LineNumbers              */ .chroma .ln         { margin-right: 0.4em; padding: 0 0.4em 0 0.4em; }
-/* LanguageLabel            */ .chroma code:before { color: #e6e6e6; background-color: #006894; }
 
 /* Keyword                  */ .chroma .k   { color:       #93ddfd }
 /* KeywordConstant          */ .chroma .kc  { color:       #66d9ef }
diff --git a/public/css/tdro-dark.css b/public/css/tdro-dark.css
index 556183f..6da0590 100644
--- a/public/css/tdro-dark.css
+++ b/public/css/tdro-dark.css
@@ -1,11 +1,24 @@
-html {
-  background-color: #001f2c;
-}
+/* Dark Semantic CSS */
+
+::selection {
+  color: #000;
+  background-color: #999;
+}
+
+::-webkit-selection {
+  color: #000;
+  background-color: #999;
+}
+
+::-moz-selection {
+  color: #000;
+  background-color: #999;
+}
+
 a {
   color: #75b2f0;
 }
-a:focus,
-a:focus span {
+a:focus {
   color: #fff;
   background-color: #005d85;
 }
@@ -16,197 +29,239 @@ a:hover img {
 a:focus img {
   outline: 9px dashed #75b2f0;
 }
-a.navbar-item:hover {
-  color: #fff !important;
-}
+
 img {
   box-shadow: none;
   filter: brightness(75%);
 }
+
+html {
+  background-color: #001f2c;
+}
+
 body,
-.document h1 a,
-.document h2 a,
-.document h3 a,
-nav#TableOfContents a {
+resume-page article > section h1 {
   color: #cad6e2;
 }
-.document a {
-  color: #eee;
-}
-.article__list li:hover,
-nav#TableOfContents li:hover {
-  background-color: #002e42;
-}
-.leftnote,
-.rightnote,
-mark {
-  color: #a9bdd0;
-}
-.medium-zoom-overlay {
+
+body .medium-zoom-overlay {
   background-color: #001f2c;
   background-color: rgba(0, 31, 44, 0.9);
 }
-.navbar-item,
-.subtitle,
-.has-text-grey-dark {
-  color: #fff !important;
+
+video {
+  color: transparent;
 }
-.dropdown-content {
+
+body > nav {
   background-color: #002e42;
-  border: 1px solid #00405c;
-}
-.dropdown-content a.navbar-item:hover,
-.dropdown-content .theme-toggle-button:hover {
-  color: #fff;
-  background-color: #005d85;
-}
-.dropdown-content .navbar__active {
-  background-color: #004766;
-}
-.has-text-danger {
-  color: #ff8f93 !important;
-}
-.has-text-primary {
-  color: #a6c9e8 !important;
-}
-.footer a {
-  color: #bbb;
+  box-shadow: 0 0px 10px 0 #000;
 }
-.footer {
-  padding: 1.5rem;
-}
-.navbar {
-  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.5);
-}
-.navbar,
-.navbar-menu {
+
+input,
+textarea {
   background-color: #002e42;
-  background-color: rgba(0, 46, 66, 0.95);
-}
-a.navbar-item:focus,
-a.navbar-item:hover,
-.navbar-item:hover label {
+  border-color: transparent;
   color: #fff;
 }
-.navbar__icon:hover svg,
-.navbar__icon:hover svg,
-.navbar__icon:hover label svg {
-  fill: #af0c00;
-}
-.title,
-.content h1,
-.content h2,
-.content h3 {
-  color: #ddd;
-}
-.button.is-link.is-outlined,
-.button.is-success.is-outlined {
-  border-color: #cad6e2;
-  color: #cad6e2;
-  border-width: 1px;
-}
-.input,
-.textarea {
-  background-color: #002e42;
-  border-color: transparent;
-  color: white;
+
+article a,
+body > footer a,
+article-subsection a {
+  color: #eee;
 }
-.item__box {
+
+button,
+button-anchor a,
+pagination-controller a,
+input[type="submit"],
+input[type="button"] {
   color: #fff;
   background-color: #004766;
+  box-shadow: none;
 }
-.item__box:hover,
-.item__box:hover svg,
-.item__box:focus svg {
+
+button:hover,
+button-anchor a:hover,
+pagination-controller a,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background-color: #005980;
+}
+
+button:hover svg,
+button-anchor:hover svg {
   color: #fff;
+  fill: #0961aa;
+}
+
+nav column-middle > a,
+nav column-middle > a[data-active],
+nav column-middle context-menu a,
+nav column-middle context-menu a[data-active],
+nav column-middle context-menu button,
+nav column-middle more-button {
+  color: #f1f1f1;
+}
+
+nav column-middle > a[data-active] svg {
+  fill: #0961aa;
+}
+
+a,
+home-page article a,
+recent-articles h2 a {
+  color: #75b2f0;
 }
-.message__success {
-  background-color: #55a1ec;
-  border: 1px solid #1259a1;
-  color: black;
+
+article > mark,
+margin-note-aside:hover label span,
+margin-note-aside:hover margin-note a,
+margin-note-aside:hover margin-note mark,
+side-note-aside:hover label span,
+side-note-aside:hover side-note a,
+side-note-aside:hover side-note mark {
+  background-color: #042f52;
+  color: #fff;
 }
-.pagination-link.is-current {
-  background-color: #004766;
-  border-color: #00608a;
-  color: #fff !important;
+
+input,
+button,
+textarea,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+home-page label,
+home-page article > h1,
+pagination-controller a {
+  color: #fff;
 }
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-  border-color: #002e42;
-  color: #cad6e2;
-  min-width: 2.25em;
+
+footer,
+footer a,
+body > footer,
+figcaption,
+figcaption code,
+article-archive-list time,
+article-meta-bottom a,
+article-meta-bottom,
+article-meta-top a,
+article-meta-top,
+article-more-content time,
+article-on-web time,
+article-summary-meta,
+blockquote-footer,
+home-page article > h2,
+margin-note[left],
+margin-note[right],
+side-note[left],
+side-note[right],
+table-contents a,
+table-contents h2,
+taxonomy-archive-list time,
+taxonomy-list time,
+video-container footer a {
+  color: #bfbfbf;
+}
+
+nav column-middle > a:hover,
+nav column-middle more-button:hover {
+  color: #fff;
 }
-.pagination-previous:hover,
-.pagination-next:hover,
-.pagination-link:hover,
-.pagination-previous.disabled,
-.pagination-next.disabled {
-  color: #cad6e2;
+
+nav column-middle a:hover svg,
+nav column-middle more-button:hover svg {
+  fill: #dd4b50;
 }
-.pagination-previous.disabled,
-.pagination-next.disabled {
+
+context-menu-content {
   background-color: #002e42;
-  border-color: #002e42;
-  color: #fff;
+  border-color: #00405c;
 }
-.navbar__active {
-  color: #fff !important;
+
+nav column-middle context-menu a[data-active] {
+  background-color: #004766;
 }
-.navbar__active svg {
-  fill: #0073ca;
+
+nav column-middle context-menu a:hover,
+nav column-middle context-menu button:hover {
+  color: #fff;
+  background-color: #005d85;
 }
-@media screen and (max-width: 1087px) {
-  .theme-toggle-button {
-    color: #cad6e2;
-  }
+
+article-archive-list li:hover,
+taxonomy-list > section ul li:hover,
+taxonomy-archive-list > section ul li:hover {
+  background-color: #002e42;
 }
-#isso-thread > h4 {
-  color: #b7c7d7;
+
+resume-page timeline-item aside {
+  border: 3px solid #001f2c;
 }
-#isso-thread .textarea.placeholder {
-  color: #cad6e2;
+
+home-page article > h1 em {
+  color: #f48a8e;
 }
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
-  background-color: #002e42;
-  color: white;
+
+[data-danger] {
+  color: #ff8585;
 }
-.isso-postbox > .form-wrapper .textarea,
-.isso-postbox > .form-wrapper .preview {
+
+contact-page aside {
   background-color: #002e42;
+  border-color: #008fcc;
 }
-.isso-comment > div.text-wrapper > .isso-comment-header .author {
-  color: #fff;
-}
-.isso-comment-footer .upvote svg,
-.isso-comment-footer .downvote svg {
-  fill: white;
-}
+
+/* ---------------------------------------------------------- */
+
 input::placeholder,
 textarea::placeholder {
   color: #cad6e2;
 }
+
 input::-moz-placeholder,
 textarea::-moz-placeholder {
   color: #cad6e2;
 }
+
 input::-webkit-input-placeholder,
 textarea::-webkit-input-placeholder {
   color: #cad6e2;
 }
+
 input:-moz-placeholder,
 textarea:-moz-placeholder {
   color: #cad6e2;
 }
+
 input:-ms-input-placeholder,
 textarea:-ms-input-placeholder {
   color: #cad6e2;
 }
-.isso-postbox > .form-wrapper > .auth-section .post-action > input {
-  border: 1px solid #557181;
-  background-color: transparent;
+
+#isso-thread > h4 {
+  color: #b7c7d7;
+}
+
+#isso-thread .textarea.placeholder {
+  color: #cad6e2;
+}
+
+.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+  background-color: #002e42;
   color: white;
 }
+
+.isso-comment .textarea,
+.isso-postbox > .form-wrapper .textarea,
+.isso-postbox > .form-wrapper .preview {
+  background-color: #002e42;
+}
+
+.isso-comment > div.text-wrapper > .isso-comment-header .author {
+  color: #ccc;
+}
+
 .isso-postbox > .form-wrapper .preview {
   background-color: #001f2c;
   background: repeating-linear-gradient(
@@ -217,29 +272,11 @@ textarea:-ms-input-placeholder {
     #002e42 20px
   );
 }
+
 .isso-comment > div.text-wrapper > .isso-comment-header .permalink {
   color: #ccc;
 }
+
 .isso-comment > div.text-wrapper > .text a {
   color: #cad6e2;
 }
-.is-success:focus,
-.is-link:focus {
-  background-color: #75b2f0 !important;
-  color: #121212 !important;
-  border-color: #75b2f0 !important;
-}
-.timeline .timeline-item .timeline-marker {
-  border: 3px solid #001f2c !important;
-}
-article > mark,
-.sidenote-container:hover .sidenote-mark span,
-.sidenote-container:hover .sidenote mark,
-.marginnote-container:hover .marginnote-mark span,
-.marginnote-container:hover .marginnote mark,
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  color: #fcfcfc;
-  background-color: #005d85;
-  border-color: #af0c00;
-}
diff --git a/public/css/tdro.css b/public/css/tdro.css
index 1ac9e18..fd845d0 100644
--- a/public/css/tdro.css
+++ b/public/css/tdro.css
@@ -1,94 +1,85 @@
-/*! bulma.io v0.8.0 | MIT License | github.com/jgthms/bulma */
+/* ----- Semantic Pact CSS ----- */
 
-.button,
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  user-select: none;
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
 }
 
-.box:not(:last-child),
-.content:not(:last-child),
-.table:not(:last-child),
-.title:not(:last-child),
-.subtitle:not(:last-child),
-.block:not(:last-child),
-.highlight:not(:last-child),
-.level:not(:last-child),
-.list:not(:last-child),
-article > mark:not(:last-child),
-.message:not(:last-child) {
-  margin-bottom: 1.5rem;
+:focus {
+  outline: none;
 }
 
-.button,
-.input,
-.textarea,
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  appearance: none;
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  box-shadow: none;
-  display: inline-flex;
-  font-size: 1rem;
-  height: 2.5em;
-  justify-content: flex-start;
-  line-height: 1.5;
-  padding-bottom: calc(0.5em - 1px);
-  padding-left: calc(0.75em - 1px);
-  padding-right: calc(0.75em - 1px);
-  padding-top: calc(0.5em - 1px);
-  position: relative;
-  vertical-align: top;
+:target::before {
+  content: "";
+  display: block;
+  height: 5rem;
+  margin-top: -5rem;
+  visibility: hidden;
 }
 
-.button:focus,
-.input:focus,
-.textarea:focus,
-.pagination-previous:focus,
-.pagination-next:focus,
-.pagination-link:focus,
-.pagination-ellipsis:focus,
-.button:active,
-.input:active,
-.textarea:active,
-.pagination-previous:active,
-.pagination-next:active,
-.pagination-link:active,
-.pagination-ellipsis:active {
-  outline: none;
+::selection {
+  text-shadow: 0 0 currentColor;
 }
 
-.button[disabled],
-.input[disabled],
-.textarea[disabled],
-.pagination-previous[disabled],
-.pagination-next[disabled],
-.pagination-link[disabled],
-.pagination-previous.disabled,
-.pagination-next.disabled,
-.pagination-ellipsis[disabled] {
-  cursor: not-allowed;
+::-webkit-selection {
+  text-shadow: 0 0 currentColor;
+}
+
+::-moz-selection {
+  text-shadow: 0 0 currentColor;
+}
+
+img::selection {
+  background-color: transparent;
+}
+
+img::-webkit-selection {
+  background-color: transparent;
+}
+
+img::-moz-selection {
+  background-color: transparent;
+}
+
+h1:target,
+h2:target,
+h3:target {
+  text-decoration: underline;
+  text-decoration-style: double;
+}
+
+a:hover {
+  border-bottom: 2px solid;
+  text-shadow: 0 0 currentColor;
+}
+
+a:focus {
+  border-bottom: 3px solid;
+}
+
+a:hover img {
+  box-shadow: 0 8px 32px;
+}
+
+a:focus img,
+:focus:not(article-thumbnail a):not(abstract-thumbnail a):not(figure
+    > a):not(nav column-middle a):not(tile-item a),
+:focus-visible:not(article-thumbnail a):not(abstract-thumbnail a):not(figure
+    > a):not(nav column-middle a):not(tile-item a) {
+  border-radius: 0.25rem;
+  box-shadow: 0 0 0 0.125rem #4992d0;
+  outline: none;
 }
 
-/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
 html,
 body,
 p,
 ol,
 ul,
 li,
-dl,
-dt,
-dd,
 blockquote,
 figure,
-fieldset,
 legend,
 textarea,
 pre,
@@ -97,23 +88,11 @@ hr,
 h1,
 h2,
 h3,
-h4,
-h5,
-h6 {
+h4 {
   margin: 0;
   padding: 0;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: 100%;
-  font-weight: normal;
-}
-
 button,
 input,
 select,
@@ -121,31 +100,6 @@ textarea {
   margin: 0;
 }
 
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-}
-
-img,
-video {
-  max-width: 100%;
-}
-
-html {
-  background-color: #fcfcfc;
-  font-size: 16px;
-  min-width: 300px;
-  overflow-x: hidden;
-  overflow-y: scroll;
-  text-rendering: optimizeLegibility;
-  text-size-adjust: 100%;
-}
-
 article,
 aside,
 figure,
@@ -156,11 +110,18 @@ section {
   display: block;
 }
 
-body {
-  color: #222;
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.8;
+html {
+  box-sizing: border-box;
+  font-size: 16px;
+  overflow-y: scroll;
+  padding-top: 4rem;
+  text-rendering: optimizeLegibility;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+
+figure > a:focus {
+  background-color: transparent;
 }
 
 code {
@@ -173,8 +134,6 @@ code {
 }
 
 hr {
-  background-color: #ddd;
-  border: none;
   display: block;
   height: 1px;
   margin: 1.5rem 0;
@@ -184,12 +143,7 @@ img {
   height: auto;
   max-width: 100%;
   border-radius: 0.1em;
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.1);
-}
-
-input[type="checkbox"],
-input[type="radio"] {
-  vertical-align: baseline;
+  box-shadow: 0 4px 12px 0;
 }
 
 span {
@@ -202,10 +156,10 @@ strong * {
 }
 
 pre {
-  border-radius: 3px;
-  font-size: 0.875em;
+  border-radius: 0.25rem;
+  font-size: 0.875rem;
   max-width: 100%;
-  overflow-x: scroll;
+  overflow-x: auto;
   padding: 1.25em 1.5em;
   white-space: pre;
   word-wrap: normal;
@@ -215,1774 +169,1247 @@ pre code {
   background-color: transparent;
   color: currentColor;
   display: inline-block;
-  font-size: 1em;
+  font-size: 0.875rem;
   min-width: 100%;
-  padding: 0.75em 0 0 0;
   position: relative;
 }
 
-pre code:before {
-  border-radius: 0 0 0.25em 0.25em;
-  content: attr(data-lang);
-  font-size: 0.9em;
-  letter-spacing: 0.01rem;
-  line-height: 1;
-  padding: 0.25em 0.5em;
-  position: absolute;
-  left: 0;
-  text-transform: uppercase;
-  top: -1.4em;
+button:hover svg,
+button-anchor:hover svg {
+  stroke-width: 2px;
 }
 
-.is-pulled-right {
-  float: right !important;
+a,
+home-page article a,
+recent-articles h2 a {
+  border-bottom: 1px solid;
+  overflow-wrap: break-word;
+  text-decoration: none;
 }
 
-.is-size-3 {
-  font-size: 2rem !important;
+video {
+  display: inline-block;
+  box-shadow: 0 0.25rem 1rem;
+  max-width: 100%;
 }
 
-.is-size-4 {
-  font-size: 1.5rem !important;
+video-container {
+  display: block;
+  text-align: center;
 }
 
-.is-size-5 {
-  font-size: 1.25rem !important;
+figure {
+  text-align: center;
 }
 
-.is-size-6 {
-  font-size: 1rem !important;
+ul {
+  list-style: none;
+  margin-top: 1rem;
 }
 
-.is-size-7 {
-  font-size: 0.75rem !important;
+h1,
+h2,
+h3,
+h4 {
+  font-size: 100%;
+  font-weight: 400;
 }
 
-.has-text-centered {
-  text-align: center !important;
+footer,
+figcaption,
+figcaption code {
+  font-size: 95%;
+  margin-bottom: 1rem;
+  margin-top: 0.5rem;
+  text-align: center;
 }
 
-.has-text-left {
-  text-align: left !important;
+ul + ul,
+li + li {
+  margin-top: 0.25rem;
 }
 
-.has-text-right {
-  text-align: right !important;
+input[type="text"],
+input[type="email"] {
+  height: 2.5rem;
+  max-width: 100%;
+  width: 100%;
 }
 
-.is-uppercase {
-  text-transform: uppercase !important;
+textarea {
+  height: 2.5rem;
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 8rem;
+  resize: vertical;
 }
 
-.has-text-white {
-  color: white !important;
+button,
+textarea,
+input[type="text"],
+input[type="email"],
+input[type="submit"],
+input[type="button"] {
+  -webkit-appearance: none;
+  appearance: none;
 }
 
-.has-text-primary {
-  color: #245a8a !important;
+input,
+button,
+textarea,
+button-anchor a,
+pagination-controller a {
+  border-radius: 0.25rem;
+  border: 1px solid;
+  font-size: 1rem;
+  padding: 0.5rem;
 }
 
-.has-text-danger {
-  color: #f05a60 !important;
+button,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+pagination-controller a {
+  align-items: center;
+  border: 0 solid transparent;
+  cursor: pointer;
+  display: flex;
+  height: 2rem;
+  justify-content: center;
+  padding: 0.25rem 1rem;
 }
 
-a.has-text-danger:hover,
-a.has-text-danger:focus {
-  color: #ff0537 !important;
+button svg,
+button-anchor a svg {
+  stroke-width: 1.5px;
+  width: 20px;
+  height: 20px;
 }
 
-.has-text-grey-dark {
-  color: #4a4a4a !important;
+button span,
+button-anchor a span {
+  padding-left: 0.5rem;
 }
 
-.has-text-grey {
-  color: #7a7a7a !important;
+ol {
+  counter-reset: ol;
 }
 
-.has-text-weight-normal {
-  font-weight: 400 !important;
+ol {
+  margin-left: 4rem;
+  margin-top: 1.5rem;
 }
 
-.has-text-weight-semibold {
-  font-weight: 600 !important;
+ol li {
+  -ms-hyphens: auto;
+  -ms-word-break: normal;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  font-size: 1.25rem;
+  list-style: none;
 }
 
-.has-text-weight-bold {
-  font-weight: 700 !important;
+ol li + li {
+  margin-top: 1rem;
 }
 
-.is-block {
-  display: block !important;
+ol li:before {
+  border-radius: 100%;
+  border: 1px solid;
+  content: counter(ol);
+  counter-increment: ol;
+  font-size: 1rem;
+  font-weight: 700;
+  margin-left: -2.75rem;
+  margin-top: 0.25rem;
+  padding: 0 0.5rem;
+  position: absolute;
 }
 
-.is-flex {
-  display: flex !important;
+ol:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.is-inline {
-  display: inline !important;
+body {
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.8;
+  margin: 0 auto;
+  max-width: 1152px;
 }
 
-.is-inline-block {
-  display: inline-block !important;
+main {
+  min-height: 450px;
 }
 
-.is-inline-flex {
-  display: inline-flex !important;
+main article {
+  min-height: 450px;
 }
 
-.is-hidden {
-  display: none !important;
+article > mark:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-.button {
-  background-color: transparent;
-  border-color: #dbdbdb;
-  border-width: 1px;
-  color: #363636;
-  cursor: pointer;
-  justify-content: center;
-  padding-bottom: calc(0.375em - 1px);
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  padding-top: calc(0.375em - 1px);
+body > footer {
+  font-size: 75%;
   text-align: center;
-  white-space: nowrap;
+  margin: 0;
 }
 
-.button strong {
-  color: inherit;
+article p {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
 }
 
-.button.is-text {
-  background-color: transparent;
-  border-color: transparent;
-}
+/* ----- Tables ----- */
 
-.button[disabled] {
-  background-color: white;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  opacity: 0.5;
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+  margin-bottom: 1.5rem;
+  width: 100%;
 }
 
-.container {
-  flex-grow: 1;
-  margin: 0 auto;
-  position: relative;
-  width: auto;
+table,
+table code {
+  font-size: 1.15rem;
 }
 
-@media screen and (min-width: 1088px) {
-  .container {
-    max-width: 960px;
-  }
+table th {
+  font-weight: 700;
+  font-variant: small-caps;
+  text-transform: lowercase;
+  letter-spacing: 0.05rem;
+  padding: 0.4rem;
 }
 
-@media screen and (min-width: 1280px) {
-  .container {
-    max-width: 1152px;
-  }
+table td,
+table th {
+  vertical-align: top;
+  padding: 0;
+  padding: 0.4rem;
+  min-width: 8rem;
 }
 
-.content li + li {
-  margin-top: 0.5em;
+table td:not([align]),
+table th:not([align]) {
+  text-align: left;
 }
 
-.content p:not(:last-child),
-.content dl:not(:last-child),
-.content ol:not(:last-child),
-.content ul:not(:last-child),
-.content blockquote:not(:last-child),
-.content pre:not(:last-child),
-.content table:not(:last-child) {
-  margin-bottom: 1.5rem;
+@media (max-width: 550px) {
+  table {
+    table-layout: fixed;
+  }
 }
 
-.content h1 {
-  font-size: 2em;
-  margin-bottom: 0.5em;
+/* ----- Fonts ----- */
+
+ol li,
+article p,
+article h1,
+article h2,
+article h3,
+article-on-web h3,
+side-note-aside label,
+margin-note-aside label,
+article-more-content h3 {
+  font-family: Charter, Georgia, "Book Antiqua", serif;
 }
 
-.content h1:not(:first-child) {
-  margin-top: 1em;
+body,
+input,
+button,
+select,
+textarea,
+side-note-aside,
+margin-note-aside,
+blockquote-footer,
+table-contents h2,
+home-page article p,
+home-page article h1,
+home-page article h2,
+resume-page article p,
+resume-page article h1,
+contact-page article p,
+contact-page article h1,
+home-page margin-note-aside label {
+  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
+    "Segoe UI Symbol";
 }
 
-.content h2 {
-  font-size: 1.75em;
-  margin-bottom: 0.5714em;
+pre,
+code,
+blockquote p {
+  font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace;
 }
 
-.content h2:not(:first-child) {
-  margin-top: 1.1428em;
+h1 {
+  margin-bottom: 1.5rem;
+  font-size: 2.5rem;
+  line-height: 1.25;
 }
 
-.content h3 {
-  font-size: 1.5em;
-  margin-bottom: 0.6666em;
+h2 {
+  font-size: 1.75rem;
+  margin-bottom: 0.75rem;
+  margin-top: 1.15rem;
+  line-height: 1.5;
 }
 
-.content h3:not(:first-child) {
-  margin-top: 1.3333em;
+h3 {
+  font-size: 1.5rem;
+  line-height: 1.5;
 }
 
-.content blockquote {
+blockquote {
   padding: 0 1.5em;
   margin-left: 5%;
-  margin-bottom: 1.3em !important;
-}
-
-.content ul,
-ul {
-  list-style: none;
-  margin-top: 1em;
-}
-
-.content ul ul {
-  list-style-type: circle;
-  margin-top: 0.5em;
+  margin-bottom: 1.5rem;
 }
 
-.content ul ul ul {
-  list-style-type: square;
+blockquote-footer {
+  font-size: 85%;
+  text-align: right;
+  display: block;
+  margin-top: 1rem;
 }
 
-.content dd {
-  margin-left: 2em;
+home-page-intro {
+  padding: 1rem;
+  display: block;
+  margin-bottom: 1rem;
 }
 
-.content figure {
-  margin-bottom: 1em;
-  text-align: center;
+home-page label {
+  display: inline-block !important;
+  line-height: 1.125;
+  margin-bottom: 1.5rem;
+  font-size: 1.5rem;
 }
 
-.content sup,
-.content sub {
-  font-size: 75%;
+home-page article > h1 {
+  font-size: 2rem;
+  line-height: 1.125;
+  margin-bottom: 0;
 }
 
-.title,
-.subtitle {
-  word-break: break-word;
+home-page article > h1 em {
+  font-style: normal;
 }
 
-.title em,
-.title span,
-.subtitle em,
-.subtitle span {
-  font-weight: inherit;
+home-page article > h2 {
+  font-size: 1.25rem;
+  margin-bottom: 1.5rem;
+  margin-top: 0.5rem;
 }
 
-.title sub,
-.subtitle sub {
-  font-size: 0.75em;
+home-page article p,
+contact-page article p {
+  font-size: 100%;
 }
 
-.title sup,
-.subtitle sup {
-  font-size: 0.75em;
+home-page-posts > a,
+home-page-projects > a {
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  text-transform: uppercase;
 }
 
-.title .tag,
-.subtitle .tag {
+home-page-posts > a svg,
+home-page-projects > a svg {
+  display: inline-block;
   vertical-align: middle;
 }
 
-.title {
-  color: #363636;
-  font-size: 2rem;
-  font-weight: 600;
-  line-height: 1.125;
-}
-
-.title strong {
-  color: inherit;
-  font-weight: inherit;
-}
-
-.title + .highlight {
-  margin-top: -0.75rem;
+home-page recent-projects article-thumbnail {
+  flex: 2;
 }
 
-.title:not(.is-spaced) + .subtitle {
-  margin-top: -1.25rem;
-}
-
-.title.is-1 {
-  font-size: 3rem;
+recent-projects article-thumbnail {
+  flex: none;
 }
 
-.title.is-2 {
-  font-size: 2.5rem;
+upload-page h1 {
+  text-align: center;
 }
 
-.title.is-3 {
+article-subsection h1,
+contact-page article h1,
+abstracts-page article-list h1 {
   font-size: 2rem;
 }
 
-.title.is-4 {
-  font-size: 1.5rem;
-}
-
-.title.is-5 {
-  font-size: 1.125rem;
-}
-
-.title.is-6 {
-  font-size: 1rem;
+fortune-quote b {
+  display: block;
+  margin-bottom: 0.25rem;
 }
 
-.title.is-7 {
-  font-size: 0.75rem;
+contact-page form label {
+  letter-spacing: 0.05rem;
+  text-transform: uppercase;
+  margin: 0.5rem 0;
+  display: block;
 }
 
-.subtitle {
-  color: #4a4a4a;
-  font-size: 1.25rem;
-  font-weight: 400;
-  line-height: 1.8;
+contact-page form textarea {
+  margin-bottom: 1rem;
 }
 
-.subtitle strong {
-  color: #363636;
-  font-weight: 600;
+contact-page field-set {
+  display: flex;
+  margin: 0;
+  padding: 0;
 }
 
-.subtitle:not(.is-spaced) + .title {
-  margin-top: -1.25rem;
+contact-page form field-set section {
+  flex: 1;
 }
 
-.subtitle.is-6 {
-  font-size: 1rem;
+contact-page form field-set section + section {
+  margin-left: 0.75rem;
 }
 
-.heading {
-  display: block;
-  font-size: 11px;
-  letter-spacing: 1px;
-  margin-bottom: 5px;
-  text-transform: uppercase;
+contact-page input[name="agree"] {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 0;
+  width: 0;
+  z-index: -1;
 }
 
-.highlight {
-  font-weight: 400;
-  max-width: 100%;
-  overflow: hidden;
-  padding: 0;
+contact-page aside {
+  border-radius: 0.5rem;
+  border: 1px solid;
+  margin-bottom: 1rem;
+  padding: 1rem;
 }
 
-.highlight:focus-within {
-  outline: 0.25rem solid #ff8383;
+contact-page aside p {
+  margin: 0;
 }
 
-.input,
-.textarea,
-.select select {
-  background-color: #f9f9f9;
-  border-color: #ccc;
-  color: #363636;
-  max-width: 100%;
-  width: 100%;
-  font-weight: 400;
-  border-radius: 3px;
+article,
+body > footer,
+article-list,
+taxonomy-list,
+article-on-web,
+article-comments,
+article-subsection,
+article-meta-bottom,
+article-archive-list,
+taxonomy-archive-list,
+article-more-content {
+  max-width: 62%;
+  padding: 1.5rem;
+  display: block;
+  margin: 0 auto;
+  transform: translateY(0);
 }
 
-.input:focus,
-.textarea:focus,
-.is-focused.input,
-.is-focused.textarea,
-.input:active,
-.textarea:active,
-.is-active.input,
-.is-active.textarea {
-  border-color: #4992d0;
-  box-shadow: 0 0 0 0.125em rgba(73, 146, 208, 0.5);
+@media screen and (max-width: 768px) {
+  article,
+  body > footer,
+  article-list,
+  taxonomy-list,
+  article-on-web,
+  article-comments,
+  article-subsection,
+  article-meta-bottom,
+  article-archive-list,
+  taxonomy-archive-list,
+  article-more-content {
+    max-width: 100%;
+  }
 }
 
-.input[disabled],
-.textarea[disabled] {
-  background-color: whitesmoke;
-  border-color: whitesmoke;
-  box-shadow: none;
-  color: #7a7a7a;
+taxonomy-list h2,
+article-on-web h2,
+article-comments h2,
+article-more-content h2,
+taxonomy-archive-list h2 {
+  font-size: 1.25rem;
+  text-transform: uppercase;
+  margin-bottom: 1.5rem;
+  letter-spacing: 0.1rem;
 }
 
-.is-danger.input,
-.is-danger.textarea {
-  border-color: #ff3860;
+article-list {
+  margin-top: 1rem;
 }
 
-.textarea {
-  display: block;
-  max-width: 100%;
-  min-width: 100%;
-  padding: 0.625em;
-  resize: vertical;
+article-list recent-abstracts {
+  display: flex;
+  margin: 0 -0.75rem;
 }
 
-.textarea:not([rows]) {
-  min-height: 120px;
+abstracts-page article-list {
+  margin-top: 0;
 }
 
-.textarea[rows] {
-  height: initial;
+article-more-content li {
+  display: flex;
+  align-items: baseline;
 }
 
-.checkbox,
-.radio {
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1.25;
-  position: relative;
+article-more-content li h3 {
+  flex: 1;
+  padding-right: 1rem;
 }
 
-.checkbox input,
-.radio input {
-  cursor: pointer;
+article-more-content ul + ul {
+  margin-top: 1.5rem;
 }
 
-.checkbox:hover,
-.radio:hover {
-  color: #363636;
+article-meta-top {
+  margin-bottom: 1.5rem;
 }
 
-.checkbox[disabled],
-.radio[disabled] {
-  color: #7a7a7a;
-  cursor: not-allowed;
+article-summary-meta {
+  margin-bottom: 0.75rem;
 }
 
-.radio + .radio {
-  margin-left: 0.5em;
+article-meta-top,
+article-summary-meta {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
 }
 
-.field:not(:last-child) {
-  margin-bottom: 0.75rem;
+article-meta-top a {
+  text-decoration: underline;
 }
 
-.field.has-addons {
+article-meta-top aside {
   display: flex;
-  justify-content: flex-start;
+  align-items: center;
+  width: 100%;
+  flex-wrap: wrap;
 }
 
-.field.has-addons .control:not(:last-child) {
-  margin-right: -1px;
+abstract-summary-meta svg,
+article-summary-meta svg,
+article-meta-top svg {
+  height: 1rem;
+  margin-right: 0.35rem;
+  width: 1rem;
+  display: inline-block;
+  vertical-align: middle;
 }
 
-.field.has-addons .control:not(:first-child):not(:last-child) .button,
-.field.has-addons .control:not(:first-child):not(:last-child) .input,
-.field.has-addons .control:not(:first-child):not(:last-child) .select select {
-  border-radius: 0;
+article-summary-meta *:not(svg),
+article-meta-top aside *:not(svg) {
+  margin-right: 0.5rem;
 }
 
-.field.has-addons .control:first-child:not(:only-child) .button,
-.field.has-addons .control:first-child:not(:only-child) .input,
-.field.has-addons .control:first-child:not(:only-child) .select select {
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
+abstract-summary-meta footer {
+  text-align: inherit;
 }
 
-.field.has-addons .control:last-child:not(:only-child) .button,
-.field.has-addons .control:last-child:not(:only-child) .input,
-.field.has-addons .control:last-child:not(:only-child) .select select {
-  border-bottom-left-radius: 0;
-  border-top-left-radius: 0;
+taxonomy-list > h1 {
+  font-size: 2rem;
+  font-variant: small-caps;
+  letter-spacing: 0.05rem;
+  text-transform: lowercase;
+  margin: 0;
 }
 
-.field.has-addons .control .button:not([disabled]):hover,
-.field.has-addons .control .button:not([disabled]).is-hovered,
-.field.has-addons .control .input:not([disabled]):hover,
-.field.has-addons .control .input:not([disabled]).is-hovered,
-.field.has-addons .control .select select:not([disabled]):hover,
-.field.has-addons .control .select select:not([disabled]).is-hovered {
-  z-index: 2;
+taxonomy-list hr {
+  margin: 1rem 0;
 }
 
-.field.has-addons .control .button:not([disabled]):focus,
-.field.has-addons .control .button:not([disabled]).is-focused,
-.field.has-addons .control .button:not([disabled]):active,
-.field.has-addons .control .button:not([disabled]).is-active,
-.field.has-addons .control .input:not([disabled]):focus,
-.field.has-addons .control .input:not([disabled]).is-focused,
-.field.has-addons .control .input:not([disabled]):active,
-.field.has-addons .control .input:not([disabled]).is-active,
-.field.has-addons .control .select select:not([disabled]):focus,
-.field.has-addons .control .select select:not([disabled]).is-focused,
-.field.has-addons .control .select select:not([disabled]):active,
-.field.has-addons .control .select select:not([disabled]).is-active {
-  z-index: 3;
+taxonomy-list li,
+taxonomy-archive-list li,
+article-archive-list li {
+  line-height: 2.5;
 }
 
-.field.has-addons .control .button:not([disabled]):focus:hover,
-.field.has-addons .control .button:not([disabled]).is-focused:hover,
-.field.has-addons .control .button:not([disabled]):active:hover,
-.field.has-addons .control .button:not([disabled]).is-active:hover,
-.field.has-addons .control .input:not([disabled]):focus:hover,
-.field.has-addons .control .input:not([disabled]).is-focused:hover,
-.field.has-addons .control .input:not([disabled]):active:hover,
-.field.has-addons .control .input:not([disabled]).is-active:hover,
-.field.has-addons .control .select select:not([disabled]):focus:hover,
-.field.has-addons .control .select select:not([disabled]).is-focused:hover,
-.field.has-addons .control .select select:not([disabled]):active:hover,
-.field.has-addons .control .select select:not([disabled]).is-active:hover {
-  z-index: 4;
+article-archive-list ul,
+taxonomy-list > section ul,
+taxonomy-archive-list > section ul {
+  margin-bottom: 1rem;
+  margin-left: -0.5rem;
 }
 
-.field.has-addons .control.is-expanded {
-  flex-grow: 1;
-  flex-shrink: 1;
+taxonomy-archive-list h1,
+article-archive-list h1 {
+  font-size: 1.5rem;
+  line-height: 1.125;
+  margin-bottom: 1rem;
 }
 
-@media screen and (min-width: 769px), print {
-  .field.is-horizontal {
-    display: flex;
-  }
+taxonomy-list time,
+taxonomy-archive-list time,
+article-archive-list time {
+  padding-right: 1rem;
+  text-transform: uppercase;
+  flex: initial;
 }
 
-.field-body .field .field {
-  margin-bottom: 0;
+taxonomy-list ul a,
+taxonomy-archive-list ul a,
+article-archive-list ul a {
+  display: flex;
+  padding: 0 0.5rem;
+  align-items: baseline;
 }
 
-@media screen and (min-width: 400px), print {
-  .field-body {
-    display: flex;
-    flex-basis: 0;
-    flex-grow: 5;
-    flex-shrink: 1;
-  }
-  .field-body .field {
-    margin-bottom: 0;
-  }
-  .field-body > .field {
-    flex-shrink: 1;
-  }
-  .field-body > .field:not(.is-narrow) {
-    flex-grow: 1;
-  }
-  .field-body > .field:not(:last-child) {
-    margin-right: 0.75rem;
-  }
+taxonomy-archive-list span,
+article-archive-list span {
+  flex: 3;
+  line-height: 1.5;
 }
 
-.control {
-  box-sizing: border-box;
-  clear: both;
-  font-size: 1rem;
-  position: relative;
-  text-align: left;
+article-archive-link a {
+  text-decoration: none;
+  text-align: center;
+  display: block;
+  text-transform: uppercase;
 }
 
-.dropdown {
-  display: inline-flex;
-  position: relative;
-  vertical-align: top;
+article-archive-link a svg {
+  vertical-align: bottom;
 }
 
-.dropdown.is-right .dropdown-menu {
-  left: auto;
-  right: 0;
+article-meta-bottom,
+article-more-content,
+article-on-web {
+  padding: 2.5rem 1.5rem;
 }
 
-.dropdown.is-menu .dropdown-menu {
-  top: 0.5rem;
-  right: 0.5rem;
+article-on-web button-anchor {
+  float: right;
 }
 
-.dropdown-menu {
-  display: none;
-  left: 0;
-  min-width: 6.25rem;
-  padding-top: 4px;
-  position: absolute;
-  top: 100%;
-  z-index: 20;
+article-on-web li + li {
+  margin-top: 1.5rem;
 }
 
-.dropdown-content {
-  background-color: #fafafa;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  box-shadow: 0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1),
-    0 0px 0 1px rgba(10, 10, 10, 0.02);
-  padding-bottom: 0.5rem;
-  padding-top: 0.5rem;
+article-meta-bottom {
+  text-align: right;
 }
 
-.navbar {
-  background-color: white;
-  min-height: 3.25rem;
-  position: relative;
-  z-index: 30;
+article-card {
+  align-items: center;
+  display: flex;
+  margin-bottom: 3rem;
 }
 
-.navbar > .container {
-  align-items: stretch;
-  display: flex;
-  min-height: 3.25rem;
-  width: 100%;
+article-card h2 {
+  font-size: 1.125rem;
+  margin: 0;
 }
 
-.navbar.is-fixed-bottom,
-.navbar.is-fixed-top {
-  left: 0;
-  position: fixed;
-  right: 0;
-  z-index: 30;
+article-thumbnail {
+  display: block;
+  flex: 2;
+  margin-right: 2rem;
+  text-align: center;
 }
 
-.navbar.is-fixed-top {
-  top: 0;
+article-summary {
+  flex: 3;
 }
 
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top {
-  padding-top: 3.25rem;
+article-summary p {
+  margin-bottom: 0.75rem;
 }
 
-.navbar-menu {
-  display: none;
+article-summary h2 {
+  font-weight: 700;
+  margin-bottom: 0.125rem;
 }
 
-.navbar-item .icon:only-child,
-.navbar-link .icon:only-child {
-  margin-left: -0.25rem;
-  margin-right: -0.25rem;
+abstract-card {
+  flex: 1;
+  margin: 0.75rem;
+  text-align: center;
 }
 
-a.navbar-item,
-.navbar-link {
-  cursor: pointer;
+abstract-card h2 {
+  font-weight: 700;
+  font-size: 100%;
 }
 
-.navbar-item {
-  display: block;
-  flex-grow: 0;
-  flex-shrink: 0;
+pagination-controller nav {
+  display: flex;
+  margin-bottom: 1.5rem;
 }
 
-@media screen and (max-width: 1087px) {
-  .navbar > .container {
-    display: block;
-  }
-  .navbar-menu {
-    background-color: white;
-    box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
-    padding: 0.5rem 0;
-  }
-  .navbar.is-fixed-top .navbar-menu,
-  .navbar.is-fixed-top-touch .navbar-menu {
-    -webkit-overflow-scrolling: touch;
-    max-height: calc(100vh - 3.25rem);
-    overflow: auto;
-  }
+pagination-controller ul {
+  display: flex;
+  justify-content: center;
+  margin: 0;
+  flex-grow: 1;
 }
 
-@media screen and (min-width: 1088px) {
-  .navbar,
-  .navbar-menu,
-  .navbar-start,
-  .navbar-end {
-    align-items: stretch;
-    display: flex;
-  }
-  .navbar {
-    min-height: 4rem;
-  }
-  .navbar-item,
-  .navbar-link {
-    align-items: center;
-    display: flex;
-  }
-  .navbar-item {
-    display: flex;
-  }
-  .navbar-menu {
-    flex-grow: 1;
-    flex-shrink: 0;
-  }
-  .navbar > .container .navbar-menu,
-  .container > .navbar .navbar-menu {
-    margin-right: -0.75rem;
-  }
+pagination-controller li {
+  margin: 0;
 }
 
-.pagination {
-  font-size: 1rem;
-  margin: -0.25rem;
+pagination-controller [data-pagination-current] {
+  font-weight: 700;
 }
 
-.pagination,
-.pagination-list {
-  align-items: center;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  margin: 0;
+pagination-ellipsis {
+  padding: 0 0.5rem;
 }
 
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
-  font-size: 1em;
+pagination-ellipsis,
+pagination-controller a {
+  align-items: center;
+  display: inline-flex;
+  font-size: 1rem;
+  height: 2.5rem;
   justify-content: center;
   margin: 0.25rem;
-  padding-left: 0.5em;
-  padding-right: 0.5em;
-  text-align: center;
 }
 
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-  border-color: #dbdbdb;
-  color: #363636;
-  min-width: 2.5em;
+table-contents {
+  clear: right;
+  float: right;
+  font-size: 1rem;
+  letter-spacing: 0.01rem;
+  margin-bottom: 1rem;
+  margin-right: -22vw;
+  max-width: 22em;
+  overflow-wrap: break-word;
+  padding-right: 1.125rem;
+  user-select: none;
+  width: 18vw;
+  word-break: break-word;
 }
 
-.pagination-previous:hover,
-.pagination-next:hover,
-.pagination-link:hover {
-  border-color: #b5b5b5;
-  color: #363636;
-  border-width: 1px;
+table-contents h2 {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: 0.1rem;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  line-height: 1.5;
 }
 
-.pagination-previous:focus,
-.pagination-next:focus,
-.pagination-link:focus {
-  border-color: #3273dc;
+table-contents a {
+  display: block;
+  font-size: 0.8125rem;
+  padding: 0.125rem 0 0.125rem 0.5rem;
 }
 
-.pagination-previous:active,
-.pagination-next:active,
-.pagination-link:active {
-  box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.2);
+table-contents ul {
+  margin-left: -0.5rem;
 }
 
-.pagination-previous[disabled],
-.pagination-next[disabled],
-.pagination-link[disabled],
-.pagination-previous.disabled,
-.pagination-next.disabled {
-  background-color: #dbdbdb;
-  border-color: #dbdbdb;
-  box-shadow: none;
-  color: #7a7a7a;
-  opacity: 0.5;
-}
-
-.pagination-previous,
-.pagination-next {
-  padding-left: 0.75em;
-  padding-right: 0.75em;
-  white-space: nowrap;
+table-contents li + li {
+  margin-top: 0.25rem;
 }
 
-.pagination-link.is-current {
-  background-color: #3273dc;
-  border-color: #3273dc;
-  color: #fff;
-  font-weight: bold;
+code-block {
+  display: block;
+  margin-bottom: 1.5rem;
 }
 
-.pagination-ellipsis {
-  color: #b5b5b5;
-  pointer-events: none;
+code-block header {
+  margin: -1rem 2rem 0 2rem;
+  text-align: right;
+  display: flex;
+  justify-content: flex-end;
 }
 
-.pagination-list {
-  flex-wrap: wrap;
+code-block div:focus-within {
+  outline: 0.25rem solid #ff8383;
+  outline-offset: -0.15rem;
 }
 
-@media screen and (max-width: 768px) {
-  .pagination {
-    flex-wrap: wrap;
-  }
-  .pagination-previous,
-  .pagination-next {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
-  .pagination-list li {
-    flex-grow: 1;
-    flex-shrink: 1;
-  }
+code-block language-label {
+  line-height: 1.25;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  text-transform: uppercase;
 }
 
-@media screen and (min-width: 769px), print {
-  .pagination-list {
-    flex-grow: 1;
-    flex-shrink: 1;
-    justify-content: flex-start;
-    order: 1;
-  }
-  .pagination-previous {
-    order: 2;
-  }
-  .pagination-next {
-    order: 3;
-  }
-  .pagination {
-    justify-content: space-between;
-  }
+code-block language-label code {
+  font-size: 85%;
+  padding: 0 0.5rem;
 }
 
-.column {
-  display: block;
+tile-set {
+  align-items: stretch;
+  display: flex;
   flex-basis: 0;
   flex-grow: 1;
   flex-shrink: 1;
-  padding: 0.75rem;
-}
-
-.columns.is-mobile > .column.is-5 {
-  flex: none;
-  width: 41.66667%;
-}
-
-.columns.is-mobile > .column.is-7 {
-  flex: none;
-  width: 58.33333%;
-}
-
-@media screen and (min-width: 769px), print {
-  .column.is-4,
-  .column.is-4-tablet {
-    flex: none;
-    width: 33.33333%;
-  }
-  .column.is-5,
-  .column.is-5-tablet {
-    flex: none;
-    width: 41.66667%;
-  }
-  .column.is-6,
-  .column.is-6-tablet {
-    flex: none;
-    width: 50%;
-  }
-  .column.is-7,
-  .column.is-7-tablet {
-    flex: none;
-    width: 58.33333%;
-  }
-}
-
-.columns {
+  margin-bottom: -0.75rem;
   margin-left: -0.75rem;
   margin-right: -0.75rem;
   margin-top: -0.75rem;
+  min-height: min-content;
 }
 
-.columns.is-gapless {
-  margin: 0;
-}
-
-.columns:last-child {
-  margin-bottom: -0.75rem;
-}
-
-.columns:not(:last-child) {
-  margin-bottom: calc(1.5rem - 0.75rem);
-}
-
-.columns.is-centered {
-  justify-content: center;
-}
-
-.columns.is-mobile {
-  display: flex;
-}
-
-@media screen and (min-width: 769px), print {
-  .columns:not(.is-desktop) {
-    display: flex;
-  }
-}
-
-@media screen and (min-width: 1088px) {
-  .columns.is-desktop {
-    display: flex;
-  }
-}
-
-.tile {
+tile-item {
   align-items: stretch;
-  display: block;
   flex-basis: 0;
-  -ms-flex-preferred-size: auto;
   flex-grow: 1;
   flex-shrink: 1;
   min-height: min-content;
-}
-
-.tile.is-ancestor {
-  margin-left: -0.75rem;
-  margin-right: -0.75rem;
-  margin-top: -0.75rem;
-}
-
-.tile.is-ancestor:last-child {
-  margin-bottom: -0.75rem;
-}
-
-.tile.is-ancestor:not(:last-child) {
-  margin-bottom: 0.75rem;
-}
-
-.tile.is-child {
-  margin: 0 !important;
-}
-
-.tile.is-parent {
   padding: 0.75rem;
+  display: flex;
 }
 
-@media screen and (min-width: 769px), print {
-  .tile:not(.is-child) {
-    display: flex;
-  }
-}
-
-.section {
-  padding: 2rem 0;
+small-caps {
+  font-variant: small-caps;
+  letter-spacing: 0.05rem;
+  line-height: 0;
+  text-transform: lowercase;
 }
 
-.section-vertical {
-  padding: 1.5rem 0;
+small-caps[intro] {
+  font-size: 2rem !important;
+  text-transform: none;
 }
 
-@media screen and (max-width: 1087px) {
-  .section {
-    padding: 1.5rem;
-  }
+resume-page {
+  display: flex;
+  min-height: 100vh;
+  margin-top: -4rem;
 }
 
-.footer {
-  padding: 1.5rem;
+resume-page column-left {
+  background-image: url("/images/shells.jpg");
+  background-position: center;
+  background-size: cover;
+  display: block;
+  flex: none;
+  min-height: 50vh;
+  padding: 0.75rem;
+  width: 33%;
 }
 
-/*
- * Custom Resets
- */
-
-article.content {
-  min-height: 452px;
+resume-page column-left p a {
+  font-size: 0.75rem;
+  border-bottom: none;
+  padding: 10px;
+  border-radius: 3px;
+  margin-bottom: 1.5rem;
 }
 
-video {
+resume-page column-left h1 {
+  font-size: 2rem;
   display: inline-block;
-  box-shadow: 0 0.25rem 1rem rgba(48, 55, 66, 0.3);
-}
-
-a {
-  border-bottom: 1px solid #999;
-  color: #014cc6;
-  cursor: pointer;
-  text-decoration: none;
-  overflow-wrap: break-word;
-}
-a:hover {
-  border-bottom: 2px solid #999;
-  text-shadow: 0 0 currentColor;
+  border-bottom: 1px solid transparent;
+  margin-bottom: 1rem;
 }
 
-a:focus {
-  border-bottom: 3px solid #999;
+resume-page column-left h1 a {
+  display: inline-block;
 }
 
-h1:target,
-h2:target,
-h3:target {
-  text-decoration: underline;
-  text-decoration-style: double;
+resume-page column-left section {
+  text-align: center;
+  padding: 2rem 0;
 }
 
-:target::before {
-  content: "";
+resume-page column-right {
   display: block;
-  height: 5rem;
-  margin-top: -5rem;
-  visibility: hidden;
-}
-
-ol {
-  counter-reset: ol;
-}
-
-ol,
-.document > ul {
-  margin-left: 4rem;
-  margin-top: 1.5rem;
-}
-
-ol li,
-.document > ul li {
-  -ms-hyphens: auto;
-  -ms-word-break: normal;
-  overflow-wrap: break-word;
-  word-break: break-word;
-  font-size: 1.25rem;
-  list-style: none;
+  max-height: 100vh;
+  overflow: auto;
+  width: 100%;
 }
 
-ol li + li {
-  margin-top: 1rem !important;
+resume-page column-right main {
+  max-width: 1152px;
+  padding: 0 3rem 0 3rem;
 }
 
-ol li:before {
-  border-radius: 100%;
-  border: 1px solid;
-  content: counter(ol);
-  counter-increment: ol;
-  font-size: 1rem;
+resume-page column-right h1 {
+  font-size: 70%;
   font-weight: 700;
-  margin-left: -2.75rem;
-  margin-top: 0.25rem;
-  padding: 0 0.5rem;
-  position: absolute;
-}
-
-figure > a,
-.navbar-item,
-.webring a,
-.article__more__content a,
-.front__more,
-.is-mobile .has-text-centered > a,
-.article__list li a,
-.tableofcontents li a,
-.resume__label,
-.resume__container a,
-.isso-comment-footer a,
-.abstract.tile > a {
-  border-bottom: none !important;
-}
-.abstract.tile.is-ancestor {
-  margin-top: 2rem;
-}
-
-.article__more__content time {
-  margin-right: 1rem;
-  font-size: 1.125rem;
   letter-spacing: 0.05rem;
-  font-variant: all-small-caps;
+  margin-bottom: 0.25rem;
+  text-transform: uppercase;
+  line-height: 1.75;
 }
 
-.article__more__content li {
+resume-page column-section {
   display: flex;
-  align-items: center;
+  margin-bottom: -0.75rem;
+  margin-left: -0.75rem;
+  margin-right: -0.75rem;
+  margin-top: -0.75rem;
 }
 
-.article__more__content li p {
-  flex: 1;
-  white-space: nowrap;
-  overflow: hidden;
-  padding-right: 1rem;
-  text-overflow: ellipsis;
+resume-page column-stack,
+resume-page column-questions {
+  flex-basis: 0;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding: 0.75rem;
 }
 
-@media screen and (max-width: 968px) {
-  .article__more__content li {
-    display: block;
-  }
-  .article__more__content li p {
-    white-space: normal;
-  }
+resume-page article {
+  display: block;
+  margin: 2.5rem 0 0 0;
+  max-width: 100%;
+  padding: 0;
 }
 
-.image__thumbnail {
-  max-height: 222px;
-}
-.medium-zoom-overlay {
-  background-color: #fff;
-  background-color: rgba(255, 255, 255, 0.9);
+resume-page article p {
+  margin: 0;
+  font-size: 0.75rem;
 }
 
-/*
- * Fonts
- */
-
-body,
-button,
-input,
-select,
-textarea,
-.sans-serif {
-  font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
-    "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
-    "Segoe UI Symbol";
+resume-page article > section h1 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  letter-spacing: normal;
+  margin-bottom: 0.75rem;
+  text-transform: none;
 }
 
-.serif,
-article > mark,
-.document ol li,
-.document > ul li {
-  font-family: Charter, Georgia, "Book Antiqua", serif;
+resume-page timeline-item {
+  display: flex;
+  position: relative;
+  margin-left: 0.35rem;
+  padding-bottom: 2rem;
 }
 
-pre,
-code,
-svg text,
-.monospace,
-blockquote > p.serif {
-  font-family: "Fira Code", "Lucida Console", "Andale Mono", monospace;
+resume-page timeline-item aside {
+  position: absolute;
+  background: #b3cfe6;
+  border: 3px solid #fff;
+  border-radius: 100%;
+  content: "";
+  display: block;
+  height: 0.8rem;
+  left: -0.35rem;
+  top: 1.2rem;
+  width: 0.8rem;
 }
 
-.document a {
-  color: #000;
+resume-page timeline-item:before {
+  content: "";
+  display: block;
+  width: 1px;
+  height: 100%;
+  position: absolute;
+  left: 0;
+  top: 0;
 }
 
-article > mark,
-.is-size-serif {
-  font-size: 1.25rem !important;
+resume-page timeline-content {
+  padding: 1rem 0 0 2rem;
 }
 
-.content h1,
-.content h2,
-.content h3,
-.document h1 a,
-.document h2 a,
-.document h3 a {
-  color: #111;
-  font-weight: 400;
-  line-height: 1.4;
-}
+/* ----- Attributes ----- */
 
-blockquote .blockquote-footer {
-  margin-top: 1.3rem;
-}
-blockquote > p.serif {
-  font-size: 1.2rem !important;
+[hidden] {
+  display: none;
 }
 
-.smallcaps {
-  font-variant: small-caps;
-  letter-spacing: 0.05rem;
-  line-height: 0;
-  text-transform: lowercase;
-}
-.smallcapsintro {
-  font-size: 2rem !important;
-  text-transform: none;
+[data-disabled] {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
-/*
- * Text selection
- */
-
-::selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
-}
-::-webkit-selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
-}
-::-moz-selection {
-  color: #fff;
-  background-color: #000;
-  text-shadow: 0 0 currentColor;
+[data-resume] {
+  margin: 0;
+  max-width: 100%;
 }
 
-/*
- * Front page
- */
+/* ----- Context Menu ----- */
 
-.introduction {
-  padding: 1em;
-  margin-top: 0.75em;
+input[type="checkbox"]:checked ~ context-menu {
+  display: block;
 }
 
-.front__more {
-  text-transform: uppercase;
-}
-.front__more svg {
-  vertical-align: bottom;
+context-menu[right] {
+  left: auto;
+  right: 0;
 }
 
-.recent__article p,
-.article__summary {
-  margin-bottom: 0.75rem !important;
+context-menu[list] {
+  top: 0.5rem;
+  right: 0.5rem;
 }
 
-/*
- * Navigation Bar Reset
- */
-
-a.navbar-item:focus,
-a.navbar-item:hover,
-.navbar-item:hover label {
-  color: #000000;
-}
-.navbar__icon:hover svg,
-.navbar__icon:hover label svg {
-  fill: #ffc966;
+context-menu {
+  display: none;
+  left: 0;
+  min-width: 6.25rem;
+  position: absolute;
+  top: 100%;
+  z-index: 20;
 }
 
-.navbar-item {
+context-menu-content {
+  border-radius: 0.25rem;
+  border: 1px solid;
   display: block;
-  line-height: 1.25;
-  padding: 0.5rem 0.75rem;
-  position: relative;
 }
 
-.navbar {
+nav.hide {
+  top: -5rem !important;
+}
+
+body > nav {
+  margin: 0 auto;
+  left: 0;
+  min-height: 4rem;
+  position: fixed;
+  right: 0;
+  top: 0;
+  z-index: 30;
   -webkit-transition: top 0.15s;
   -o-transition: top 0.15s;
   transition: top 0.15s;
 }
-.headroom {
-  top: -5em !important;
-}
-.navbar-item {
-  color: #555;
-}
-.navbar {
-  box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.05);
-  background-color: #fcfcfc;
-  background-color: rgba(252, 252, 252, 0.97);
-  min-height: 4rem;
-}
-.navbar,
-.navbar-menu {
-  background-color: #fcfcfc;
-  background-color: rgba(252, 252, 252, 0.97);
-}
-.navbar-menu {
+
+body > nav section {
+  align-items: center;
   display: flex;
-  overflow: visible !important;
-  box-shadow: none;
-}
-.navbar-menu .columns {
+  justify-content: center;
   margin: 0 auto;
-  display: flex;
-}
-.navbar-menu .column {
-  padding: 0;
-}
-html.has-navbar-fixed-top,
-body.has-navbar-fixed-top,
-html.has-navbar-fixed-bottom,
-body.has-navbar-fixed-bottom {
-  padding-top: 4rem;
+  max-width: 1152px;
 }
-.navbar .container,
-.navbar__left,
-.navbar__middle,
-.navbar__right {
-  min-height: 4rem;
+
+nav column-left,
+nav column-right,
+nav column-middle {
+  display: inline-flex;
   align-items: center;
 }
-.navbar__tablet__compact .navbar__active {
-  border-bottom: 2px solid #75b2f0;
-}
 
-@media screen and (max-width: 1087px) {
-  .navbar-menu .columns {
-    margin: 0 1em;
-    width: 100%;
-  }
-  .navbar-menu {
-    padding: 0 !important;
-  }
+nav column-middle {
+  flex: 3;
+  justify-content: center;
+  width: 100%;
 }
 
-@media screen and (min-width: 1088px) {
-  .navbar-menu,
-  .navbar-item {
-    display: inline-block;
-  }
+nav column-left {
+  justify-content: flex-end;
 }
-@media screen and (max-width: 400px) {
-  .is-mobile {
-    display: block !important;
-  }
-  .is-mobile .column {
-    width: 100% !important;
-  }
+
+nav column-right {
+  justify-content: flex-start;
 }
 
-.navbar__left {
-  display: inline-flex;
-  justify-content: flex-end;
+nav column-left,
+nav column-right {
+  flex: 1;
+  margin: 0 1rem;
 }
-.navbar__right {
-  display: inline-flex;
-  justify-content: flex-start;
+
+nav column-left button-repo {
+  margin-right: 0.75rem;
 }
-.navbar__middle {
-  display: inline-flex;
-  justify-content: center;
+
+nav column-middle context-menu a {
+  padding: 0.65rem 1rem;
+  display: block;
+  width: 100%;
+  line-height: 1.25;
 }
 
-@media screen and (max-width: 900px) {
-  .navbar__left,
-  .navbar__right {
-    display: none;
-  }
+nav column-middle context-menu svg {
+  display: none;
 }
 
-.navbar__icon {
-  display: flex;
+nav column-middle > a {
   align-items: center;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.75rem;
+  height: 4rem;
   justify-content: center;
+  line-height: 1.5;
   padding: 0 1.5rem;
-  height: 4rem;
-}
-.navbar__icon__label {
-  font-size: 0.75rem;
+  text-align: center;
 }
-.navbar__icon__label:after {
-  display: block;
+
+nav column-middle span:before {
   content: attr(title);
+  display: block;
   font-weight: 700;
   height: 0;
   overflow: hidden;
   visibility: hidden;
 }
 
-@media screen and (max-width: 624px) {
-  .navbar-menu .columns {
-    margin: 0;
-  }
-  .navbar__icon {
-    padding: 0;
-    width: 20%;
-  }
-  .navbar__icon__hidden {
-    display: none;
-  }
-}
-.navbar__active {
-  color: #014cc6 !important;
-}
-.navbar__active svg {
-  fill: #d1ebff;
-}
-.navbar__active .navbar__icon__label {
-  font-weight: 700;
-}
-.navbar__icon__menu {
-  margin: 0;
-  justify-content: center;
-  height: 100%;
+nav column-middle context-menu button {
+  height: auto;
+  display: inline;
+  background: transparent;
+  padding: 0.65rem 1rem;
+  width: 100%;
+  text-align: left;
+  line-height: 1.25;
 }
-.navbar__middle .dropdown {
+
+nav column-middle context-menu button span {
   padding: 0;
 }
 
-.dropdown label {
-  cursor: pointer;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 1.5rem;
-}
-.dropdown-content .navbar-item {
-  margin: 0;
-  padding: 0.65rem 1rem;
-  width: 100%;
-}
-.dropdown-content .navbar__active {
+nav column-middle > a[data-active],
+nav column-middle context-menu a[data-active] {
   font-weight: 700;
-  background-color: #ebf2ff;
-}
-.dropdown-content a.navbar-item:hover,
-.dropdown-content .theme-toggle-button:hover {
-  background-color: #ffeac2;
-  color: black;
-}
-.dropdown-input[type="checkbox"]:checked ~ .dropdown-menu {
-  display: block;
 }
 
-.error__headerSize {
-  font-size: 8rem;
+nav column-middle more-button {
+  -webkit-tap-highlight-color: transparent;
+  align-items: center;
+  display: flex;
+  height: 4rem;
+  justify-content: center;
+  position: relative;
 }
 
-nav .item__box {
-  margin: 0 0 0 0.7rem;
-}
-.item__box span {
-  padding-left: 10px;
-}
-.item__box svg {
-  stroke-width: 1.5px;
-  width: 20px;
-  height: 20px;
-}
-.item__box:hover,
-.item__box:hover svg,
-.item__box:focus svg {
-  fill: currentColor;
-  color: #000;
-}
-.item__no__hover:hover svg,
-.item__no__hover:focus svg {
-  fill: transparent !important;
-}
-.item__box {
-  height: 2rem;
+nav column-middle more-button label {
+  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
-  font-weight: 400;
-  padding: 0.25rem 1rem;
-  background-color: #f2f2f2;
-  border: 0 solid transparent !important;
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
-}
-
-/*
- * Contact Form
- */
-
-.alert {
-  color: #f00;
-}
-.agree {
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 0;
-  width: 0;
-  z-index: -1;
-}
-.message__success {
-  background-color: #effaef;
-  padding: 1em;
-  border: 1px solid #28d263;
-  margin-bottom: 1em;
-}
-
-/*
- * Footer
- */
-
-.footer__section {
-  line-height: 2.2;
-}
-.hero-foot > .footer > .columns {
-  margin: 0;
-}
-.footer a {
-  color: #333;
-}
-
-/*
- * Posts and Projects
- */
-
-.article__title a {
-  line-height: 1.8;
-}
-.article__date {
-  margin-bottom: 0.75rem;
-}
-.article__divider {
-  background-color: transparent;
-}
-.article__updated {
-  padding: 0.5em;
-}
-ul.article__list {
-  line-height: 2.5;
-}
-.article__list li:hover {
-  background-color: #f1f1f1;
-}
-.article__list a {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.article__list__date {
-  padding-right: 1rem;
-  text-transform: uppercase;
-}
-.article__list a,
-h1.article__list {
-  padding: 0 0.5rem;
-}
-h1.article__list:not(:first-child) {
-  margin-top: 1.5rem;
-}
-.article__heading__anchor {
-  border-bottom: none;
-}
-
-.webring li {
-  padding-top: 1em;
-}
-.webring ul {
-  margin-top: 0;
-}
-.webring .articles h2 {
-  margin-bottom: 0.1em;
+  flex-direction: column;
+  height: 100%;
+  padding: 0 1.5rem;
+  line-height: 1.5;
 }
 
-/*
- * Resume Page
- */
-
-.max__height {
-  min-height: 100vh;
+nav column-middle > a span,
+nav column-middle more-button label span {
+  margin-top: 0.15rem;
+  font-size: 0.75rem;
 }
 
-.resume__container {
-  padding: 0 3em 0 3em;
-  max-width: 1152px;
-}
-.resume__section {
-  padding: 0 1.5em;
-}
-.resume__break {
-  padding: 0.75em 1.5em;
-}
-.resume__column {
-  padding: 0;
-}
-.resume__label {
-  padding: 10px;
-  color: #fff !important;
-  border-radius: 3px;
-}
-.resume__label:hover {
-  background-color: #fcfcfc;
-  color: #333 !important;
+nav column-middle a:hover svg,
+nav column-middle more-button:hover svg {
+  fill: #ffc966;
 }
 
-.inline__padding {
-  display: inline-block;
-  margin: 0.5em;
-  border-bottom: 1px solid transparent !important;
-}
+/* ----- Responsive ----- */
 
-@media screen and (min-width: 769px) {
-  .column__right {
-    max-height: 100vh;
-    overflow: auto;
+@media screen and (max-width: 1152px) {
+  column-left button-repo {
+    display: none;
   }
 }
 
-.column__background {
-  background-color: #4587c1;
-  background-image: url("/images/shells.jpg");
-  background-position: center;
-  background-size: cover;
-  min-height: 50vh;
-}
-
-.text__frame {
-  border-radius: 2px;
-  display: inline-block;
-  padding: 10px;
-}
-
-/*
- * Focus Links
- */
-
-a:focus,
-a:focus span {
-  background-color: #ffeac2;
-  color: #000;
-  outline: none;
-}
-a:focus img {
-  outline: 2px solid;
-}
-a:hover img {
-  box-shadow: 0 8px 32px #999;
-}
-figure > a:focus {
-  background-color: transparent;
-}
-.is-success:focus,
-.is-link:focus {
-  background-color: #ebebeb !important;
-}
-
-/*
- * Figures
- */
-
-figure div {
-  height: 0;
-}
-
-figcaption,
-figcaption code {
-  font-size: 0.95em;
-  margin-bottom: 1em;
-  margin-top: 1.5em;
-  text-align: center;
-}
-
-video-container {
-  display: block;
-  text-align: center;
+@media screen and (max-width: 824px) {
+  nav column-left,
+  nav column-right {
+    display: none;
+  }
+  nav column-middle > a,
+  nav column-middle context-menu-container {
+    width: 20%;
+  }
 }
 
-/*
- * Theme toggle
- */
-
-.theme-toggle-button {
-  border-radius: 0;
-  height: auto;
-  border: none;
-  justify-content: start;
-  font-weight: 400;
+@media screen and (max-width: 768px) {
+  table-contents {
+    display: none;
+  }
+  home-page article-card {
+    clear: both;
+  }
+  home-page margin-note {
+    margin: 0 0 1.5rem 0 !important;
+  }
+  recent-posts article-card {
+    display: block;
+  }
+  recent-posts article-thumbnail {
+    margin: 0 0 1.5rem 0;
+  }
+  resume-page {
+    display: block;
+  }
+  resume-page column-left {
+    width: 100%;
+  }
+  resume-page column-right {
+    overflow: visible;
+  }
 }
 
-/*
- * Custom Helpers
- */
-
-.has-padding-none {
-  padding: 0 !important;
-}
-.has-padding-left-md {
-  padding-left: 0.5em !important;
-}
-.has-margin-none {
-  margin: 0 !important;
-}
-.has-margin-left-none {
-  margin-left: 0 !important;
-}
-.has-margin-right-none {
-  margin-right: 0 !important;
-}
-.has-margin-bottom-none {
-  margin-bottom: 0 !important;
-}
-.has-margin-bottom-sm {
-  margin-bottom: 0.25em !important;
-}
-.has-margin-bottom-md {
-  margin-bottom: 0.5em !important;
-}
-.has-margin-bottom-lg {
-  margin-bottom: 1em !important;
-}
-.has-spacing-widest {
-  letter-spacing: 0.1em;
-}
-.has-tap-transparent {
-  -webkit-tap-highlight-color: transparent;
+@media screen and (max-width: 624px) {
+  article-more-content li {
+    display: block;
+  }
+  pagination-controller ul li:not(:first-child):not(:last-child) {
+    display: none;
+  }
+  article-list recent-abstracts {
+    display: block;
+  }
+  article-list recent-abstracts abstract-card {
+    display: block;
+    margin: 0 0 2rem 0;
+  }
+  resume-page column-section {
+    display: block;
+  }
 }
 
-/*
- * Table of Contents
- */
-
-details summary {
-  cursor: pointer;
+@media screen and (max-width: 524px) {
+  nav column-middle > a[data-hidden] {
+    display: none;
+  }
+  contact-page field-set {
+    display: block;
+  }
+  contact-page form field-set section + section {
+    margin-left: 0;
+  }
 }
 
-nav#TableOfContents li:hover {
-  background-color: #f1f1f1;
-}
-nav#TableOfContents ul {
-  margin-left: -0.5em;
-}
-nav#TableOfContents a {
-  display: block;
-  color: #444;
-  padding: 0.125rem 0 0.125rem 0.5rem;
-}
-nav#TableOfContents a {
-  display: block;
-  font-size: 0.8125rem;
+@media screen and (max-width: 424px) {
+  recent-projects article-card {
+    display: block;
+  }
+  recent-projects article-thumbnail {
+    margin: 0 0 1.5rem 0;
+  }
 }
 
-/*
- * Tables
- */
+/* ----- Tufte CSS: https://edwardtufte.github.io/tufte-css/ ----- */
 
-td,
-th {
-  padding: 0;
-}
-table td,
-table th {
-  vertical-align: top;
-}
-td:not([align]),
-th:not([align]) {
-  text-align: left;
-}
-table td {
-  padding: 0.4rem;
-  min-width: 8rem;
-}
-table td:not([align]),
-table th:not([align]) {
-  text-align: left;
-}
-table {
-  width: 100%;
-  border-collapse: collapse;
-  border-spacing: 0;
-}
-table th {
-  font-weight: 700;
-  font-variant: small-caps;
-  text-transform: lowercase;
-  letter-spacing: 0.05rem;
-  padding: 0.4rem;
-}
-table,
-table code {
-  font-size: 1.15rem;
-}
-@media (max-width: 550px) {
-  table {
-    table-layout: fixed;
-  }
+body {
+  counter-reset: sidenote-counter;
 }
 
-/*
- * Tufte CSS: https://edwardtufte.github.io/tufte-css/
- */
-
-.leftnote {
+side-note[left],
+margin-note[left] {
   float: left;
   clear: left;
   margin-left: -40%;
   margin-left: -22vw;
 }
 
-.rightnote {
+side-note[right],
+margin-note[right] {
   float: right;
   clear: right;
   margin-right: -40%;
   margin-right: -22vw;
 }
 
-.leftnote,
-.rightnote {
+side-note[left],
+side-note[right],
+margin-note[left],
+margin-note[right] {
   width: 32%;
   width: 18vw;
-  margin-top: 0;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
   font-size: 1rem;
   vertical-align: baseline;
   position: relative;
-  color: #444;
 }
 
-.sidenote,
-.marginnote {
+side-note,
+margin-note {
   -ms-hyphens: auto;
   -ms-word-break: normal;
   overflow-wrap: break-word;
@@ -1993,95 +1420,94 @@ table code {
   letter-spacing: 0.01rem;
 }
 
-.sidenote:hover,
-.marginnote:hover {
+side-note:hover,
+margin-note:hover {
   -webkit-user-select: inherit;
   -ms-user-select: inherit;
   user-select: inherit;
 }
 
 @media (min-width: 769px) {
-  .rightnote {
+  side-note[right],
+  margin-note[right] {
     padding-right: 1.125em;
   }
-  .leftnote {
+  side-note[left],
+  margin-note[left] {
     text-align: right;
     padding-left: 1.125em;
   }
-  .leftnote,
-  .rightnote {
+  side-note[left],
+  side-note[right],
+  margin-note[left],
+  margin-note[right] {
     max-width: 22em;
   }
 }
 @media (min-width: 2000px) {
-  .leftnote {
+  side-note[left],
+  margin-note[left] {
     margin-left: -28em;
   }
-  .rightnote {
+  side-note[right],
+  margin-note[right] {
     margin-right: -28em;
   }
 }
 
-body {
-  counter-reset: sidenote-counter;
-}
-
-label.sidenote-mark {
+side-note-aside label {
   display: inline;
 }
-input.sidenote-toggle,
-input.marginnote-toggle {
+
+side-note-aside input[name="toggle"],
+margin-note-aside input[name="toggle"] {
   display: none;
 }
 
-.sidenote-mark {
+side-note-aside label {
   counter-increment: sidenote-counter;
 }
-.sidenote:before {
+
+side-note:before {
   content: counter(sidenote-counter) " ";
 }
-.sidenote-mark:after {
+
+side-note-aside label:after {
   content: counter(sidenote-counter);
   left: 0.1rem;
 }
 
-.sidenote-mark:after,
-.sidenote:before,
-.marginnote-mark:after {
+side-note-aside label:after,
+side-note:before,
+margin-note-aside label:after {
   position: relative;
   vertical-align: baseline;
   font-size: 0.7rem;
   top: -0.5rem;
 }
 
-.sidenote-container mark {
+side-note-aside mark,
+margin-note-aside mark {
   background-color: transparent;
   color: unset;
 }
 
-article > mark,
-.sidenote-container:hover .sidenote-mark span,
-.sidenote-container:hover .sidenote mark,
-.marginnote-container:hover .marginnote-mark span,
-.marginnote-container:hover .marginnote mark,
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  background-color: #ffeac2;
-  color: #000;
-}
-.sidenote-container:hover .sidenote a,
-.marginnote-container:hover .marginnote a {
-  border-color: dodgerblue;
+side-note[image],
+margin-note[image] {
+  text-align: center;
 }
-.sideimage > a,
-.sideimage a:focus {
+
+side-note[image] > a,
+side-note[image] a:focus,
+margin-note[image] > a,
+margin-note[image] a:focus {
   border-bottom: 1px solid transparent !important;
   background-color: transparent !important;
 }
 
 @media (max-width: 768px) {
-  .sidenote-toggle:checked + .sidenote,
-  .marginnote-toggle:checked + .marginnote {
+  side-note-aside input[name="toggle"]:checked + side-note,
+  margin-note-aside input[name="toggle"]:checked + margin-note {
     display: block;
     float: left;
     left: 1rem;
@@ -2091,67 +1517,50 @@ article > mark,
     vertical-align: baseline;
     position: relative;
   }
-  label {
-    cursor: pointer;
+  side-note-aside input[name="toggle"]:checked + side-note[image] a,
+  margin-note-aside input[name="toggle"]:checked + margin-note[image] a {
+    display: block;
   }
-  label.marginnote-toggle:not(.sidenote-number) {
-    display: inline;
+  side-note label,
+  margin-note label {
+    cursor: pointer;
   }
-  .sidenote,
-  .marginnote {
+  side-note,
+  margin-note {
     display: none;
   }
-  .tableofcontents {
-    display: none !important;
-  }
-  .sidenote-mark,
-  .marginnote-mark {
+  side-note-aside label,
+  margin-note-aside label {
     border-bottom: 1px dashed #999;
   }
-  .marginnote-mark:after {
+  margin-note-aside label:after {
     content: "\0002B";
-    font-weight: bold;
+    font-weight: 700;
   }
-  .sideimage {
-    margin: 0 !important;
+  side-note[image],
+  margin-note[image] {
     left: 0 !important;
+    margin: 1rem 0 !important;
     width: 100% !important;
   }
-  .sidenote mark {
+  side-note mark {
     background-color: transparent !important;
     color: unset !important;
   }
 }
 
-.document .subtitle {
-  margin-top: 0 !important;
-  margin-bottom: 1.5em !important;
-}
-.recent__article .marginnote,
-.recent__article .sidenote {
-  margin-top: 0 !important;
-}
+/* ----- Side Notes Float Clear ----- */
 
 @media (max-width: 768px) {
-  .recent__article .columns,
-  .content blockquote,
-  .highlight {
+  code-block {
     clear: both;
   }
 }
 
-/* IE quote height fix */
-
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  .quote {
-    height: 0;
-  }
-}
-
-/* Embed friendly */
+/* ----- Embed Friendly ----- */
 
 @media (max-height: 16rem) {
-  html.has-navbar-fixed-top {
+  html {
     padding: 0;
   }
   nav {
@@ -2159,55 +1568,44 @@ article > mark,
   }
 }
 
-/*
- * Isso comments
- */
+/* ----- Isso Comments ----- */
 
-#isso-thread * {
-  box-sizing: border-box;
-  word-wrap: break-word;
+#isso-thread {
+  padding: 0;
+  margin: 0;
 }
 
 #isso-thread .isso-comment-header a {
   text-decoration: none;
 }
 
-#isso-thread {
-  padding: 0;
-  margin: 0;
+#isso-thread div.text p:not(:last-child) {
+  margin-bottom: 1.5rem;
 }
 
-#isso-thread > h4 {
+.isso-comment > div.text-wrapper > .text a {
+  color: #000;
+}
+
+#isso-thread h4 {
   color: #555;
-  margin-bottom: 1em;
+  margin-bottom: 1rem;
 }
 
-#isso-thread > .isso-feedlink {
+#isso-thread .isso-feedlink {
   float: right;
-  padding-left: 1em;
+  padding-left: 1rem;
 }
 
-#isso-thread > .isso-feedlink > a {
-  font-size: 0.8em;
+#isso-thread .isso-feedlink a {
+  font-size: 0.8rem;
   vertical-align: bottom;
 }
 
-#isso-thread .textarea {
-  height: auto !important;
-  line-height: 1.8;
-  outline: 0;
-  overflow: auto;
-  resize: auto;
-}
-
-#isso-thread .textarea.placeholder {
-  color: #545454;
-}
-
 #isso-root .isso-comment {
-  max-width: 68em;
-  padding-top: 0.95em;
-  margin: 0.95em auto;
+  max-width: 68rem;
+  padding-top: 0.95rem;
+  margin: 0.95rem auto;
 }
 
 #isso-root .preview .isso-comment {
@@ -2215,7 +1613,7 @@ article > mark,
   margin: 0;
 }
 
-.isso-comment > div.avatar {
+.isso-comment div.avatar {
   float: left;
   width: 16px;
   height: 16px;
@@ -2234,7 +1632,7 @@ article > mark,
   padding-left: 0.5rem;
 }
 
-.isso-comment > div.avatar > svg {
+.isso-comment div.avatar svg {
   max-width: 48px;
   max-height: 48px;
   border: 1px solid rgba(0, 0, 0, 0.2);
@@ -2242,7 +1640,7 @@ article > mark,
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }
 
-.isso-comment > div.text-wrapper {
+.isso-comment div.text-wrapper {
   display: block;
 }
 
@@ -2250,115 +1648,95 @@ article > mark,
   padding-left: 2rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header,
-.isso-comment > div.text-wrapper > .isso-comment-footer {
-  font-size: 0.95em;
-}
-
-.isso-comment > div.text-wrapper > .text a {
-  color: black;
+.isso-comment .isso-comment-header,
+.isso-comment .isso-comment-footer {
+  font-size: 0.95rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .permalink {
+.isso-comment .isso-comment-header .permalink {
   color: #555;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .spacer {
+.isso-comment .isso-comment-header .spacer {
   padding: 0 6px;
   color: #999;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .note {
+.isso-comment .isso-comment-header .note {
   float: right;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-header .author {
-  font-weight: bold;
+.isso-comment .isso-comment-header .author {
+  font-weight: 700;
   color: #555;
 }
 
-.isso-comment > div.text-wrapper > .textarea-wrapper .textarea,
-.isso-comment > div.text-wrapper > .textarea-wrapper .preview {
-  margin: 0.25rem 0;
-}
-
 .isso-comment > div.text-wrapper > div.text p:last-child {
-  margin-bottom: 0.25rem;
+  margin-bottom: 0.5rem;
 }
 
-.isso-comment > div.text-wrapper > div.text h1,
-.isso-comment > div.text-wrapper > div.text h2,
-.isso-comment > div.text-wrapper > div.text h3,
-.isso-comment > div.text-wrapper > div.text h4,
-.isso-comment > div.text-wrapper > div.text h5,
-.isso-comment > div.text-wrapper > div.text h6 {
+.isso-comment h1,
+.isso-comment h2,
+.isso-comment h3,
+.isso-comment h4,
+.isso-comment h5,
+.isso-comment h6 {
   font-size: 130%;
-  font-weight: bold;
+  font-weight: 700;
 }
 
-.isso-comment > div.text-wrapper > div.textarea-wrapper .textarea,
-.isso-comment > div.text-wrapper > div.textarea-wrapper .preview {
+.isso-comment div.textarea-wrapper .textarea,
+.isso-comment div.textarea-wrapper .preview {
   width: 100%;
-  border: 1px solid #f0f0f0;
-  border-radius: 2px;
-  box-shadow: 0 0 2px #888;
+  margin: 0.5rem 0 0.75rem 0;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-footer {
-  font-size: 0.8em;
-  color: gray;
+.isso-comment .isso-comment-footer {
+  font-size: 85%;
+  color: #555;
   clear: left;
 }
 
-.isso-feedlink,
-.isso-comment > div.text-wrapper > .isso-comment-footer a {
-  font-weight: bold;
+.isso-feedlink {
+  font-weight: 700;
   text-decoration: none;
 }
 
+.isso-comment .isso-comment-footer a {
+  border: none;
+  font-weight: 700;
+  padding: 0.25rem 0.5rem;
+}
+
 .isso-feedlink:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer a:hover svg,
-.isso-comment > div.text-wrapper > .isso-comment-footer .reply:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .edit:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .cancel:hover,
-.isso-comment > div.text-wrapper > .isso-comment-footer .delete:hover {
+.isso-comment .isso-comment-footer a:hover svg,
+.isso-comment .isso-comment-footer .edit:hover,
+.isso-comment .isso-comment-footer .cancel:hover,
+.isso-comment .isso-comment-footer .reply:hover,
+.isso-comment .isso-comment-footer .delete:hover {
   color: #111111;
   text-shadow: #aaaaaa 0 0 1px !important;
   background-color: #ccc;
   fill: #111111;
+  border-radius: 0.25rem;
 }
 
-.isso-comment > div.text-wrapper > .isso-comment-footer > a {
-  position: relative;
-  top: 0.2em;
-  padding: 0.3em;
-  border-radius: 0.1em;
-}
-
-.isso-comment > div.text-wrapper > .isso-comment-footer .votes {
-  background-color: #014cc6;
-  border-radius: 3px;
-  padding: 2px 6px;
-  font-weight: bold;
-  color: white;
-  margin-right: 0.5rem;
-}
-
-.isso-comment > div.text-wrapper > .isso-comment-footer .upvote svg,
-.isso-comment > div.text-wrapper > .isso-comment-footer .downvote svg {
-  position: relative;
-  top: 0.2em;
+.isso-comment .isso-comment-footer .votes,
+.isso-comment .isso-comment-footer .spacer,
+.isso-comment .isso-comment-footer .upvote,
+.isso-comment .isso-comment-footer .downvote {
+  display: none;
 }
 
 .isso-comment .isso-postbox {
-  margin-top: 0.8em;
+  margin-top: 0.8rem;
 }
 
-.isso-comment-footer > .delete {
+.isso-comment-footer .delete {
   margin: 0.2rem 0 0 0.4rem;
 }
 
-.isso-comment-footer > .cancel {
+.isso-comment-footer .cancel {
   margin-left: 0.3rem;
 }
 
@@ -2367,100 +1745,74 @@ article > mark,
 }
 
 .isso-postbox {
-  max-width: 68em;
-  margin: 0 auto 2em;
+  max-width: 68rem;
+  margin: 0 auto 2rem;
   clear: right;
 }
 
-.isso-postbox > .form-wrapper {
+.isso-postbox .form-wrapper {
   display: block;
   padding: 0;
 }
 
-.isso-postbox > .form-wrapper > .auth-section,
-.isso-postbox > .form-wrapper > .auth-section .post-action {
+.isso-postbox .auth-section,
+.isso-postbox .auth-section .post-action {
   display: block;
 }
 
-.isso-postbox > .form-wrapper .textarea,
-.isso-postbox > .form-wrapper .preview {
-  margin: 0 0 0.6em;
-  padding: 0.4em 0.8em;
+.isso-comment .textarea,
+.isso-postbox .form-wrapper .textarea,
+.isso-postbox .form-wrapper .preview {
+  margin: 0 0 0.6rem;
+  padding: 0.4em 0.8rem;
   border-radius: 2px;
   border: 1px solid rgba(0, 0, 0, 0.2);
   background-color: #fafafa;
   min-height: 150px;
 }
 
-#isso-thread .textarea:focus,
-#isso-thread input:focus {
-  border-color: rgb(73, 146, 208);
-}
-
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+.isso-postbox .auth-section .input-wrapper {
   display: inline-block;
   position: relative;
-  padding-bottom: 0.6em;
+  padding-bottom: 0.6rem;
   width: 33.33%;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper:nth-child(-n + 2) {
-  padding-right: 0.6em;
+.isso-postbox .auth-section .input-wrapper:nth-child(-n + 2) {
+  padding-right: 0.6rem;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action {
-  padding-left: 0.6em;
+.isso-postbox .auth-section .post-action {
+  padding-left: 0.6rem;
   margin-bottom: 0 !important;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
-  padding: 0.6em 10px;
-  font-size: 0.8em;
-  width: 100%;
-  border-radius: 2px;
-  background-color: #fafafa;
-  line-height: 1.4em;
-  border: 1px solid rgba(0, 0, 0, 0.2);
-}
-
-.isso-postbox > .form-wrapper > .auth-section .post-action {
+.isso-postbox .auth-section .post-action {
   display: inline-block;
   float: right;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action > input {
-  padding: 0.4em;
-  font-size: 0.8em;
-  border-radius: 2px;
-  border: 1px solid #3273dc;
-  cursor: pointer;
-  outline: 0;
-  line-height: 1.7em;
-  width: 6em;
-  background-color: white;
-  color: #1e55ae;
+.isso-postbox input[name="preview"],
+.isso-postbox input[name="edit"] {
+  width: 6rem;
 }
 
-.isso-postbox > .form-wrapper > .auth-section .post-action > input:hover {
-  font-weight: bold;
-}
-
-.isso-postbox > .form-wrapper .preview,
-.isso-postbox > .form-wrapper input[name="edit"],
-.isso-postbox.preview-mode > .form-wrapper input[name="preview"],
-.isso-postbox.preview-mode > .form-wrapper .textarea {
+.isso-postbox .form-wrapper .preview,
+.isso-postbox .form-wrapper input[name="edit"],
+.isso-postbox.preview-mode .form-wrapper input[name="preview"],
+.isso-postbox.preview-mode .form-wrapper .textarea {
   display: none;
 }
 
-.isso-postbox.preview-mode > .form-wrapper .preview {
+.isso-postbox.preview-mode .form-wrapper .preview {
   display: block;
 }
 
-.isso-postbox.preview-mode > .form-wrapper input[name="edit"] {
+.isso-postbox.preview-mode .form-wrapper input[name="edit"] {
   display: inline;
 }
 
-.isso-postbox > .form-wrapper .preview {
+.isso-postbox .preview {
   background-color: #f8f8f8;
   background: repeating-linear-gradient(
     -45deg,
@@ -2471,32 +1823,27 @@ article > mark,
   );
 }
 
-.isso-postbox > .form-wrapper > .notification-section {
+.isso-postbox .notification-section {
   display: none;
   padding-bottom: 10px;
 }
 
-.isso-postbox
-  > .form-wrapper
-  > .notification-section
-  input[name="notification"] {
+.isso-postbox input[name="notification"] {
   margin-right: 0.5rem;
 }
 
 @media screen and (max-width: 600px) {
-  .isso-postbox > .form-wrapper > .auth-section .input-wrapper {
+  .isso-postbox .input-wrapper {
     display: inline-block;
     max-width: 100%;
-    margin: 0 0 0.3em;
+    margin: 0 0 0.3rem;
   }
-  .isso-postbox > .form-wrapper > .auth-section .input-wrapper input {
+  .isso-postbox .input-wrapper input {
     width: 100%;
   }
 }
 
-/*
- * Uppy CSS
- */
+/* ----- Uppy CSS ----- */
 
 .uppy-Dashboard-inner {
   background-color: #fff !important;
@@ -2510,3 +1857,326 @@ article > mark,
 .uppy-size--md .uppy-Dashboard-inner {
   margin: 0 auto;
 }
+
+/* ----- Colors ----- */
+
+::selection {
+  color: #fff;
+  background-color: #000;
+}
+
+::-webkit-selection {
+  color: #fff;
+  background-color: #000;
+}
+
+::-moz-selection {
+  color: #fff;
+  background-color: #000;
+}
+
+a:hover {
+  border-color: #999;
+}
+
+a:focus {
+  background-color: #ffeac2;
+  border-color: #999;
+  color: #000;
+}
+
+a:hover img {
+  color: #999;
+}
+
+html {
+  background-color: #fcfcfc;
+}
+
+body {
+  color: #222;
+}
+
+body > footer a {
+  color: #111;
+}
+
+body .medium-zoom-overlay {
+  background-color: #fff;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+img {
+  color: #ccc;
+}
+
+hr {
+  background-color: #ddd;
+}
+
+video {
+  color: #999;
+}
+
+input,
+textarea {
+  background-color: #f9f9f9;
+  border-color: #ccc;
+}
+
+button,
+button-anchor a,
+pagination-controller a,
+input[type="submit"],
+input[type="button"] {
+  background-color: #f2f2f2;
+  box-shadow: 0 1px 1px #aaa;
+}
+
+button:hover,
+button-anchor a:hover,
+input[type="submit"]:hover,
+input[type="button"]:hover {
+  background-color: #eee;
+}
+
+button:hover svg,
+button-anchor:hover svg {
+  color: #014cc6;
+  fill: #d1ebff;
+}
+
+a,
+home-page article a,
+recent-articles h2 a {
+  border-color: #999;
+  color: #014cc6;
+}
+
+article a,
+article-subsection a {
+  color: #000;
+}
+
+home-page article > h1 em {
+  color: #f05a60;
+}
+
+contact-page aside {
+  background-color: #effaef;
+  border-color: #28d263;
+}
+
+article-archive-list li:hover,
+taxonomy-list > section ul li:hover,
+taxonomy-archive-list > section ul li:hover {
+  background-color: #f1f1f1;
+}
+
+pagination-controller [data-pagination-current] {
+  background-color: #3273dc;
+  border-color: #3273dc;
+  color: #fff;
+}
+
+pagination-ellipsis {
+  color: #b5b5b5;
+}
+
+pagination-controller a {
+  border-color: #dbdbdb !important;
+}
+
+pagination-controller a:hover {
+  border-color: #b5b5b5;
+}
+
+table-contents li:hover {
+  background-color: #f1f1f1;
+}
+
+resume-page column-left {
+  background-color: #4587c1;
+}
+
+resume-page column-left h1,
+resume-page column-left p a,
+resume-page column-left h1 a {
+  color: #fff;
+}
+
+resume-page article > section h1 {
+  color: #245a8a;
+}
+
+resume-page timeline-item:before {
+  background-color: #dbdbdb;
+}
+
+context-menu-content {
+  background-color: #fafafa;
+  border-color: #ddd;
+  box-shadow: 0 0.5rem 1rem -0.125rem #0a0a0a1a, 0 0px 0 1px #0a0a0a05;
+}
+
+body > nav {
+  background-color: #fcfcfc;
+  box-shadow: 0 4px 12px 0 #0000000d;
+}
+
+nav column-middle > a,
+nav column-middle more-button,
+nav column-middle context-menu a,
+nav column-middle context-menu button {
+  color: #555;
+}
+
+nav column-middle > a:hover,
+nav column-middle more-button:hover {
+  color: #000;
+}
+
+nav column-middle context-menu a:hover,
+nav column-middle context-menu button:hover {
+  background-color: #ffeac2;
+  color: #000;
+}
+
+nav column-middle > a[data-active] svg {
+  fill: #d1ebff;
+}
+
+nav column-middle > a[data-active],
+nav column-middle context-menu a[data-active] {
+  color: #014cc6;
+}
+
+input,
+button,
+textarea,
+input[type="submit"],
+input[type="button"],
+button-anchor a,
+home-page label,
+home-page article > h1,
+pagination-controller a {
+  color: #363636;
+}
+
+footer,
+footer a,
+body > footer,
+figcaption,
+figcaption code,
+article-archive-list time,
+article-meta-bottom a,
+article-meta-bottom,
+article-meta-top a,
+article-meta-top,
+article-more-content time,
+article-on-web time,
+article-summary-meta,
+blockquote-footer,
+home-page article > h2,
+margin-note[left],
+margin-note[right],
+side-note[left],
+side-note[right],
+table-contents a,
+table-contents h2,
+taxonomy-archive-list time,
+taxonomy-list time,
+video-container footer a {
+  color: #4a4a4a;
+}
+
+article > mark,
+margin-note-aside:hover label span,
+margin-note-aside:hover margin-note a,
+margin-note-aside:hover margin-note mark,
+side-note-aside:hover label span,
+side-note-aside:hover side-note a,
+side-note-aside:hover side-note mark {
+  background-color: #ffeac2;
+  color: #000;
+}
+
+side-note-aside:hover side-note a,
+margin-note-aside:hover margin-note a {
+  border-color: #1e90ff;
+}
+
+[data-danger] {
+  color: #b30000;
+}
+
+[data-contact-required] {
+  border-color: #b30000;
+}
+
+/* ----- Excludes ----- */
+
+hr,
+h1 a,
+h2 a,
+h3 a,
+figure > a,
+main a:focus,
+footer a:focus,
+figure > a:focus,
+figure > a:hover,
+abstract-thumbnail a,
+abstract-thumbnail a:hover,
+article-archive-link a,
+article-archive-link a:hover,
+article-archive-list ul a,
+article-archive-list ul a:hover,
+article-card article-thumbnail a,
+article-card article-thumbnail a:hover,
+article-meta-top a,
+article-meta-top a:hover,
+article-on-web a,
+button-anchor a:focus,
+button-anchor a:hover,
+code-block language-label a,
+code-block language-label a:hover,
+contact-page field-set,
+home-page home-page-posts > a,
+home-page home-page-posts > a:hover,
+home-page home-page-projects > a,
+home-page home-page-projects > a:hover,
+nav column-middle > a,
+nav column-middle > a:focus,
+nav column-middle > a:hover,
+nav column-middle context-menu a,
+nav column-middle context-menu a:focus,
+nav column-middle context-menu a:hover,
+pagination-controller a,
+pagination-controller a:focus,
+pagination-controller a:hover,
+resume-page a,
+resume-page a:focus,
+resume-page a:hover,
+table-contents a,
+table-contents a:hover,
+taxonomy-archive-list section ul a,
+taxonomy-archive-list section ul a:hover,
+taxonomy-list section ul a,
+taxonomy-list section ul a:hover,
+article-more-content a {
+  border: none;
+}
+
+side-note[image] > a:focus,
+side-note[image] > a:focus-visible,
+margin-note[image] > a:focus,
+margin-note[image] > a:focus-visible,
+nav column-middle > a:focus,
+nav column-middle > a:focus-visible,
+nav column-middle context-menu a:focus,
+nav column-middle context-menu a:focus-visible,
+nav column-middle context-menu button,
+nav column-middle context-menu button:focus,
+nav column-middle context-menu button:focus-visible {
+  box-shadow: none;
+}
diff --git a/public/js/app.js b/public/js/app.js
index e8d8934..cb3dfa0 100644
--- a/public/js/app.js
+++ b/public/js/app.js
@@ -10,6 +10,24 @@ function addClass (el, cl) { if (el) { var a = el.className.split(' '); if (!afi
 function remClass (el, cl) { if (el) { var a = el.className.split(' '); arem(a, cl); el.className = a.join(' '); } }
 function runOnce(action) { runOnce = function(){}; action(); }
 
+/*
+ * Context Menu functions
+ */
+function contextMenuHide(element, event) {
+  /* Hide contextMenu elements */
+  for (var i = 0; i < element.length; i++) {
+    element[i].checked = false;
+  }
+}
+
+function contextMenuClickHide(element, event) {
+  /* Hide contextMenu when clicked outside of region */
+  for (var i = 0; i < element.length; i++) {
+    let notClicked = !element[i].contains(event.target);
+    if (notClicked && contextMenuInputs[i].checked === true) { contextMenuHide(contextMenuInputs); }
+  }
+}
+
 /**
  * Remove url query string
  */
@@ -22,7 +40,7 @@ window.history.replaceState(null, '', url);
 url = window.location.href.split('#')[0];
 
 /**
- * Settings array
+ * Load events
  */
 var settings = { pager: {} };
 
@@ -41,64 +59,17 @@ window.addEventListener('DOMContentLoaded', function(event) {
 });
 
 /*
- * Dropdown functions
- */
-function dropdownHide(element, event) {
-  /* Hide dropdown elements */
-  for (var i = 0; i < element.length; i++) {
-    element[i].checked = false;
-  }
-}
-
-function dropdownClickHide(element, event) {
-  /* Hide dropdown when clicked outside of region */
-  for (var i = 0; i < element.length; i++) {
-    let click = element[i].contains(event.target);
-    if (!click && dropdownInputList[i].checked === true) { dropdownHide(dropdownInputList); }
-  }
-}
-
-/*
- * Hide dropdown when the mouse is far away
- */
-document.addEventListener('mousemove', function(event) {
-  let mouseX = event.pageX;
-  let mouseY = event.pageY;
-
-  function magnitude(x, y) {
-    return Math.sqrt(Math.pow(x, 2) + Math.pow(y, 2));
-  }
-
-  function distance(mouseX, mouseY, element) {
-    let position = element.getBoundingClientRect();
-    let elementX = position.right - (element.offsetWidth / 2 ) + window.pageXOffset;
-    let elementY = position.bottom - (element.offsetHeight / 2 ) + window.pageYOffset;
-    return Math.abs(magnitude(mouseX, mouseY) - magnitude(elementX, elementY));
-  }
-
-  function hide(element, threshold, event) {
-    for (var i = 0; i < element.length; i++) {
-      let proximity = distance(mouseX, mouseY, element[i]);
-      if (proximity > threshold && dropdownInputList[i].checked === true) {
-        dropdownHide(dropdownInputList, event);
-      }
-    }
-  }
-  hide(dropdownContentList, 300, event);
-});
-
-/*
  * Click events
  */
 document.addEventListener('click', function(event) {
-  dropdownClickHide(dropdownMenuList, event);
+  contextMenuClickHide(contextMenus, event);
 });
 
 /*
  * Touch start events
  */
 document.addEventListener('touchstart', function(event) {
-  dropdownClickHide(dropdownMenuList, event);
+  contextMenuClickHide(contextMenus, event);
 });
 
 /**
@@ -109,13 +80,12 @@ var navbar = document.getElementById("navbar");
 var navbarHeight = navbar.offsetHeight;
 var scrolls = 0;
 
-var dropdownInputList = byClass(document, 'dropdown-input');
-var dropdownContentList = byClass(document, 'dropdown-content');
-var dropdownMenuList = byClass(document, 'dropdown');
+var contextMenus = document.getElementsByTagName('context-menu-container');
+var contextMenuInputs = document.querySelectorAll('context-menu-container input');
 
 window.addEventListener('scroll', function(event) {
 
-    dropdownHide(dropdownInputList);
+    contextMenuHide(contextMenuInputs);
 
     var currentPosition = window.pageYOffset;
     var velocity = previousPosition - currentPosition;
@@ -125,11 +95,11 @@ window.addEventListener('scroll', function(event) {
 
     if (scrolls > 3) {
       if (velocity > 75 || currentPosition < navbarHeight) {
-        remClass(navbar, 'headroom');
+        remClass(navbar, 'hide');
       } else if (velocity < -25) {
-        addClass(navbar, 'headroom');
+        addClass(navbar, 'hide');
       } else if (currentPosition > navbarHeight) {
-        runOnce(function () { addClass(navbar, 'headroom'); });
+        runOnce(function () { addClass(navbar, 'hide'); });
       }
     }
 
@@ -631,8 +601,8 @@ window.addEventListener('scroll', function(event) {
  * Activate Medium Zoom
  */
 var imageZoom = mediumZoom('[data-image-zoom]');
-imageZoom.on('open', function(event) { addClass(navbar, 'headroom'); });
-imageZoom.on('close', function(event) { remClass(navbar, 'headroom'); });
+imageZoom.on('open', function(event) { addClass(navbar, 'hide'); });
+imageZoom.on('close', function(event) { remClass(navbar, 'hide'); });
 
 
 /**