html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block; }

body {
  line-height: 1; }

ol,
ul {
  list-style: none; }

blockquote,
q {
  quotes: none; }

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

html,
body {
  width: 100%;
  min-height: 100%;
  min-height: 100vh; }

html {
  font-family: system-ui, "Segoe UI", -apple-system, Roboto, sans-serif;
  font-size: 62.5%; }

body {
  background: #fafafc;
  color: #474747;
  -webkit-text-size-adjust: 100%;
  font-size: 1.6em;
  position: relative;
  padding-bottom: 10rem;
  font-weight: 300;
  text-decoration-skip-ink: auto; }

a {
  color: #1479b8; }
  a:hover, a:active, a:focus {
    color: #14b5b8; }

video {
  max-width: 100%;
  margin-bottom: 2rem; }

h1,
h2,
h3,
h4 {
  font-weight: 500; }

header.XX {
  height: 25rem;
  background: transparent url(../img/logo1.png) center center no-repeat;
  -webkit-background-size: 20rem 20rem;
  -moz-background-size: 20rem 20rem;
  background-size: 20rem 20rem; }

header {
  -webkit-background-size: 17.5rem 14.8484848rem;
  -moz-background-size: 17.5rem 14.8484848rem;
  background-size: 20rem 17rem;
  min-height: 15rem;
  text-align: center; }
  header .site-title {
    display: inline-block;
    font-size: 2rem;
    text-decoration: none;
    color: #fafafc;
    text-transform: uppercase;
    margin-bottom: 1rem; }
    header .site-title i,
    header .site-title b {
      display: inline-block;
      padding: 1.3rem 1rem; }
    header .site-title i {
      font-size: 1.2em;
      background: rgba(255, 55, 0, 0.8);
      -webkit-transform: translate3d(0.25rem, 20%, 0) skewY(-10deg);
      transform: translate3d(0.25rem, 20%, 0) skewY(-10deg); }
    header .site-title b {
      background: rgba(20, 181, 184, 0.8);
      -webkit-transform: translate3d(-0.25rem, 20%, 0) skewY(-10deg);
      transform: translate3d(-0.25rem, 20%, 0) skewY(-10deg); }

header h1 {
  font-size: 4rem;
  text-align: center;
  padding: 2rem 3% 2rem 3%;
  background: #297a58;
  background: #29497e;
  background: transparent;
  color: #fafafc;
  color: #474747;
  color: transparent;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

header h1 a:link,
header h1 a:visited,
header h1 a:hover,
header h1 a:active,
header h1 a:focus {
  color: #fafafc;
  color: #474747;
  text-decoration: none;
  color: transparent;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none; }

.tri {
  width: 100%; }

.tri img {
  max-width: 100%; }

nav {
  text-align: center;
  background: transparent;
  margin-top: 1rem; }

nav ul {
  white-space: nowrap;
  word-spacing: -4px;
  display: inline-block;
  background: rgba(250, 250, 252, 0.7);
  border-radius: 0.5rem; }

nav li {
  display: inline-block;
  white-space: normal;
  word-spacing: normal; }

nav li a:link,
nav li a:visited,
nav li a:hover,
nav li a:active,
nav li a:focus {
  display: inline-block;
  font-size: 2rem;
  padding: 1.3rem 1rem;
  text-decoration: none;
  color: #1479b8; }
  nav li a:link:hover, nav li a:link:active, nav li a:link:focus,
  nav li a:visited:hover,
  nav li a:visited:active,
  nav li a:visited:focus,
  nav li a:hover:hover,
  nav li a:hover:active,
  nav li a:hover:focus,
  nav li a:active:hover,
  nav li a:active:active,
  nav li a:active:focus,
  nav li a:focus:hover,
  nav li a:focus:active,
  nav li a:focus:focus {
    text-decoration: underline;
    color: #14b5b8; }
  nav li a:link:active,
  nav li a:visited:active,
  nav li a:hover:active,
  nav li a:active:active,
  nav li a:focus:active {
    color: #ff3700; }

.secondary-nav {
  text-align: center; }

.social-media-list {
  white-space: nowrap;
  word-spacing: -4px; }
  .social-media-list li {
    display: inline-block;
    white-space: normal;
    word-spacing: normal;
    width: 5rem;
    height: 5rem;
    vertical-align: middle;
    margin: 0 0.5rem; }
    .social-media-list li .username {
      display: none; }
    .social-media-list li svg {
      fill: #1479b8;
      max-width: 100%; }
    .social-media-list li a {
      display: block;
      padding: 1rem; }
      .social-media-list li a .icon {
        display: block; }
      .social-media-list li a:hover svg, .social-media-list li a:focus svg {
        fill: #14b5b8; }
      .social-media-list li a:active svg {
        fill: #ff3700; }

.page-content {
  overflow-x: hidden; }

.home li {
  padding: 0 4%;
  line-height: 1.4; }
  .home li h2 {
    font-size: 1.25em;
    color: #1479b8; }
  .home li a {
    display: block;
    color: inherit;
    text-decoration: none;
    padding: 2rem 0; }
    .home li a .post-meta {
      opacity: 0.5;
      margin-bottom: 1rem;
      display: inline-block; }
    .home li a:hover h2, .home li a:focus h2 {
      color: #14b5b8; }
    .home li a:active h2 {
      color: #ff3700; }
  .home li:not(:last-of-type) a {
    border-bottom: 1px solid rgba(71, 71, 71, 0.2); }

.tags-container {
  padding: 3rem 4%; }
  .tags-container h1 {
    font-size: 1.4em;
    line-height: 1.4;
    color: #14b5b8;
    text-align: center;
    text-transform: capitalize;
    margin-bottom: 2rem; }
    @media all and (min-width: 42.5em) {
      .tags-container h1 {
        text-align: left; } }
  .tags-container li {
    line-height: 1.4;
    padding-bottom: 2rem; }
    .tags-container li span {
      display: block; }
    .tags-container li a {
      display: inline-block;
      padding: 1rem 0; }

.post {
  padding: 3rem 4%; }
  .post .preamble,
  .post .postamble {
    font-size: 0.85em;
    font-style: italic; }
  .post .postamble {
    margin-top: 4rem; }
  .post article {
    overflow: hidden; }
  .post article a {
    color: #1479b8; }
    .post article a:hover, .post article a:active, .post article a:focus {
      color: #14b5b8; }
  .post article h1 {
    font-size: 1.4em;
    line-height: 1.4;
    text-align: center; }
    @media all and (min-width: 42.5em) {
      .post article h1 {
        text-align: left; } }
  .post .post-meta {
    font-size: 1.2em;
    padding-bottom: 2rem;
    text-align: center;
    opacity: 0.4;
    margin-bottom: 0; }
    .post .post-meta span {
      font-size: 0.8em;
      display: block; }
    @media all and (min-width: 42.5em) {
      .post .post-meta {
        text-align: left; } }
  .post h3 {
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.2em; }
  .post h4 {
    line-height: 1.7;
    margin-bottom: 2rem;
    font-size: 1.1em; }
  .post article p,
  .post article li,
  .post article figure {
    line-height: 1.7;
    margin-bottom: 2rem; }
  .post article figure {
    margin: 0 auto 2rem; }
  .post article figure img {
    max-width: 100%; }
  .post article .grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    grid-gap: 5px;
    gap: 5px; }
  .post article .grid figcaption {
    grid-column: 1 / -1; }
  .post article figcaption {
    font-size: 0.75em;
    font-style: italic; }
  .post article li {
    padding-left: 1em;
    list-style: disc;
    list-style-position: inside;
    margin-bottom: 1rem; }
  .post article ol {
    margin-left: 3.5rem; }
    .post article ol > li {
      list-style-position: outside;
      list-style-type: decimal;
      padding-left: 0; }
      .post article ol > li li {
        padding-left: 2rem;
        list-style-type: disc; }

.reference ul + h3 {
  margin-top: 3rem; }
.reference h3:target {
  border-left: 0.3rem solid #ff3700;
  padding-left: 0.7rem; }

aside {
  border-top: 0.1rem solid #b7b7b7;
  padding: 2rem 0 0; }
  .post aside h3 {
    margin-bottom: 1rem; }
  aside .tags {
    margin-bottom: 2rem; }
    aside .tags li {
      display: inline-block; }
      aside .tags li:not(:last-of-type):after {
        content: ","; }
    aside .tags a {
      display: inline-block;
      line-height: 1.7;
      text-transform: capitalize; }
      aside .tags a[data-current] {
        color: #474747;
        text-decoration: none; }
    aside .tags.series-list {
      display: none; }
  aside .series-header {
    display: none; }

h2 a:link,
h2 a:visited,
h2 a:hover,
h2 a:active {
  color: inherit;
  text-decoration: none; }

h3 a:link,
h3 a:visited,
h3 a:hover,
h3 a:active {
  color: inherit;
  text-decoration: none; }

.highlight {
  margin: 1em 0;
  padding: 10px 0;
  width: 100%;
  overflow: auto;
  background: #fff;
  border-radius: 0.4rem;
  border: 0.1rem solid rgba(70, 70, 70, 0.1);
  max-height: 20rem; }
  .highlight pre,
  .highlight code {
    white-space: pre;
    display: inline-block;
    margin: 0;
    font: 14px/1.8em Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
    padding: 0 0.5em; }
  @media all and (min-width: 68.75em) {
    .highlight {
      max-height: none; }
      .highlight pre,
      .highlight code {
        font-size: 1.6rem; } }

pre,
code {
  display: inline;
  font-family: Menlo, Consolas, "Courier New", Courier, "Liberation Mono", monospace;
  font-size: 0.85em; }

iframe,
.glitch-embed-wrap {
  margin-bottom: 2rem;
  max-width: 100%; }

.project-blurb {
  width: 100%;
  float: left; }

.project-blurb h3 {
  font-size: 1.5em;
  margin-top: 1em;
  text-align: center; }

.project-blurb .project-screens {
  margin-top: 1em;
  margin-bottom: 0; }

.project-blurb .project-screens a,
.project-blurb .project-screens img {
  border: 0;
  text-decoration: none; }

footer {
  padding: 2rem 4% 2rem 4%;
  margin: 0;
  background: #15152a;
  color: #fafafc;
  font-size: 1.2em;
  text-align: center;
  position: absolute;
  bottom: 0;
  width: 100%; }
  footer a {
    color: #fafafc; }
    footer a:hover, footer a:focus {
      color: #14b5b8; }
    footer a:active {
      color: #ff3700; }

.photo {
  margin: 0 auto 2rem auto;
  display: block;
  text-align: center;
  max-width: 20rem; }

.photo img {
  max-width: 100%;
  border-radius: 50%; }

.projects section {
  margin: 1.5rem 0 2.5rem 0; }

.projects section h2 {
  color: #297a58;
  font-size: 1.4em;
  line-height: 1.4;
  color: #14b5b8; }

.projects section a {
  color: #1479b8; }
  .projects section a:hover, .projects section a:active, .projects section a:focus {
    color: #14b5b8; }

.projects section p {
  margin-bottom: 2rem;
  line-height: 1.5; }

.projects section p:last-of-type {
  margin-bottom: 0rem; }

.projects .details {
  display: block;
  text-align: right;
  margin-bottom: 0.5rem; }

.projects .details a {
  padding: 0.5rem 0 0.5rem 0; }

.project-screens {
  width: 100%;
  margin: 2em 0;
  overflow: hidden; }

.project-screens img {
  max-width: 100%;
  margin-bottom: 2em; }

.about .container {
  padding: 0 4% 1rem 4%;
  margin: 1.5rem 0 2.5rem 0; }

.about .container p {
  margin-bottom: 2rem;
  line-height: 1.5; }

.about .container p:last-of-type {
  margin-bottom: 0rem; }

.about-main {
  overflow: auto;
  margin-bottom: 2rem; }

.timeline {
  width: 100%;
  margin: 0 auto; }
  @media all and (min-width: 42.5em) {
    .timeline ul {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-column-gap: 2rem;
      column-gap: 2rem; } }
  .timeline h2 {
    font-size: 1.4em;
    line-height: 1.4;
    color: #474747;
    margin-bottom: 2rem; }
  .timeline h3 {
    color: #1479b8;
    margin-bottom: 0;
    line-height: 1.35; }
  .timeline .timeline-entry {
    text-align: left;
    margin-bottom: 3rem; }
    .timeline .timeline-entry.speaking {
      border-color: #1479b8; }
    .timeline .timeline-entry.writing {
      border-color: #14b5b8; }
    .timeline .timeline-entry.podcast {
      border-color: #14b5b8; }
    .timeline .timeline-entry p {
      margin: 0;
      padding: 0; }
    .timeline .timeline-entry .timeline-date {
      opacity: 0.8;
      font-size: 0.875em; }

.ohso {
  text-decoration: line-through; }

@-ms-viewport {
  width: device-width; }
@viewport {
  width: device-width; }
@media all and (min-width: 22.5em) {
  .project-blurb {
    width: 50%;
    padding: 0 2%; } }
@media all and (min-width: 42.5em) {
  body {
    max-width: 128rem;
    font-size: 1.8em;
    margin: 0 auto;
    position: relative; }

  header {
    overflow: hidden;
    line-height: 1.2;
    text-align: left; }
    header .site-title {
      padding: 1rem 4%;
      font-size: 4rem; }
    header .secondary-nav {
      text-align: right;
      position: absolute;
      right: 4%;
      top: 7rem; }

  nav {
    text-align: right;
    position: absolute;
    background: transparent;
    top: 0;
    right: 4%; }
    nav ul {
      background: transparent; }

  nav li a:link,
  nav li a:visited,
  nav li a:hover,
  nav li a:active,
  nav li a:focus {
    padding-top: 2rem;
    font-size: 1.2em;
    color: #474747; }

  article h3 {
    text-align: left; }

  .about .container {
    overflow: hidden; }

  .about .photo {
    float: left;
    width: 26%;
    max-width: 100%;
    margin-right: 4%;
    margin-top: 0.5em;
    max-width: auto;
    shape-outside: circle(); }

  .about .about-me {
    margin-left: 20%;
    width: 80%; } }
@media all and (min-width: 47.5em) {
  #main {
    overflow: hidden; }

  #container {
    float: left;
    width: 74%;
    margin-right: 0%; }

  .home .widget-area,
  .archive .widget-area {
    float: right;
    width: 26%; }

  .project-blurb {
    width: 33.333333%; } }
@media all and (min-width: 40.5em) and (max-width: 52em) {
  .projects .details {
    display: inline-block;
    float: left;
    text-align: center;
    width: 48%;
    padding-left: 0; }

  .projects .details:nth-of-type(odd) {
    text-align: left; }

  .projects .details:nth-of-type(even) {
    text-align: right;
    margin-left: 4%; } }
@media all and (min-width: 52em) {
  .projects {
    overflow: auto; }

  .projects section {
    float: left;
    width: 50%; }

  .projects section:nth-of-type(odd) {
    clear: left;
    padding-right: 4%; }

  .projects section:nth-of-type(even) {
    padding-left: 4%; }

  .projects aside {
    clear: both; }

  .post {
    overflow: hidden; }
    .post article {
      width: 70%;
      float: left; }

  aside {
    border-top: none;
    padding: 0rem 0 0 4%;
    margin: 0;
    float: right;
    width: 30%; }
    aside .tags li {
      display: block; }
      aside .tags li:not(:last-of-type):after {
        content: ""; }
    aside .tags.series-list {
      display: block; }
    aside .series-header {
      display: block; } }
@media all and (min-width: 68.75em) {
  .main {
    float: left;
    width: 67%; }

  .project-blurb {
    width: 100%; }

  .project-blurb h3 {
    font-size: 1.5em;
    margin-top: 1em;
    color: #bf7540;
    text-align: left; }

  .project-blurb .project-screens {
    margin-top: 1em;
    margin-bottom: 0; }

  footer {
    text-align: left;
    clear: both; } }
@media all and (min-width: 75em) {
  body {
    font-size: 2em; } }
.column-toggler {
  display: none;
  font-size: 0.75em;
  position: absolute;
  top: 3rem;
  opacity: 0;
  right: 50%;
  will-change: transform;
  transform: translate(50%, -300%); }

@keyframes introduce-yourself {
  to {
    transform: translate(50%, 0%);
    opacity: 1; } }
@media screen and (min-width: 100em) and (min-height: 56.25em) {
  .columns-eligible .column-toggler {
    width: 4.4rem; }
  .columns-eligible .column-toggler {
    display: block;
    animation: introduce-yourself 420ms 0ms 1 ease-out forwards; }
  .columns-eligible .column-toggler input {
    position: absolute;
    opacity: 0; }
  .columns-eligible .column-toggler label {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    text-align: center;
    justfiy-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border: 0.1rem solid rgba(0, 0, 0, 0.2);
    border-radius: 0.4rem;
    padding: 0.2rem;
    position: relative; }
  .columns-eligible .column-toggler label span {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    text-align: center;
    border: 0px solid;
    border-radius: 0.3rem; }
  .columns-eligible .column-toggler svg {
    max-width: 100%;
    stroke: #1479b8; }
  .columns-eligible .column-toggler input:checked + label span:first-of-type svg,
  .columns-eligible .column-toggler input:not(:checked) + label span:last-of-type svg {
    stroke: #fafafc; }
  .columns-eligible .column-toggler input:checked + label::before {
    transform: translate3d(-100%, 0, 0); }
  .columns-eligible .column-toggler label::before {
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    left: 50%;
    bottom: 0.2rem;
    background: #1479b8;
    content: "";
    z-index: -1;
    border-radius: 0.4rem;
    transition: transform 0.2s cubic-bezier(0.4, -0.25, 0.25, 1); }

  .columns body {
    width: 100%;
    max-width: 100%;
    padding: 0; }
  .columns .page-content {
    position: relative;
    z-index: 10; }
  .columns .post {
    padding: 0 0 3rem;
    overflow: hidden;
    overflow-x: auto; }
    .columns .post article {
      overflow: initial;
      width: auto;
      float: none;
      -moz-column-width: 58rem;
      -moz-column-gap: 5rem;
      -moz-column-fill: auto;
      -webkit-column-width: 58rem;
      -webkit-column-gap: 5rem;
      -webkit-column-fill: auto;
      column-width: 58rem;
      column-gap: 5rem;
      column-fill: auto;
      height: calc(100vh - 24.5rem);
      padding: 0 4%; }
      .columns .post article.external-loaded {
        -moz-column-gap: 5.1rem;
        -webkit-column-gap: 5.1rem;
        column-gap: 5.1rem; }
    .columns .post aside {
      display: none; }
    .columns .post p + h3,
    .columns .post p + h4 {
      -webkit-column-break-after: avoid;
      -webkit-break-after: avoid;
      break-after: avoid; }
  .columns footer {
    text-align: right;
    font-size: 1em; }
    .columns footer a {
      color: inherit; } }
.rgb-fun {
  border-radius: 1em;
  position: relative; }
  @supports (mix-blend-mode: multiply) {
    .rgb-fun::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: "";
      background: red;
      mix-blend-mode: multiply;
      animation: rgb-it 20000ms 0ms infinite ease-in; } }

.projects .rgb-fun {
  margin-bottom: 2em; }
  .projects .rgb-fun::after {
    border-radius: 1em; }
  .projects .rgb-fun img {
    margin-bottom: 0;
    border-radius: 1em; }

@keyframes rgb-it {
  0%,
  16%,
  80%,
  100% {
    background: transparent; }
  20%,
  35% {
    background: #f00; }
  40%,
  55% {
    background: #0f0; }
  60%,
  75% {
    background: #00f; } }
/**
 * Syntax highlighting styles
 */
.highlight .c {
  color: #998;
  font-style: italic; }
.highlight .err {
  color: #a61717;
  background-color: #e3d2d2; }
.highlight .k {
  font-weight: bold; }
.highlight .o {
  font-weight: bold; }
.highlight .cm {
  color: #998;
  font-style: italic; }
.highlight .cp {
  color: #999;
  font-weight: bold; }
.highlight .c1 {
  color: #998;
  font-style: italic; }
.highlight .cs {
  color: #999;
  font-weight: bold;
  font-style: italic; }
.highlight .gd {
  color: #000;
  background-color: #fdd; }
.highlight .gd .x {
  color: #000;
  background-color: #faa; }
.highlight .ge {
  font-style: italic; }
.highlight .gr {
  color: #a00; }
.highlight .gh {
  color: #999; }
.highlight .gi {
  color: #000;
  background-color: #dfd; }
.highlight .gi .x {
  color: #000;
  background-color: #afa; }
.highlight .go {
  color: #888; }
.highlight .gp {
  color: #555; }
.highlight .gs {
  font-weight: bold; }
.highlight .gu {
  color: #aaa; }
.highlight .gt {
  color: #a00; }
.highlight .kc {
  font-weight: bold; }
.highlight .kd {
  font-weight: bold; }
.highlight .kp {
  font-weight: bold; }
.highlight .kr {
  font-weight: bold; }
.highlight .kt {
  color: #458;
  font-weight: bold; }
.highlight .m {
  color: #099; }
.highlight .s {
  color: #d14; }
.highlight .na {
  color: #008080; }
.highlight .nb {
  color: #0086B3; }
.highlight .nc {
  color: #458;
  font-weight: bold; }
.highlight .no {
  color: #008080; }
.highlight .ni {
  color: #800080; }
.highlight .ne {
  color: #900;
  font-weight: bold; }
.highlight .nf {
  color: #900;
  font-weight: bold; }
.highlight .nn {
  color: #555; }
.highlight .nt {
  color: #000080; }
.highlight .nv {
  color: #008080; }
.highlight .ow {
  font-weight: bold; }
.highlight .w {
  color: #bbb; }
.highlight .mf {
  color: #099; }
.highlight .mh {
  color: #099; }
.highlight .mi {
  color: #099; }
.highlight .mo {
  color: #099; }
.highlight .sb {
  color: #d14; }
.highlight .sc {
  color: #d14; }
.highlight .sd {
  color: #d14; }
.highlight .s2 {
  color: #d14; }
.highlight .se {
  color: #d14; }
.highlight .sh {
  color: #d14; }
.highlight .si {
  color: #d14; }
.highlight .sx {
  color: #d14; }
.highlight .sr {
  color: #009926; }
.highlight .s1 {
  color: #d14; }
.highlight .ss {
  color: #990073; }
.highlight .bp {
  color: #999; }
.highlight .vc {
  color: #008080; }
.highlight .vg {
  color: #008080; }
.highlight .vi {
  color: #008080; }
.highlight .il {
  color: #099; }