@charset "UTF-8";
html, body {
  margin: 0;
  padding: 0; }

body {
  font: 16pt/24pt "Tinos", "Georgia", "Times New Roman", serif;
  color: #59414c;
  background: url(../img/bg.jpg); }

a {
  color: #8f008f;
  text-decoration: none;
  font-variant: small-caps;
  font-weight: 700; }
  a.home {
    color: #34232b;
    font-variant: normal; }
  a:hover {
    border-bottom: 1px solid; }
  a:focus {
    outline: 1px dotted;
    outline-offset: 2pt; }
  a:active {
    position: relative;
    top: 2px; }

::selection {
  background: #d4a4da;
  background: rgba(212, 164, 218, 0.5);
  color: black; }

::-moz-selection {
  background: #d4a4da;
  background: rgba(212, 164, 218, 0.5);
  color: black; }

.container {
  max-width: 512pt;
  padding: 0 16pt;
  margin: 0 auto; }

p {
  margin: 0 0 16pt; }

.body p:first-child {
  font-size: 20pt;
  line-height: 36pt;
  color: #34232b;
  text-align: justify; }
  .body p:first-child:after {
    content: "";
    display: table;
    clear: both; }
  .body p:first-child::first-letter {
    float: left;
    font-size: 76pt;
    height: 72pt;
    padding-top: 12pt;
    margin-right: 4pt; }

strong {
  font-weight: 700;
  color: #34232b; }

ul {
  list-style-type: circle; }

hr {
  border-color: #eee; }

h1, h2, h3, h4 {
  font-weight: 700;
  font-style: italic;
  font-size: 20pt; }

header {
  margin: 24pt 0; }
  header h1 {
    display: none; }
  header blockquote {
    position: relative;
	text-align: center;
    padding-top: 1em; }

#social {
  display: flex;
  justify-content: center;
  list-style: none;
  margin: 1em 0;
  padding: 0; }
  #social li {
    margin-right: 1em; }
    #social li:last-child {
      margin: 0; }
  #social a {
    width: 1em;
    display: block;
    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    mix-blend-mode: multiply; }
    #social a:hover {
      border-bottom: none; }
  #social .linkedin a {
    background: url(../img/linkedin.svg) no-repeat 0 0/100% 100%; }
  #social .twitter a {
    background: url(../img/twitter.svg) no-repeat 0 0/100% 100%; }
  #social .github a {
    background: url(../img/github.svg) no-repeat 0 0/100% 100%; }

@media (max-width: 544pt) {
  header h1 {
    width: 150px;
    height: 150px;
    flex-basis: 150px; }
  header blockquote {
    font-size: 12pt;
    line-height: 18pt; }
    header blockquote::before {
      font-size: 72pt;
      left: -36pt; } }

@media (max-width: 328pt) {
  header {
    display: block;
    margin-top: 16pt; }
    header h1 {
      width: 100px;
      height: 100px;
      margin: 0 auto; }
  #social {
    margin-left: 0; } }

nav ul {
  padding: 0;
  list-style: none;
  font-size: 14pt;
  line-height: 18pt; }
  nav ul li.nav-prev {
    float: left;
    margin-right: 8pt; }
    nav ul li.nav-prev a::before {
      content: "« "; }
  nav ul li.nav-next {
    float: right;
    margin-left: 8pt;
    text-align: right; }
    nav ul li.nav-next a::after {
      content: " »"; }
  nav ul::after {
    content: "";
    clear: both;
    display: table; }

.preview .preview-date {
  font-size: 12pt;
  float: right; }

.preview .preview-summary {
  padding-left: 2em; }

.page {
  display: flex;
  margin: 1em 0; }
  .page h2 {
    flex: 1 1;
    margin: 0; }
  .page .date {
    font-size: 12pt; }

.content {
  margin: 1em 0; }

pre, code {
  font-family: "Roboto Mono", monospace; }

footer {
  margin: 1em 0;
  font-size: 12pt;
  text-align: center;
  color: #b6aaaf; }