@import url('https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,400i,700,700i&subset=latin-ext');

/* served by Google in order to save on bandwidth,
 * monospace isn't that important to me anyway,
 * that import statement needs to be the first thing in the file
@font-face { font-family: 'Ubuntu Mono';
  src: local('Ubuntu Mono'),
    url('UbuntuMono-R.woff') format('woff');
  font-weight: normal; font-style: normal; }
@font-face { font-family: 'Ubuntu Mono';
  src: local('Ubuntu Mono Bold'),
    url('UbuntuMono-B.woff') format('woff');
  font-weight: bold; font-style: normal; }
@font-face { font-family: 'Ubuntu Mono';
  src: local('Ubuntu Mono Italic'),
    url('UbuntuMono-RI.woff') format('woff');
  font-weight: normal; font-style: italic; }
@font-face { font-family: 'Ubuntu Mono';
  src: local('Ubuntu Mono Bold Italic'),
    url('UbuntuMono-BI.woff') format('woff');
  font-weight: bold; font-style: italic; }
*/

/* we can't get a custom mapping from Google and FF would be broken anyway;
 * using a latin + latin-extended subset generated by transfonter.org */
/* actually, let us save bandwidth--while pretty, the fonts aren't important
 * and take measurable time to load, especially over my shitty net connection
@font-face { font-family: 'UbuntuLighter';
  font-weight: normal; font-style: normal;
  src: local('Ubuntu Light'), local('Ubuntu-Light'),
    url(Ubuntu-Light-subset.woff2) format('woff2'),
    url(Ubuntu-Light.woff) format('woff');
}
@font-face { font-family: 'UbuntuLighter';
  font-weight: bold; font-style: normal;
  src: local('Ubuntu Regular'), local('Ubuntu-Regular'),
    url(Ubuntu-Regular-subset.woff2) format('woff2'),
    url(Ubuntu-Regular.woff) format('woff');
}
@font-face { font-family: 'UbuntuLighter';
  font-weight: normal; font-style: italic;
  src: local('Ubuntu Light Italic'), local('Ubuntu-LightItalic'),
    url(Ubuntu-LightItalic-subset.woff2) format('woff2'),
    url(Ubuntu-LightItalic.woff) format('woff');
}
@font-face { font-family: 'UbuntuLighter';
  font-weight: bold; font-style: italic;
  src: local('Ubuntu Italic'), local('Ubuntu-Italic'),
    url(Ubuntu-Italic-subset.woff2) format('woff2'),
    url(Ubuntu-Italic.woff) format('woff');
}
*/

/* common to all pages */
body { max-width: 48em; margin-left: auto; margin-right: auto;
  padding-left: 1.5em; padding-right: 1.5em;
  border-left: 1px solid #ddd; border-right: 1px solid #ddd;
  font-family: "UbuntuLighter", sans-serif; line-height: 1.2; }

a { color: #c94900; }
a:hover { color: #ff5f00; }

ul.nav { margin: 0; padding: 0; }
ul.nav li { display: inline-block; padding-right: 1em; }

/* showcase */
.right, .left { margin-top: 1em; margin-bottom: 0.5em;
  padding: .3em; border: 1px solid #ddd; }
.right, .left { display: flex;
 justify-content: space-between; align-items: center; }
.left { float: left; margin-right: 1em; }
.right { float: right; margin-left: 1em; }
div { overflow: hidden; }

/* articles */
pre, code { font-family: 'Ubuntu Mono', monospace; }
pre { padding: 0.5em 1em; overflow-x: auto; font-size: 100%; }
svg, img { max-width: 90%; }
.left-simple { margin: 0.5em 1em 0.5em 0; float: left; }
.right-simple { margin: 0.5em 0 0.5em 1em; float: right; }
.censor { background: black; }
.censor:hover { background: inherit; }