/* Most of these imports are derived from https://github.com/poole/poole. Designed, built, and released under MIT license by @mdo. */
* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

html { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", Arial, sans-serif; font-size: 1rem; line-height: 1.5; }

@media (min-width: 49rem) { html { font-size: 1.25rem; } }

body { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }

main, article, section { display: block; }

a { color: #268bd2; text-decoration: none; }

a:hover, a:focus { text-decoration: underline; }

a strong { color: inherit; }

img { display: block; max-width: 100%; margin: 0 0 1rem; border-radius: 5px; height: auto; }

table { margin-bottom: 1rem; width: 100%; font-size: 85%; border: 1px solid #e5e5e5; border-collapse: collapse; }

td, th { padding: .25rem .5rem; border: 1px solid #e5e5e5; }

th { text-align: left; }

tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th { background-color: #f9f9f9; }

input[type="text"], input[type="search"], input[type="submit"], button { padding: 1em 1.5em; border: 1px solid #e5e5e5; border-radius: 300px; }

button, input[type="submit"] { cursor: pointer; background: transparent; border-color: #e5e5e5; color: #268bd2; transition: color 0.6s ease-in-out, border-color 0.6s ease-in-out, background 0.6s ease-in-out; }

button:hover, input[type="submit"]:hover { background: #268bd2; border-color: #268bd2; color: white; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16); }

h1, h2, h3, h4, h5, h6, .site-title { margin-bottom: 0.5rem; font-weight: 600; line-height: 1.25; color: #313131; text-rendering: optimizeLegibility; }

h1 { font-size: 2rem; }

h2 { margin-top: 1rem; font-size: 1.5rem; }

h3 { margin-top: 1.5rem; font-size: 1.25rem; }

h4, h5, h6 { margin-top: 1rem; font-size: 1rem; }

p { margin-top: 0; margin-bottom: 1rem; }

strong { color: #303030; }

ul, ol, dl { margin-top: 0; margin-bottom: 1rem; }

dt { font-weight: bold; }

dd { margin-bottom: .5rem; }

hr { position: relative; margin: 1.5rem 0; border: 0; border-top: 1px solid #eee; border-bottom: 1px solid #fff; }

abbr { font-size: 85%; font-weight: bold; color: #555; text-transform: uppercase; }

abbr[title] { cursor: help; border-bottom: 1px dotted #e5e5e5; }

blockquote { padding: .5rem 1rem; margin: .8rem 0; color: #7a7a7a; border-left: 0.25rem solid #e5e5e5; }

blockquote p:last-child { margin-bottom: 0; }

@media (min-width: 30em) { blockquote { padding-right: 5rem; padding-left: 1.25rem; } }

a[href^="#fn:"], a[href^="#fnref:"] { display: inline-block; margin-left: .1rem; font-weight: bold; }

.footnotes { margin-top: 2rem; font-size: 85%; }

.lead { font-size: 1.25rem; font-weight: 300; }

a svg, .icon svg { height: 1em; }

a svg { fill: #268bd2; }

.icon { vertical-align: middle; }

.highlight .hll { background-color: #ffc; }

.highlight .c { color: #999; }

/* Comment */
.highlight .err { color: #a00; background-color: #faa; }

/* Error */
.highlight .k { color: #069; }

/* Keyword */
.highlight .o { color: #555; }

/* Operator */
.highlight .cm { color: #09f; font-style: italic; }

/* Comment.Multiline */
.highlight .cp { color: #099; }

/* Comment.Preproc */
.highlight .c1 { color: #999; }

/* Comment.Single */
.highlight .cs { color: #999; }

/* Comment.Special */
.highlight .gd { background-color: #fcc; border: 1px solid #c00; }

/* Generic.Deleted */
.highlight .ge { font-style: italic; }

/* Generic.Emph */
.highlight .gr { color: #f00; }

/* Generic.Error */
.highlight .gh { color: #030; }

/* Generic.Heading */
.highlight .gi { background-color: #cfc; border: 1px solid #0c0; }

/* Generic.Inserted */
.highlight .go { color: #aaa; }

/* Generic.Output */
.highlight .gp { color: #009; }

/* Generic.Prompt */
/* Generic.Strong */
.highlight .gu { color: #030; }

/* Generic.Subheading */
.highlight .gt { color: #9c6; }

/* Generic.Traceback */
.highlight .kc { color: #069; }

/* Keyword.Constant */
.highlight .kd { color: #069; }

/* Keyword.Declaration */
.highlight .kn { color: #069; }

/* Keyword.Namespace */
.highlight .kp { color: #069; }

/* Keyword.Pseudo */
.highlight .kr { color: #069; }

/* Keyword.Reserved */
.highlight .kt { color: #078; }

/* Keyword.Type */
.highlight .m { color: #f60; }

/* Literal.Number */
.highlight .s { color: #d44950; }

/* Literal.String */
.highlight .na { color: #4f9fcf; }

/* Name.Attribute */
.highlight .nb { color: #366; }

/* Name.Builtin */
.highlight .nc { color: #0a8; }

/* Name.Class */
.highlight .no { color: #360; }

/* Name.Constant */
.highlight .nd { color: #99f; }

/* Name.Decorator */
.highlight .ni { color: #999; }

/* Name.Entity */
.highlight .ne { color: #c00; }

/* Name.Exception */
.highlight .nf { color: #c0f; }

/* Name.Function */
.highlight .nl { color: #99f; }

/* Name.Label */
.highlight .nn { color: #0cf; }

/* Name.Namespace */
.highlight .nt { color: #2f6f9f; }

/* Name.Tag */
.highlight .nv { color: #033; }

/* Name.Variable */
.highlight .ow { color: #000; }

/* Operator.Word */
.highlight .w { color: #bbb; }

/* Text.Whitespace */
.highlight .mf { color: #f60; }

/* Literal.Number.Float */
.highlight .mh { color: #f60; }

/* Literal.Number.Hex */
.highlight .mi { color: #f60; }

/* Literal.Number.Integer */
.highlight .mo { color: #f60; }

/* Literal.Number.Oct */
.highlight .sb { color: #c30; }

/* Literal.String.Backtick */
.highlight .sc { color: #c30; }

/* Literal.String.Char */
.highlight .sd { color: #c30; font-style: italic; }

/* Literal.String.Doc */
.highlight .s2 { color: #c30; }

/* Literal.String.Double */
.highlight .se { color: #c30; }

/* Literal.String.Escape */
.highlight .sh { color: #c30; }

/* Literal.String.Heredoc */
.highlight .si { color: #a00; }

/* Literal.String.Interpol */
.highlight .sx { color: #c30; }

/* Literal.String.Other */
.highlight .sr { color: #3aa; }

/* Literal.String.Regex */
.highlight .s1 { color: #c30; }

/* Literal.String.Single */
.highlight .ss { color: #fc3; }

/* Literal.String.Symbol */
.highlight .bp { color: #366; }

/* Name.Builtin.Pseudo */
.highlight .vc { color: #033; }

/* Name.Variable.Class */
.highlight .vg { color: #033; }

/* Name.Variable.Global */
.highlight .vi { color: #033; }

/* Name.Variable.Instance */
.highlight .il { color: #f60; }

/* Literal.Number.Integer.Long */
.css .o, .css .o + .nt, .css .nt + .nt { color: #999; }

code, pre { font-family: Menlo, Monaco, "Courier New", monospace; }

code { padding: .25em .5em; font-size: 85%; color: #bf616a; background-color: #f9f9f9; border-radius: 3px; }

pre { margin-top: 0; margin-bottom: 1rem; }

pre code { padding: 0; font-size: 100%; color: inherit; background-color: transparent; }

.highlight { padding: 1rem; margin-bottom: 1rem; font-size: .8rem; line-height: 1.4; background-color: #f9f9f9; border-radius: .25rem; }

.highlight pre { margin-bottom: 0; overflow-x: auto; }

.highlight .lineno { display: inline-block; padding-right: .75rem; padding-left: .25rem; color: #999; -webkit-user-select: none; -moz-user-select: none; user-select: none; }

pre { max-width: 100%; overflow-x: auto; }

/* Layout Styles for managing the structural hierarchy of the site. Hydeout features the large colored sidebar from Hyde that houses the site name, intro, and "footer" content. Sidebar is on top of content on mobile and expands into sidebar on larger width displays. Sidebar CSS assumes HTML looks like this for post pages: body > #sidebar > header (primary sidebar content -- i.e. title) > h1 (home page only, otherwise div or span) > secondary nav content we may want to hide on certain pages > .container > h1 (non-home page) > .content Basic approach is to color in body, make sidebar background transparent, and then fill in the .container or .content elements depending on how far we want the sidebar or header to stretch. */
body { color: rgba(255, 255, 255, 0.75); background-color: #341f35; background-image: linear-gradient(to bottom, #4a2c4c, #1e121e); display: flex; flex-direction: column; min-width: 100vw; min-height: 100vh; }

#sidebar { flex: 0 0 auto; padding: 2rem; }

#sidebar .site-title { font-family: "Abril Fatface", serif; font-weight: normal; font-size: 1.25rem; color: rgba(255, 255, 255, 0.75); margin-top: 0; margin-bottom: 0.5rem; }

#sidebar .site-title a { color: inherit; }

#sidebar .site-title a:hover { color: #f1c7fc; }

#sidebar .site-title .back-arrow { margin-right: 0.5rem; }

.container { flex: 1 1 auto; display: flex; flex-direction: column; }

.container > .content { flex-grow: 1; padding-bottom: 4rem; }

.content { background: #fff; color: #515151; padding: 2rem; }

/* ----------------------------------------------------------- Mobile view ----------------------------------------------------------- */
#sidebar header ~ *, #sidebar header ~ nav, #sidebar p.lead { display: none; }

.container > header { background: transparent; color: white; margin: -1.5rem 2rem 2rem; }

.container > header h1, .container > header h2 { color: white; }

.container > header h1:last-child, .container > header h2:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------- Mobile view for home page) ----------------------------------------------------------- */
.home #sidebar { text-align: center; }

.home #sidebar .site-title { font-size: 3.25rem; color: #f1c7fc; }

.home #sidebar header ~ *, .home #sidebar p.lead { display: block; }

.home #sidebar header ~ nav { display: flex; }

.home #sidebar > *:last-child { margin-bottom: 0.5rem; }

/* ----------------------------------------------------------- Tablet / Desktop view ----------------------------------------------------------- */
@media (min-width: 49rem) { body { flex-direction: row; height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } body > * { max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* Undo mobile CSS */ #sidebar, .home #sidebar { width: 18rem; text-align: left; } #sidebar > *:last-child, .home #sidebar > *:last-child { margin-bottom: 0; } #sidebar .site-title { font-size: 3.25rem; } #sidebar .site-title a { color: #f1c7fc; } #sidebar .site-title .back-arrow { display: none; } #sidebar p.lead, #sidebar header ~ * { display: block; } #sidebar header ~ nav { display: flex; } .index #sidebar { margin-bottom: 0; } .container { background: #fff; color: #515151; padding: 4rem 4rem 0; height: 100vh; } .container > header { color: inherit; margin: 0; } .container > header h1, .container > header h2 { color: inherit; } .container > header h1:last-child, .container > header h2:last-child { margin-bottom: 0.5rem; } .container > * { max-width: 38rem; padding: 0; } }

/* ----------------------------------------------------------- Sidebar links + nav ----------------------------------------------------------- */
#sidebar a { color: #fff; }

#sidebar a svg { color: rgba(255, 255, 255, 0.85); fill: rgba(255, 255, 255, 0.85); height: 0.8em; }

#sidebar a:hover svg, #sidebar a:focus svg, #sidebar a.active svg { color: #fff; fill: #fff; }

#sidebar a:hover, #sidebar a:focus { text-decoration: underline; }

#sidebar a.icon:hover, #sidebar a.icon:focus { text-decoration: none; }

#sidebar a.active { font-weight: bold; }

#sidebar nav { display: flex; }

#sidebar-nav-links { flex-flow: column nowrap; }

#sidebar-icon-links { max-width: 100%; flex-flow: row wrap; justify-content: center; margin-top: 1rem; }

@media (min-width: 49rem) { #sidebar-icon-links { margin-left: -0.25em; justify-content: flex-start; } }

#sidebar nav > * { display: block; line-height: 1.75; }

#sidebar nav > .icon { font-size: 1.5rem; display: inline-block; margin: 0 0.25em; }

/* ----------------------------------------------------------- Sticky sidebar Set $sidebar-stick variable to affix sidebar contents to the bottom of the sidebar in tablets and up. ----------------------------------------------------------- */
@media (min-width: 49rem) { body { align-items: flex-end; } }

/* ----------------------------------------------------------- Reverse layout Flip the orientation of the page by placing the `#sidebar` on the right. ----------------------------------------------------------- */
#sidebar img.hero-avatar { max-width: 20%; border-radius: 50%; align-self: center; margin-right: auto; margin-left: auto; /* hide by default */ display: none; }

/* make it visible on home, including mobile */
.home #sidebar img.hero-avatar { display: block; }

/* make it bigger and always present on desktop */
@media (min-width: 49rem) { #sidebar img.hero-avatar { max-width: 60%; margin-bottom: 2em; display: block; } }

.masthead { padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 3rem; }

.masthead-title { margin-top: 0; margin-bottom: 0; color: #515151; }

.masthead-title a { color: inherit; }

.masthead-title small { font-size: 75%; font-weight: 400; opacity: .5; }

.copyright { font-size: 80%; opacity: .8; }

article + *, .post-body ~ section { padding-top: 2rem; border-top: 1px solid #e5e5e5; margin-top: 2rem; }

article + * > h2:first-child, article + * > h3:first-child, .post-body ~ section > h2:first-child, .post-body ~ section > h3:first-child { margin-top: 0; }

.post .content li + li, .page .content li + li { margin-top: .25rem; }

.page-title, .post-title, .post-title a { color: #313131; }

.page-title, .post-title { margin-top: 0; }

h2.post-title, h2.page-title { font-size: 2rem; }

.post-meta { margin-top: -.5rem; margin-bottom: 1rem; color: #767676; }

.post-tags a { font-size: 0.8em; margin-right: 0.5rem; white-space: nowrap; opacity: 0.75; }

.post-tags a .tag-name { text-transform: capitalize; }

.post-tags a:hover { text-decoration: none; opacity: 1; }

.posts-by-tag h2 { text-transform: capitalize; }

.posts-list { padding-left: 0; list-style: none; }

.posts-list h3 { margin-top: 0; }

.posts-list li small { font-size: 75%; color: #999; white-space: nowrap; }

.posts-list li a:hover { color: #268bd2; text-decoration: none; }

.posts-list li a:hover small { color: inherit; }

button.disqus-load { margin-top: 1em; }

/* Pagination Super lightweight (HTML-wise) blog pagination. Should only be visible when there is navigation available -- single buttons at top or bottom of each page. */
.pagination { margin-bottom: 2rem; color: #ccc; text-align: center; }

.pagination > a { display: inline-block; padding: 1em 1.5em; border: solid #e5e5e5; border-radius: 300px; border-width: 1px; width: 60%; max-width: 18rem; background: #fff; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16); }

.pagination > a:hover { background-color: #e5e5e5; }

* + .pagination { margin-top: 2rem; }

.content .pagination:first-child { margin-top: -4rem; }

.index #sidebar { padding-bottom: calc(2rem + 1em); }

.home.index #sidebar { padding-bottom: 2rem; }

@media (min-width: 49rem) { .pagination > a { box-shadow: none; } .pagination > a:hover { box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16); } .content .pagination:first-child { margin-top: 0; } .content .pagination:first-child + * { padding-top: 2rem; border-top: 1px solid #e5e5e5; margin-top: 2rem; } .index #sidebar { padding-bottom: 2rem; } }

.message { margin-bottom: 1rem; padding: 1rem; color: #717171; background-color: #f9f9f9; }

.search-row { display: flex; border: 1px solid #e5e5e5; border-radius: 300px; padding: 2px; }

.search-row input { border: 0; }

.search-row input + input { margin-left: 2px; }

.search-row input[type="text"], .search-row input[type="search"] { flex-grow: 1; }

.tags-list a { margin-right: 0.5em; white-space: nowrap; opacity: 0.75; }

.tags-list a:hover { text-decoration: none; opacity: 1; }

.tags-list span.tag-cloud-1 { font-size: 1em; }

.tags-list span.tag-cloud-2 { font-size: 1.1em; }

.tags-list span.tag-cloud-3 { font-size: 1.2em; }

.tags-list span.tag-cloud-4 { font-size: 1.3em; }

.tags-list span.tag-cloud-5 { font-size: 1.4em; }

.tags-list span.tag-cloud-6 { font-size: 1.5em; }

.tags-list span.tag-cloud-7 { font-size: 1.6em; }

.tags-list span.tag-cloud-8 { font-size: 1.7em; }

.tags-list span.tag-cloud-9 { font-size: 1.8em; }

.tags-list span.tag-cloud-10 { font-size: 1.9em; }

.tags-list span.tag-cloud-11 { font-size: 2em; }

.tags-list span.tag-cloud-12 { font-size: 2.1em; }

.tags-list span.tag-cloud-13 { font-size: 2.2em; }

.tags-list span.tag-cloud-14 { font-size: 2.3em; }

.tags-list span.tag-cloud-15 { font-size: 2.4em; }

.tags-list span.tag-cloud-16 { font-size: 2.5em; }

.tags-list span.tag-cloud-17 { font-size: 2.6em; }

.tags-list span.tag-cloud-18 { font-size: 2.7em; }

ul.talks { list-style: none; line-height: 1.5; padding-left: 0; }

ul.talks .detail { display: inline; }

ul.talks li { margin-bottom: 0.5rem; }

ul.breadcrumb { padding-left: 0; }

ul.breadcrumb li { display: inline; font-size: 0.8em; text-decoration: none; }

ul.breadcrumb li a { opacity: 0.75; }

ul.breadcrumb li a :hover { opacity: 1; text-decoration: underline; }

ul.breadcrumb li:after { content: '\3E'; margin-left: 0.3em; }

ul.breadcrumb li:last-child:after { content: none; }

.share-links ul { display: inline; padding: 0; }

.share-links li { display: inline; }

.share-links svg { color: #341f35; opacity: 0.8; height: 1em; margin-left: 0.3em; }

.share-links a:hover svg, .share-links a:focus svg, .share-links a.active svg { opacity: 1.0; }

.share-links a:hover, .share-links a:focus { text-decoration: none; }

.share-links span.share-text { font-size: 0.8em; vertical-align: top; }

.facebook-icon svg { color: #3b5998; }

.twitter-icon svg { color: #4099FF; }

.googleplus-icon svg { color: #d34836; }

.reddit-icon svg { color: #ff5700; }

.linkedin-icon svg { color: #0077b5; }

.tumblr-icon svg { color: #32506d; }

.pinterest-icon svg { color: #cb2027; }

.github-icon svg { color: #25292e; }

.email-icon svg { color: #800c7f; }

.card-list { list-style: none; padding: 1em 0 0 0; /* This is hacky but i didn't figure out how to cleanly stop long ones overflowing */ }

.card-list li { box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.2); border-radius: 0.4em; padding: 0.5em; margin: 0 0 1em 0; transition: box-shadow 0.3s; transition-timing-function: ease-in-out; }

.card-list li:hover { box-shadow: 0px 0px 8px 2px rgba(0, 0, 0, 0.3); }

.card-list svg { height: 2.2em; width: 2.2em; margin: 0 0.6em 0 0; flex: 0 0 auto; }

.card-list a:hover, .card-list a:focus { text-decoration: none; }

.card-list .card-container { display: flex; flex-direction: row; }

.card-list .card-body { display: flex; flex-direction: column; align-items: center; justify-content: center; }

.card-list h3 { margin: 0; }

.card-list #contact-linkedin h3 { font-size: 1.0em; }

.card-list #contact-email h3 { font-size: 1.1em; }

.card-list #contact-mastodon h3 { font-size: 1.1em; }

.card-list li { max-width: 20em; }

/*# sourceMappingURL=main.css.map */