/*****************************************************************************/
/*
/* Common
/*
/*****************************************************************************/

/* Global Reset */
* {
  margin: 0;
  padding: 0;
}

@media all {html {font-size: 20px;}}
@media all and (max-width:720px){html {font-size: 19px;}}
@media all and (max-width:680px){html {font-size: 18px;}}
@media all and (max-width:640px){html {font-size: 17px;}}
@media all and (max-width:600px){html {font-size: 16px;}}
@media all and (max-width:560px){html {font-size: 15px;}}

body {
  text-align: left;
  background-color: #112;
  color: #ddd;
  font-family: "ff-tisa-web-pro", Georgia, serif;
  font-weight: normal;
  line-height: 1.45;
  
  margin: 1em auto;
  
  text-rendering: optimizeLegibility;
  
  /* Subpixel-antialiased fonts are terrible on OSX on a dark theme! */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, h4, h5, h6, .sans, .header,
.meta, #blog .more, .pagination, #error404
{
  font-family: "adelle-sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
}

h1 {
  font-size: 150%;
}

h2 {
  font-size: 130%;
}

h3 {
  font-size: 110%;
}

h4, h5, h6 {
  font-size: 100%;
}

th, td {
  padding: 0.3em 0.5em;
}

p { margin: 0.75em 0; }

a {
  text-decoration: none;
  color: #708fc2;
}

a:visited { color: #4d74b3; }
a:hover   { color: #eee; }

blockquote {
  font-size: 90%;
  padding-left: 2em;
}

hr {
  margin: 2.5em auto;
  border-style: none;
  max-width: 98%;
  border-top: solid 0.1em #aaa;
}

.footnotes {
  font-size: 90%;
  margin-top: 2.5em;
}

/* Add a border above our footnotes that matches our hr styling.
   Implemented as a pseudo-element so that we can have it subtly
   less wide than the containing div, just like our hrs. */
.footnotes:before {
  content: "";
  display: block;
  margin: 0 auto;
  width: 98%;
  border-top: solid 0.1rem #aaa;
}

code, pre, .mono {
  font-family: "source-code-pro", Consolas, Inconsolata, monospace;
  color: #aaa;
}

code, pre {
  white-space: pre-wrap;
}

pre {
  font-size: 90%;
}

p > code {
  margin-left: 0.1em;
  margin-right: 0.1em;
}

sup {
  line-height: 1;
}

.center-column {
  max-width: 35em;
  margin: auto auto;
  padding: 0 0.5em;
}

.wide-center-column {
  max-width: 40em;
  margin: auto auto;
}

.MathJax {
  /* Disable custom fonts for mathjax because it screws with its rendering. */
  font-family: serif;
}

/*****************************************************************************/
/*
/* General Site Stuff
/*
/*****************************************************************************/

.invisible {
  /* For use in accesibility-improving Skip links and other invisible elements. */
  color: rgba(0, 0, 0, 0);
  font-size: 1px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  margin: 0;
  border: 0;
  padding: 0;
  float: left;
  position: absolute;
  left: -10000px;
  top: auto;
}

.header-wrap {
  border-bottom: 0.15em solid #aaa;
  margin-bottom: 1.5em;
}

.header {
  font-weight: bold;
  text-decoration: none;
  min-height: 1.8em;
  padding-bottom: 0.5em;
  width: 100%;
}

@media all {
  .header .site-name {
    line-height: 1;
  }
}
@media all and (min-width:475px) {
  .header {
    text-align: right;
  }

  .header .site-name {
    line-height: 0.7;
    float: left;
  }
}

.header .site-name a {
  font-size: 220%;
  color: #a00;
}

.header .site-name a:hover {
  color: #eee;
}

.header .pages {
  font-size: 115%;
  line-height: 1.5;
  margin-top: 0.2em;
}

.header .pages a {
  color: #aaa;
  margin-right: 1.2em;
}

.header .pages a:last-child {
  margin-right: 0;
}

.header .pages a:hover {
  color: #eee;
}

.meta {
  color: #777;
  font-size: 75%;
  margin: .3em 0 1em 0;
}

.footer-wrap {
  border-top: 0.12em solid #aaa;
  margin-top: 1.6em;
}

.footer {
  color: #666;
  overflow: hidden;
  text-align: center;
  width: 100%;
}

.footer .footer-content {
  font-size: 80%;
  float: left;
}

.footer .contact {
  white-space: nowrap;
  width: 32%;
}

.footer .contact a {color: #aaa;}
.footer .contact a:hover {color: #eee;}

@media all and (max-width:440px){.footer {font-size: 75%;}}
@media all and (max-width:415px){.footer {font-size: 70%;}}
@media all and (max-width:390px){.footer {font-size: 65%;}}
@media all and (max-width:365px){.footer {font-size: 60%;}}
@media all and (max-width:340px){.footer {font-size: 55%;}}
@media all and (max-width:315px){.footer {font-size: 50%;}}
@media all and (max-width:290px){.footer {font-size: 45%;}}
@media all and (max-width:265px){.footer {font-size: 40%;}}

.clear {
  clear: both;
}

/* Responsive SVGs */

.svg-wrap {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
}

.svg-wrap svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Pagination, for pages that need it */

.pagination {
  display: flex;
  margin-top: 2em;
}

.pagination + .pagination {
  margin-top: 0.5em;
}

.pagination.big {
  font-size: 130%;
}

.pagination .back {
  text-align: left;
  flex-grow: 1;
}

.pagination .forward {
  text-align: right;
  flex-grow: 1;
}

.pagination .arrow {
  font-size: 130%;
}

/*****************************************************************************/
/*
/* 404 Page
/*
/*****************************************************************************/

#page404 {
  overflow: hidden;
}

#error404 {
  font-size: 500%;
  float: left;
  display: block;
  margin-right: 0.3em;
  line-height: 1;
}

/*****************************************************************************/
/*
/* Home Page
/*
/*****************************************************************************/

#home {
  font-size: 125%;
  line-height: 1.25;
  text-align: center;
  font-style: italic;
}

#home #clock-wrap {
  margin: 0 auto;
  max-width: 60%;
  margin-bottom: 0.5em;
}

#clock-description {
  opacity: 0;
  transition: opacity 0.5s;
}

/*****************************************************************************/
/*
/* Blog page
/*
/*****************************************************************************/

#blog .posts .post {
  margin-top: 2em;
}

#blog .posts .post:not(:last-child) {
  padding-bottom: 2em;
}

/* Hide footnotes in the article previews in the main blog page. */
#blog .posts .footnote {
  display: none;
}

#blog .more {
  font-size: 90%;
}

#blog .post .title a {
  color: #ccc;
}

#blog .post .title a:hover {
  color: #eee;
}

/*****************************************************************************/
/*
/* Games and Projects page
/*
/*****************************************************************************/

#showcase .entry {
  border-top: 0.1em solid #aaa;
  padding-top: 2em;
  margin-top: 1em;
  margin-bottom: 2em;
  overflow: auto;
}

#showcase .footnotes:before {
  border-top: none;
}

#showcase .section-header {
  border-top: 0.1em solid #aaa;
}

#showcase .image {
  float: left;
  text-align: left;
}

@media all {
  #showcase .image {
    margin: 0 1em 0 0;
    width: 50%;
  }
}

@media all and (max-width:400px) {
  #showcase .image {
    margin: 0 1em 0.25em 0;
    width: 100%;
  }
}

#showcase .image img {
  width: 100%;
}

#showcase .entry .name a {
  color: #ccc;
}

#showcase .entry .name a:hover {
  color: #eee;
}

/*****************************************************************************/
/*
/* About Page
/*
/*****************************************************************************/

.copyright {
  font-size: 70%;
  line-height: 1;
  color: #666;
  margin: 0;
}

/*****************************************************************************/
/*
/* Posts
/*
/*****************************************************************************/

.title {
  line-height: 1.25;
}

.content ul, .content ol {
  margin: 1em 0 1em 1.5em;
}

.content li ul, .content li ol {
  margin-top: 0;
  margin-bottom: 0;
}

/* (Responsive) Youtube video embeds */

.youtube {
  text-align: center;
  position: relative;
  height: 0;
  /* Height is actually handled by padding,
     allowing for responsive youtube videos */
}

.youtube.wide {
  padding-bottom: 56.25%; /* 16:9 */
}

.youtube.full {
  padding-bottom: 75%; /* 4:3 */
}

.youtube.computerwide {
  padding-bottom: 62.5%; /* 16:10 */
}

.youtube iframe {
  position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

twitter-widget, .twitter-tweet {
  margin-left: auto;
  margin-right: auto;
}

/* images (the fancy, captioned kind) and flash embed */
.content .image {
  text-align: center;
  max-width: 100%;
}

.content .image-with-caption {
  margin-top: 1.2em;
  margin-bottom: 1em;
}

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

/* Responsive flash embeds */

.content .flash {
  text-align: center;
  max-width: 100%;
  margin: 0 auto; /* Force this div to be centered */
}

.content .flash .flash-embed {
  position: relative;
  height: 0;
  /* As with youtube videos, height is handled by padding,
     defaulted to 100% but typically overridden by element styles. */
  padding-bottom: 100%;
}

.content .flash .flash-embed object {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content .audio {
  margin: 1.25em auto 0.85em auto;
}

.content .audio audio {
  display: block;
  margin: 0 auto 0.25em auto;
}

.content .caption {
  margin-top: 0;
  font-size: 90%;
  line-height: 1.2;
  text-align: center;
  font-style: italic;
  margin-bottom: 1em;
}

.content .caption em {
  font-style: normal;
}

.content .caption p {
  margin-top: 0;
}

.content h1, .content h2, .content h3,
.content h4, .content h5, .content h6 {
  margin: 2em 0 0.7em 0;
}

.content h2 + h3,
.content h3 + h4,
.content h4 + h5,
.content h5 + h6 {
  margin: 0.7em 0 0.7em 0;
}