@charset "UTF-8";
/*@import "jekyll-theme-architect";*/
@import url("https://fonts.googleapis.com/css?family=Architects+Daughter|Caveat+Brush|Covered+By+Your+Grace|Indie+Flower|Kalam|Nanum+Brush+Script|Permanent+Marker");
.highlight table td { padding: 5px; }

.highlight table pre { margin: 0; }

.highlight .cm { color: #999988; font-style: italic; }

.highlight .cp { color: #999999; font-weight: bold; }

.highlight .c1 { color: #999988; font-style: italic; }

.highlight .cs { color: #999999; font-weight: bold; font-style: italic; }

.highlight .c, .highlight .cd { color: #999988; font-style: italic; }

.highlight .err { color: #a61717; background-color: #e3d2d2; }

.highlight .gd { color: #000000; background-color: #ffdddd; }

.highlight .ge { color: #000000; font-style: italic; }

.highlight .gr { color: #aa0000; }

.highlight .gh { color: #999999; }

.highlight .gi { color: #000000; background-color: #ddffdd; }

.highlight .go { color: #888888; }

.highlight .gp { color: #555555; }

.highlight .gs { font-weight: bold; }

.highlight .gu { color: #aaaaaa; }

.highlight .gt { color: #aa0000; }

.highlight .kc { color: #000000; font-weight: bold; }

.highlight .kd { color: #000000; font-weight: bold; }

.highlight .kn { color: #000000; font-weight: bold; }

.highlight .kp { color: #000000; font-weight: bold; }

.highlight .kr { color: #000000; font-weight: bold; }

.highlight .kt { color: #445588; font-weight: bold; }

.highlight .k, .highlight .kv { color: #000000; font-weight: bold; }

.highlight .mf { color: #009999; }

.highlight .mh { color: #009999; }

.highlight .il { color: #009999; }

.highlight .mi { color: #009999; }

.highlight .mo { color: #009999; }

.highlight .m, .highlight .mb, .highlight .mx { color: #009999; }

.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 .s { color: #d14; }

.highlight .na { color: #008080; }

.highlight .bp { color: #999999; }

.highlight .nb { color: #0086B3; }

.highlight .nc { color: #445588; font-weight: bold; }

.highlight .no { color: #008080; }

.highlight .nd { color: #3c5d5d; font-weight: bold; }

.highlight .ni { color: #800080; }

.highlight .ne { color: #990000; font-weight: bold; }

.highlight .nf { color: #990000; font-weight: bold; }

.highlight .nl { color: #990000; font-weight: bold; }

.highlight .nn { color: #555555; }

.highlight .nt { color: #000080; }

.highlight .vc { color: #008080; }

.highlight .vg { color: #008080; }

.highlight .vi { color: #008080; }

.highlight .nv { color: #008080; }

.highlight .ow { color: #000000; font-weight: bold; }

.highlight .o { color: #000000; font-weight: bold; }

.highlight .w { color: #bbbbbb; }

.highlight { background-color: #f8f8f8; }

/*@import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700,400italic";*/
html { font-family: sans-serif; line-height: 1.15; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -ms-text-size-adjust: 100%; -ms-overflow-style: scrollbar; }

body { margin: 0; font-family: source sans pro,-apple-system,BlinkMacSystemFont,segoe ui,Roboto,helvetica neue,Arial,sans-serif,apple color emoji,segoe ui emoji,segoe ui symbol; font-size: 1.125rem; font-weight: 400; line-height: 1.5; color: #222; text-align: left; background: #fafafa url(../images/body-bg.jpg) 0 0 repeat; overflow-wrap: break-word; }

article, aside, figcaption, figure, footer, header, hgroup, main, section { display: block; }

/* Architect's styling for "inner" wrapper (940px overall main-content width) */
.inner { position: relative; width: 940px; margin: 0 auto; }

/* Architect's styling for "content wrapper" */
#content-wrapper { padding-top: 30px; border-top: solid 1px #fff; }

/* Make the main content float left */
#main-content { float: left; width: 690px; }

/* Specify that no image in the main content section can be larger than that section */
#main-content img { max-width: 100%; }

/* Make the sidebar float right with an image as a divider at its top left */
aside#sidebar { float: right; width: 200px; min-height: 504px; padding-left: 20px; background: transparent url(../images/sidebar-bg.jpg) 0 0 no-repeat; }

/* Style links */
a { text-decoration: none; color: #2879d0; }
a:hover { color: #2268b2; }

/* Style HRs */
hr { height: 0; border: 0; margin-top: 1.125rem; margin-bottom: 1.125rem; border-top: solid 1px #ddd; }

/* Both give P some space below */
p { margin-top: 0; margin-bottom: 1.125rem; }

/* GitHub Pages is going to put all my tables into simple unclassed TABLE blocks, so that is what I need to style. */
div.table-wrapper { overflow: auto; }

table { max-width: 100%; border-collapse: collapse; margin-bottom: 1.125rem; }

th, td { padding: .25rem .75rem; border-top: 1px solid #dce2e6; }

th { vertical-align: bottom; border-bottom: 2px solid #dce2e6; }

tbody { border-top: 2px solid #dce2e6; }

td { vertical-align: top; }

/* GitHub Pages is going to put all my code into PRE and CODE blocks, so that is what I need to style. */
/* Make sure all code or pre blocks have a bottom buffer of 30px and a text size of 13px (Architect) / 1em (RP) and a text color of #222 and a font family of Monaco, etc. Not sure how a margin-top was slipping its way in, but seem to need to force it off here. */
code, pre, kbd { font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New","Bitstream Vera Sans Mono","Lucida Console",Terminal,monospace; font-size: 1em; color: #222; margin-bottom: 30px; margin-top: 0px; }

/* Nickname a light blue I seem to end up reusing a bit */
/* Give "code" blocks a light blue background color, a border, and some 3px/0px padding. */
code { padding: 0 3px; background-color: #f2f8fc; border: solid 1px #dbe7f3; }

/* Give "kbd" blocks a light gray background color, a rounded border, and some 3px/0px padding. */
kbd { padding: 0 3px; background-color: #f0f0f0; border: solid 1px #ccc; border-radius: 0.25rem; }

/* Give "pre" blocks some 20px-all-around (Architect; RP=1em) padding, make the "overflow" handle gracefully, set the text's background color to white, and give them a border And, RP-style, downsize the font. */
pre { padding: 1em; overflow: auto; text-shadow: none; background: #fff; border: solid 1px #f2f2f2; font-size: 80%; line-height: 1.5em; }

/* Give "code blocks inside pre blocks" 0 padding, a blue color, a white background color to the text (annoying -- overrode to "highlight" bg color), and no border */
pre code { padding: 0; color: #2879d0; background-color: #f0f0f0; border: none; }

/* Override Rouge's "code box" background to a darker color than f8f8f8 */
.highlight { background-color: #f0f0f0; }

/* Make the scrollbar actually stand out from its background */
.highlight pre::-webkit-scrollbar { width: 5px; height: 5px; }

.highlight pre::-webkit-scrollbar-thumb { background: #ddd; }

.highlight pre::-webkit-scrollbar-track { background: transparent; }

body .highlight pre { scrollbar-face-color: #ddd; scrollbar-track-color: transparent; }

.table-wrapper div::-webkit-scrollbar { width: 5px; height: 5px; }

.table-wrapper div::-webkit-scrollbar-thumb { background: #ddd; }

.table-wrapper div::-webkit-scrollbar-track { background: transparent; }

body .table-wrapper div { scrollbar-face-color: #ddd; scrollbar-track-color: transparent; }

/* Define the "light gray" used in the subheader background */
/* Style the site header below the top-nav */
header { background: #e0e0e0; padding-bottom: 0.75rem; padding-top: 0.75rem; }

header h1 { margin-top: 0; margin-bottom: 0; font-size: 3.5rem; }

header h2 { margin-top: 0; margin-bottom: 0; font-weight: 400; font-size: 1.25rem; }

/* Style the light blue header advertisement */
.header-advertisement { background: #f2f8fc; padding-bottom: 0.75rem; padding-top: 0.75rem; }

/* Explain what language is in the code block */
.highlighter-rouge div::before { background: #ccc; color: #fff; font-size: 1rem; text-indent: 1em; display: block; position: relative; top: 0; left: 0; width: 100%; padding: 0; border-top-left-radius: 3px; border-top-right-radius: 3px; margin-top: 1.125rem; }

.highlighter-rouge.language-js div::before { content: "JavaScript code:"; }

.highlighter-rouge.language-javascript div::before { content: "JavaScript code:"; }

.highlighter-rouge.language-ruby div::before { content: "Ruby code:"; }

.highlighter-rouge.language-plaintext div::before { content: "Plain text:"; }

.highlighter-rouge.language-text div::before { content: "Plain text:"; }

.highlighter-rouge.language-python div::before { content: "Python code:"; }

.highlighter-rouge.language-sql div::before { content: "SQL code:"; }

.highlighter-rouge.language-xml div::before { content: "XML code:"; }

.highlighter-rouge.language-json div::before { content: "JSON code:"; }

.highlighter-rouge.language-vb div::before { content: "VisualBasic code:"; }

/* Set all headers to have 0 margin on top and half an REM on bottom */
h1, h2, h3, h4, h5, h6 { margin-top: 0; margin-bottom: .5625rem; }

/* Set all headers, even "dot" ones, to inherit font-family, have a font-weight of 500 ... no ... 700 ..., a line-height of 1.2, and an inherited color */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-family: inherit; font-weight: 700; line-height: 1.2; color: inherit; }

/* Set font sizes of H1/.H1 - H6/.H6 to same as RP for testing purposes */
.h1, h1 { font-size: 2.460938rem; }

.h2, h2 { font-size: 1.96875rem; }

.h3, h3 { font-size: 1.722656rem; }

.h4, h4 { font-size: 1.476562rem; }

.h5, h5 { font-size: 1.230469rem; }

.h6, h6 { font-size: 1.125rem; }

/* On second thought, muck around a bit more with H1-H4, same as RP for testing purposes */
/* Adding H5 & H6 */
h1 { line-height: 1.1em; }

h2 { margin-top: 2.25rem; }

h3, h4, h5, h6 { margin-top: 2.25rem; }

/* RP has some good ideas for bold & small */
b, strong { font-weight: bolder; }

small { font-size: 80%; }

/* Style most list containers (Architect does 20px; RP does 1.125rem) */
ul, ol, dl { margin-top: 0; margin-bottom: 1.125rem; }

/* I like RP's notion of giving LIs a bit of space below, within the main-content ID */
#main-content li { margin-bottom: .28125rem; }

/* Style post TOC canvas's background color and margin/padding */
.post-toc { background-color: #f0f0f0; margin-bottom: 2.25rem; padding: 1rem; }
.post-toc h3 { margin-top: 0; }

/* No bottom margin for TOC ULs, OLs, DLs, or LIs in the main-content ID */
#main-content div.post-toc ul, #main-content div.post-toc ol, #main-content div.post-toc dl, #main-content div.post-toc li { margin-bottom: 0; }

/* As done by RP, have an option for making text subtler */
.muted { color: #888; }

/* Make tags look nice -- starting w/ RP style; theirs look nice */
.singlep-tag { background-color: #f2f8fc; border: solid 1px #dbe7f3; border-radius: .25rem; display: inline-block; padding: .25em .4em; font-size: 75%; font-weight: 700; line-height: 1; text-align: center; white-space: nowrap; vertical-align: baseline; }

/* Give the header image a little space below it */
.postimgcontainer { margin-bottom: 1.125rem; }

/* Float "older" & "newer" pagination links */
.pagination-item.older { float: left; }

.pagination-item.newer { float: right; }

/* Post accordion toggle */
.accordion-months:not(.expanded), .accordion-ym-posts:not(.expanded) { display: none; overflow: hidden; }

.accordion-postmonth { padding-left: 0.375rem; }

.accordion-postyear::before, .accordion-postmonth::before { content: "▼"; font-family: Arial,sans-serif; }

/* Sidebar box styling, a la RP to start */
.sidebar-box { border: 1px solid #dee2e6; border-radius: .25rem; padding: 1rem; margin-bottom: 1.125rem; }
.sidebar-box h4 { margin-top: 0; }

/* "Attention Note styling, a la RP to start */
.attention-note { background-color: #f9e6e1; border: 1px solid #f3cec4; border-radius: .25rem; padding: 1rem 1rem 0 1rem; margin-bottom: 1.125rem; }

.attention-note.attention-note-gentle { background-color: #e9e4ec; border: 1px solid #ded7e2; }

/* Share buttons */
.sharebtn { position: relative; height: 20px; box-sizing: border-box; padding: 1px 8px 1px 6px; border-radius: 3px; font-weight: 500; cursor: pointer; }
.sharebtn.shbt-twit { background-color: #1b95e0; color: #fff; }
.sharebtn.shbt-li { background-color: #0077b5; color: #fff; }

/* "Handwritten" font */
.handwritten-font { font-family: 'Indie Flower','Permanent Marker','Kalam','Caveat Brush','Architects Daughter','Covered By Your Grace','Nanum Brush Script','Comic Sans MS',cursive; font-size: 120%; }

/* MISC from end of initial Architect SCSS */
.clearfix:after { display: block; height: 0; clear: both; visibility: hidden; content: '.'; }

/* MISC from end of initial Architect SCSS */
.clearfix { display: inline-block; }

* html .clearfix { height: 1%; }

.clearfix { display: block; }

/* #Media Queries
================================================== */
/* Smaller than standard 960 (devices and browsers) */
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) { .inner { width: 740px; }
  #main-content { width: 490px; } }
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) { .inner { width: 93%; }
  #main-content, aside#sidebar { float: none; width: 100% !important; }
  aside#sidebar { min-height: 0; padding: 20px 0; margin-top: 20px; background-image: none; border-top: solid 1px #ddd; } }
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
/* Add a dark purple background color to the top navigation */
.topnav.whole-bar { background-color: #372c3e; overflow: hidden; /* Style any "googsrch INPUT" tag found anywhere within the top nav to roughly match the A tags and float it right */ /* Style any BUTTON tag found anywhere within the top nav to roughly match the A tags */ /* Style any A tag found anywhere within the top nav */ /* Style the dropdown wrapper */ }
.topnav.whole-bar img { vertical-align: middle; height: 2rem; margin-bottom: 0.375rem; }
.topnav.whole-bar .tn-googsrch input { display: block; float: right; background-color: transparent; color: #695e70; border-color: #695e70; font-family: inherit; font-size: 1.125rem; line-height: 3rem; vertical-align: middle; padding-left: 1rem; padding-right: 1rem; margin: 0; }
.topnav.whole-bar button { border: none; outline: none; font-family: inherit; background-color: inherit; color: #f2f2f2; font-size: 1.125rem; line-height: 3rem; vertical-align: middle; padding-left: 1rem; padding-right: 1rem; margin: 0; }
.topnav.whole-bar a { text-decoration: none; color: #f2f2f2; font-size: 1.125rem; line-height: 3rem; text-align: center; vertical-align: middle; padding-left: 1rem; padding-right: 1rem; float: left; display: block; /* If have to use "alt text" on home, make it a little bolder */ /* If the A tag has "active," highlight it bright blue and pump up the text whiteness */ /* If the link is being hovered over, flip it to a light background, dark text */ /* If the A tag is the hamburger, hide it */ }
.topnav.whole-bar a.tn-home { font-weight: 700; }
.topnav.whole-bar a.active { background-color: #2879d0; color: white; }
.topnav.whole-bar a:hover { background-color: #f9f9f9; color: black; }
.topnav.whole-bar a:focus { background-color: #f9f9f9; color: black; }
.topnav.whole-bar a:focus-within { background-color: #f9f9f9; color: black; }
.topnav.whole-bar a.tn-icon { display: none; }
.topnav.whole-bar .tn-dropdown-wrapper { float: left; overflow: hidden; /* Show the dropdown menu when the user moves the mouse over the dropdown wrapper */ }
.topnav.whole-bar .tn-dropdown-wrapper .tn-dropdown-menuitems { display: none; position: absolute; min-width: 160px; box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); z-index: 1; /* Override normal "A" styling within dropdown links (float and text-color) */ }
.topnav.whole-bar .tn-dropdown-wrapper .tn-dropdown-menuitems a { float: none; background-color: #f9f9f9; color: black; }
.topnav.whole-bar .tn-dropdown-wrapper .tn-dropdown-menuitems a:hover { background-color: #ddd; }
.topnav.whole-bar .tn-dropdown-wrapper .tn-dropdown-menuitems a:focus { background-color: #ddd; }
.topnav.whole-bar .tn-dropdown-wrapper .tn-dropdown-menuitems a:focus-within { background-color: #ddd; }
.topnav.whole-bar .tn-dropdown-wrapper:focus-within .tn-dropdown-menuitems, .topnav.whole-bar .tn-dropdown-wrapper:hover .tn-dropdown-menuitems { display: block; }

/* When the screen is less than 768 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the topnav (.icon) */
@media screen and (max-width: 767px) { .topnav.whole-bar { /* Style the hamburger A on small screens */ /* Style .topnav.wholebar small-screen and descendants when "smallscreenexpanded" */ }
  .topnav.whole-bar a:not(.tn-home), .topnav.whole-bar .tn-dropdown-wrapper, .topnav.whole-bar .tn-googsrch { display: none; }
  .topnav.whole-bar a.tn-icon { display: block; float: right; /* Leave the small-screen hamburger's color alone on hover */ }
  .topnav.whole-bar a.tn-icon:hover { background-color: #372c3e; color: #f2f2f2; }
  .topnav.whole-bar.smallscreenexpanded { position: relative; }
  .topnav.whole-bar.smallscreenexpanded button::after { content: "\00a0\00a0▼"; }
  .topnav.whole-bar.smallscreenexpanded .tn-dropdown-wrapper { float: none; /* Flip the arrow direction when expanded */ }
  .topnav.whole-bar.smallscreenexpanded .tn-dropdown-wrapper:hover button::after { content: ""; }
  .topnav.whole-bar.smallscreenexpanded .tn-dropdown-menuitems { position: relative; }
  .topnav.whole-bar.smallscreenexpanded .tn-dropdown-wrapper, .topnav.whole-bar.smallscreenexpanded .tn-dropbtn, .topnav.whole-bar.smallscreenexpanded .tn-googsrch { text-align: left; /* Expose things once hamburger toggled open */ display: block; width: 100%; }
  .topnav.whole-bar.smallscreenexpanded a { text-align: left; /* Expose things once hamburger toggled open */ /* Style the hamburger A on small screens when class "smallscreenexpanded" is toggled */ }
  .topnav.whole-bar.smallscreenexpanded a:not(.tn-icon) { display: block; float: none; }
  .topnav.whole-bar.smallscreenexpanded a.tn-icon { position: absolute; right: 0; top: 0; } }
.header-search-form { margin-top: 1rem; background-color: white; width: 100%; display: flex; align-items: center; border-radius: 9999px; border-width: 2px; border-color: #f3f4f6; box-shadow: 0 0 #0000, 0 0 #0000, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); box-sizing: border-box; border-style: solid; }

.header-search-form:hover { border-color: #bfdbfe; }

.header-search-form:focus-within { border-color: #bfdbfe; }

.header-search-input { width: 100%; padding-top: 0px; padding-bottom: 0px; padding-left: 1.25rem; padding-right: 1.25rem; color: #1f2937; line-height: 1.25; border-top-left-radius: 9999px; border-bottom-left-radius: 9999px; font-family: inherit; font-size: 100%; margin: 0; outline-offset: 2px; -webkit-appearance: textfield; appearance: textfield; box-sizing: border-box; border-width: 0; border-style: solid; }

.header-search-input:focus { outline: 2px solid transparent; outline-offset: 2px; }

.header-search-input::placeholder { opacity: 1; color: #9ca3af; }

.header-search-button { background-color: #372c3e; color: #ffffff; border-radius: 9999px; display: flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; font-family: inherit; font-size: 100%; margin: 0; text-transform: none; background-image: none; cursor: pointer; padding: 0; line-height: inherit; -webkit-appearance: button; appearance: button; box-sizing: border-box; border-width: 0; border-style: solid; }

.header-search-button:hover { color: #1e3a8a; background-color: #bfdbfe; }

.header-search-button:focus { color: #1e3a8a; background-color: #bfdbfe; }