/*****************************************************************************/
/*                                                                           */
/* Chrysalide                                                                */
/* Copyright (c) 2016-2017, Frederic Cambus                                  */
/* https://github.com/fcambus/chrysalide                                     */
/*                                                                           */
/* Created: 2016-02-16                                                       */
/* Last Updated: 2017-08-07                                                  */
/*                                                                           */
/* Chrysalide is released under the BSD 2-Clause license.                    */
/* See LICENSE file for details.                                             */
/*                                                                           */
/*****************************************************************************/

@font-face {
	font-family: Tahoma, Geneva, sans-serif;
	font-weight: 400;
	font-style: normal;
}

body {
	background: #fff;
	color: #333;
	font-family: Tahoma, Geneva, sans-serif;
	*font-size: 1em;
	-webkit-text-size-adjust: 100%;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}

footer {
	color: #aaa;
	margin: 16px 0;
}

h1, h3 {
	margin-bottom: 0px;
}

header, #container {
	max-width: 1024px;
	margin-left: auto;
	margin-right: auto;
	padding: 0 10px;
}

header h2 {
	font-size: 48px;
	line-height: 48px;
	margin: 16px 0 0;
}

hr {
	border-top: 1px solid #eee;
	margin: 16px 0;
}

img {
	display: inline-block;
	height: auto;
	max-width: 100%;
	margin: auto;
}

time {
	color: #aaa;
}

.youtube {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
}

.youtube iframe {
	position: absolute;
	width: 100%!important;
	height: 100%!important;
}

#powered {
	float: right;
}

.project-list {
  padding:0;
  list-style: none;
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
}
.project-list > li {
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  padding: 4px;
}

.home-card {
  display: flex;
  position: relative;
}
.home-card > .media {
  width: 64px;
  position: relative;
  margin: 0;
  display: flex;
  justify-content: center;
  flex-direction: column;
  text-align: center;
}
.home-card > .media > img {
  display:block;
}
.home-card > .stack {
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
}
.home-card > .stack > .content {
  flex-grow: 1;
  padding: 0.5rem;
  margin-left: 0.5rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.home-card > .stack > .action {
  position: relative;
  padding: .25rem 0.5rem;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  border-top: 1px solid #ddd;
  font-size: 80%;
}
.home-card > .stack > a.content::after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  content: "";
}
.home-card > .stack > a.content {
  text-decoration: none;
}
.home-card > .stack > a.content:hover {
  color: #111;
}

footer:after {clear:both;}
footer:before, footer:after {content:"";display:table;}
ul.social-links { list-style:none; margin:0; padding: 0; }
ul.social-links li { float:left; display:block; margin-right: 1em; }
ul.social-links li a { opacity: 0.75; text-decoration: none; }
ul.social-links li a:hover { opacity: 1; }
ul.social-links li a img, ul.social-links li a svg { margin:0; margin-right: .25em; }
ul.social-links li a svg { display: inline-block; width: 32px; height: 32px; fill: white; }

.latest-blog > h2 { margin: 0; font-size: 100%; font-weight: normal; font-style: italic; }
.latest-blog > .blog { margin-top: 0.5rem; margin-bottom: 0.5rem; }
.blog { 
  margin: 0.5rem 0;
  border: 1px solid #ddd;
  background-color: #f4f4f4;
  padding: .75rem 1.5rem;
  margin-top: 1rem;
}
.blog > h3 { margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
}

.blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6 {
  border-bottom: 1px solid rgba(0,0,0,.25);
}

.post-feedback { font-style: italic; margin-top: 2rem; }

header { margin-top: 15px; }
.header-menu { list-style: none; padding:0; margin:0; display: inline-block; }
.header-menu > li { display: inline-block; margin-right: 10px; }

.note, aside.update, aside.warning {
  border-left: .25rem solid;
  border-right: .25rem solid;
  background-color: #f4f4f4;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
.note {
  border-color: #ddd;
}
/* Inline code within a note */
.note > code, .note :not(pre) > code,
.note pre {
  background: #e7e7e7;
}
aside.update {
  border-color: #79C;
}
aside.warning {
  background-color: #EEE6D6;
  border-color: #CCAF77;
}

mark.success { background-color: #ECFFCFFF; }
mark.failure { background-color: #FFE8DEFF; }

details summary { cursor: pointer; }

a.info-link { border-bottom: 1px dashed #ddd; text-decoration: none; color: inherit; }
a.info-link:hover { text-decoration: none; color: #444; background: #eee; position:relative; }
a.info-link:hover:after { content: '?'; position:absolute; bottom: 1.6em; right: -.7em; border-radius: 100%; background: #f9f9f9; border: 1px dashed #ddd; width: 1.25em; height: 1.25em; font-size: .5em; line-height: 1.25em; text-align: center; opacity: 1; font-weight: normal; }

blockquote {
  border-left: .25rem solid #ddd;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
}

.clear:after {clear:both;}
.clear:before, .clear:after {content:"";display:table;}

@media print {
  footer, header { display: none !important; }
  .no-print { display: none !important; }
}
@media only screen and (max-width: 600px) {
  .hide-on-small { display: none !important; }
}

h1 {
  line-height: 1.25;
  margin-bottom: .25em;
}

pre,
code,
kbd,
samp,
tt{
  font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  font-size: 1em;
}

code {
  font-size: 87.5%;
}
:link code, :visited code {
  color: inherit;
}

a.heading-link {
  text-decoration: none;
  margin-left: 8px;
  font-size: 0.9rem;
  opacity: .25;
}
:is(h1, h2, h3, h4, h5, h6):hover > a.heading-link {
  opacity: 1;
}

/* PrismJS 1.10.0
http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript */
/**
 * okaidia theme for JavaScript, CSS and HTML
 * Loosely based on Monokai textmate theme by http://www.monokai.nl/
 * @author ocodia
 */

code[class*="language-"],
pre,
:not(pre) > code {
  background: none;
  text-shadow: 0 1px white;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.25;

  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;

  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}

pre::-moz-selection, pre ::-moz-selection,
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
  text-shadow: none;
  background: #b3d4fc;
}

pre::selection, pre ::selection,
code[class*="language-"]::selection, code[class*="language-"] ::selection {
  text-shadow: none;
  background: #b3d4fc;
}

@media print {
  code[class*="language-"],
  pre[class*="language-"] {
    text-shadow: none;
  }
}

/* Code blocks */
pre {
  padding: 1em;
  margin: .5em 0;
  overflow: auto;
}

:not(pre) > code/*[class*="language-"]*/,
pre {
  background: #f5f2f0;
}

/* Inline code */
:not(pre) > code/*[class*="language-"]*/ {
  display: inline-block;
  padding: .1em;
  border-radius: .3em;
  white-space: normal;
}

.token_comment,
.token_prolog,
.token_doctype,
.token_cdata {
  color: slategray;
}

.token_punctuation {
  color: #57544B;
}
@media (prefers-color-scheme: dark) {
  .token_punctuation {
    color: #999;
  }
}

.namespace {
  opacity: .7;
}

.token_tag,
.token_boolean,
.token_number,
.token_constant,
.token_symbol,
.token_deleted,
.token_deletion,
.token_error {
  color: #905;
}

@media (prefers-color-scheme: dark) {
  .token_tag,
  .token_boolean,
  .token_number,
  .token_constant,
  .token_symbol,
  .token_deleted,
  .token_deletion,
  .token_error {
    color: #C13683;
  }
}

.token_selector,
.token_attr-name,
.token_string,
.token_char,
.token_builtin,
.token_inserted,
.token_attribute,
.token_addition {
  color: #4D6D0C;
}

@media (prefers-color-scheme: dark) {
  .token_selector,
  .token_attr-name,
  .token_string,
  .token_char,
  .token_builtin,
  .token_inserted,
  .token_attribute,
  .token_addition {
    color: #7FA03C;
  }
}

.token_operator,
.token_entity,
.token_url,
.language-css .token_string,
.style .token_string {
  color: #9a6e3a;
  /*background: hsla(0, 0%, 100%, .5);*/
}

.token_atrule,
.token_attr-value,
.token_keyword,
.token_type {
  color: #07a;
}

@media (prefers-color-scheme: dark) {
  .token_atrule,
  .token_attr-value,
  .token_keyword,
  .token_type {
    color: #5A91C0;
  }
}

.token_property,
.token_preprocessor,
.token_note {
  color: #0E4A64;
}

@media (prefers-color-scheme: dark) {
  .token_property,
  .token_preprocessor,
  .token_note {
    color: #4C79BC;
  }
}

.token_function,
.token_class-name {
  color: #895F17;
}

@media (prefers-color-scheme: dark) {
  .token_function,
  .token_class-name {
    color: #BF944B;
  }
}

.token_regex,
.token_important,
.token_variable,
.token_warning {
  color: #B67500;
}

@media (prefers-color-scheme: dark) {
  .token_regex,
  .token_important,
  .token_variable,
  .token_warning {
    color: #E9A62D;
  }
}

.token_important,
.token_bold {
  font-weight: bold;
}
.token_italic {
  font-style: italic;
}

.token_entity {
  cursor: help;
}

@media (prefers-color-scheme: dark) {
  body {
    background: #191919;
    color: #e0e0e0;
  }

  footer {
    color: #aaa;
  }

  hr {
    border: 0;
    border-top: 1px solid #000;
  }

  :link {
    color: #2B80FF;
  }
  :visited {
    color: #836E98;
  }

  .project-list > li {
    border-color: #000;
    background-color: #111;
  }
  .home-card > .stack > .action {
    border-color: #2a2a2a;
    color: #aaa;
  }
  .home-card > .stack > a.content:hover {
    color: #ddd;
  }
  .blog {
    border-color: #000;
    background-color: #111;
  }
  .blog-post h2, .blog-post h3, .blog-post h4, .blog-post h5, .blog-post h6 {
    border-color: rgba(255,255,255,0.25);
  }
  aside.update, .note, aside.warning {
    background-color: #222;
  }
  .note {
    border-color: #444;
  }
  aside.update {
    border-color: #248;
  }
  aside.warning {
    background-color: #2A2721;
    border-color: #B28331;
  }
  /* Inline code within a note */
  .note > code, .note :not(pre) > code,
  .note pre,
  aside > code, aside :not(pre) > code,
  aside pre {
    background: #1a1a1a;
  }

  mark { color: inherit; }
  mark.success { background-color: #1B3005FF; }
  mark.failure { background-color: #1E0303FF; }

  blockquote {
    border-color: #444;
  }

  code[class*="language-"],
  pre,
  :not(pre) > code {
    text-shadow: 0 1px black;
    color: #c1c1c1;
  }

  pre::-moz-selection, pre ::-moz-selection,
  code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
    text-shadow: none;
    background: #204A87;
  }

  pre::selection, pre ::selection,
  code[class*="language-"]::selection, code[class*="language-"] ::selection {
    text-shadow: none;
    background: #204A87;
  }

  :not(pre) > code,
  pre {
    background: #111;
  }
}