@import url(https://fonts.googleapis.com/css?family=Neucha|Patrick+Hand+SC);
* {
  box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: ivory; }
  body a {
    text-decoration: none;
    color: #1963b6; }
    body a:hover, body a:focus {
      text-decoration: underline; }
    body a:visited {
      color: #460fb3; }
    body a.external {
      background-position: center right;
      background-repeat: no-repeat;
      background-image: url(external.svg);
      background-size: 12px 12px;
      padding-right: 13px; }
    body a.feed {
      background-position: center left;
      background-repeat: no-repeat;
      background-image: url(feed.svg);
      background-size: 0.65em 0.65em;
      padding-left: 0.8em; }

header {
  width: 20%;
  position: fixed;
  height: 100%;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  text-align: center;
  font-family: 'Patrick Hand SC', sans-serif;
  background-color: #c8c8a0; }
  header h1 {
    background-color: #ce795e;
    padding: 0.5em 0;
    margin: 0; }
    header h1 a {
      color: black !important; }
  header nav ul {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0; }
    header nav ul li {
      display: block;
      font-size: 2em;
      margin: 0.25em 0.5em;
      border: 2px solid #41403e;
      border-top-left-radius: 255px 15px;
      border-top-right-radius: 15px 225px;
      border-bottom-right-radius: 225px 15px;
      border-bottom-left-radius: 15px 255px;
      background-color: #f0f0f0;
      transition: background-color 0.5s ease; }
      header nav ul li:hover {
        background-color: #c8c8c8; }
      header nav ul li form {
        display: inline-block;
        width: calc(100% - 0.5em);
        line-height: 0;
        margin: 0.25em 0; }
        header nav ul li form input {
          width: 100%; }

article, footer {
  width: 80%;
  margin-left: 20%;
  font-family: 'Neucha', sans-serif;
  padding: 1em; }

article {
  overflow: hidden;
  border-bottom: solid 1px #c9cacc; }
  article .tag {
    font-size: 60%;
    color: white !important;
    text-align: center;
    margin-left: 2px;
    padding: 4px 7px 5px 7px;
    border-top-left-radius: 255px 15px;
    border-top-right-radius: 15px 225px;
    border-bottom-right-radius: 225px 15px;
    border-bottom-left-radius: 15px 255px; }
  article .tag.ff {
    background: FireBrick; }
  article .tag.ss {
    background: SeaGreen; }
  article .tag.es {
    background: DarkViolet; }
  article .tag.hb {
    background: DimGray; }
  article .tag.dm {
    background: DarkSlateGray; }
  article .tag.wp {
    background: GhostWhite;
    color: black !important;
    border-color: Gray;
    border: solid 1.2px LightGray; }
  article .tag.ap {
    background: #C00000; }
  article .tag.wb {
    background: #CC3399; }
  article .tag.fr {
    background: #003300; }
  article .tag.pf {
    background: #FF0000; }
  article .tag.ld {
    background: #CCCC00; }

footer {
  font-size: 70%; }
  footer p {
    margin: 0; }

/* Index pages ****************************************************************/
body.index article {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  font-family: 'Patrick Hand SC', sans-serif; }
  body.index article > h1 {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0; }
  body.index article > ul {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    width: 100%;
    padding: 0;
    margin: 0; }
    body.index article > ul li {
      display: block;
      background-color: white;
      border: 2px solid #e6e7e9;
      padding: 1em;
      margin: 1em;
      box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2);
      transition: box-shadow .5s ease; }
      body.index article > ul li:hover {
        box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3); }
  body.index article > section {
    display: block;
    background-color: white;
    border: 2px solid #e6e7e9;
    padding: 1em;
    margin: 1em;
    box-shadow: 15px 28px 25px -18px rgba(0, 0, 0, 0.2);
    transition: box-shadow .5s ease; }
    body.index article > section:hover {
      box-shadow: 2px 8px 4px -6px rgba(0, 0, 0, 0.3); }
    body.index article > section h2 {
      margin-top: 0; }
    body.index article > section ul {
      display: flex;
      flex-direction: column;
      padding: 0;
      margin: 0; }
      body.index article > section ul li {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 0.5em 0;
        border-top: 1px dashed #d9d9d8; }
        body.index article > section ul li .link-main {
          display: inline-block;
          max-width: 12em;
          line-height: 1.5em; }
        body.index article > section ul li .link-categories {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: flex-end;
          align-items: flex-start; }

/* D&D-style pages ************************************************************/
body.dnd {
  background: url(dnd/background.png) repeat-y;
  background-size: 100%;
  /* This bit mostly taken from the defaults of org-mode export */ }
  body.dnd article {
    font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", "Warnock Pro", serif;
    font-size: 12pt; }
    body.dnd article table {
      border-spacing: 0; }
      body.dnd article table, body.dnd article table tr:last-child td, body.dnd article table tr:last-child th {
        border-bottom: solid 1px black; }
      body.dnd article table, body.dnd article table tr:first-child td, body.dnd article table tr:first-child th {
        border-top: solid 1px black; }
      body.dnd article table td, body.dnd article table th {
        padding: 6px; }
    body.dnd article p {
      text-align: justify; }
    body.dnd article .title {
      text-align: center; }
    body.dnd article .todo {
      color: red; }
    body.dnd article .done {
      color: green; }
    body.dnd article .timestamp {
      color: #bebebe; }
    body.dnd article .timestamp-kwd {
      color: #5f9ea0; }
    body.dnd article .right {
      margin-left: auto;
      margin-right: 0px;
      text-align: right; }
    body.dnd article .left {
      margin-left: 0px;
      margin-right: auto;
      text-align: left; }
    body.dnd article .center {
      margin-left: auto;
      margin-right: auto;
      text-align: center; }
    body.dnd article p.verse {
      margin-left: 3%; }
    body.dnd article pre {
      border: 1pt solid #AEBDCC;
      background-color: #F3F5F7;
      padding: 5pt;
      font-size: 90%;
      overflow: auto; }
    body.dnd article table {
      border-collapse: collapse; }
    body.dnd article td, body.dnd article th {
      vertical-align: top; }
    body.dnd article th.right {
      text-align: center; }
    body.dnd article th.left {
      text-align: center; }
    body.dnd article th.center {
      text-align: center; }
    body.dnd article td.right {
      text-align: right; }
    body.dnd article td.left {
      text-align: left; }
    body.dnd article td.center {
      text-align: center; }
    body.dnd article dt {
      font-weight: bold; }
    body.dnd article div.figure {
      padding: 0.5em; }
    body.dnd article div.figure p {
      text-align: center; }
    body.dnd article div.inlinetask {
      padding: 10px;
      border: 2px solid gray;
      margin: 10px;
      background: #ffffcc; }
    body.dnd article textarea {
      overflow-x: auto; }
    body.dnd article .linenr {
      font-size: smaller; }
    body.dnd article .code-highlighted {
      background-color: #ffff00; }
    body.dnd article .org-info-js_info-navigation {
      border-style: none; }
    body.dnd article #org-info-js_console-label {
      font-size: 10px;
      font-weight: bold;
      white-space: nowrap; }
    body.dnd article .org-info-js_search-highlight {
      background-color: #ffff00;
      color: #000000;
      font-weight: bold; }

/* D&D-style pages ************************************************************/
body.pdf {
  position: absolute;
  width: 100%;
  height: 100%;
  bottom: 0;
  display: flex;
  flex-direction: column; }
  body.pdf article {
    flex-grow: 2;
    padding: 0; }
    body.pdf article p {
      float: left;
      margin: 0.25em -100% 0.25em 0.25em; }
    body.pdf article h1 {
      text-align: center;
      margin: 0.25em 0; }
    body.pdf article iframe {
      width: 100%;
      height: 100%; }