/* Aesthetica (pandoc HTML5 template)
 * designer:     soimort
 * revision:     1.1
 * last updated: 2016-05-20
 * last adapted: 2016-07-15
 */

/* General */

body {
  font-family: /* font stack (normal) */
  'URW Palladio L', 'Palladio URW', 'TeX Gyre Pagella',
  Palatino, 'Palatino Linotype',  'Book Antiqua', serif,
  'HanaMinA', 'Adobe Song Std', 'Source Han Sans',
  'WenQuanYi Micro Hei', 'WenQuanYi Zen Hei',
  'Meiryo', 'Microsoft JhengHei', 'Microsoft YaHei';

  font-size: 16px;
  cursor: default;
  overflow-x: hidden;
  background-color: black; /* $A */
  color: white; /* $T */

  background-image: url('https://i0.wp.com/dl.dropboxusercontent.com/s/5j4ijec5b4nhtjv/background-kandinsky.jpg');
}

a {
  text-decoration: none;
  font-weight: bold;
  color: white; /* $T */
}

code, kbd {
  font-family: /* font stack (monospaced) */
  'Inconsolata', Consolas, 'Ubuntu Mono',
  'Latin Modern Mono', 'Anonymous Pro', 'FreeMono', monospace;

}
kbd {
  margin: 1px;
  padding: 4px 8px;
  border-radius: 6px;
  box-shadow: 2px 2px 2px dimgray;
  background-color: black; /* $B */
  color: ivory; /* $F */
}



/* Pseudo element: selection */

::selection {
  background-color: white; /* $T */
  color: black; /* $A */
}
::-moz-selection {
  background-color: white; /* $T */
  color: black; /* $A */
}

::selection:window-inactive {
  background-color: gainsboro; /* $G */
}

/* Pseudo element: scrollbar (WebKit-only) */

::-webkit-scrollbar {
  width: 8px;
  background-color: black; /* $A */
}

::-webkit-scrollbar-track {
  background-color: black; /* $A */
}

::-webkit-scrollbar-thumb {
  min-height: 64px;
  border-radius: 4px;
  background-color: white; /* $T */
}

::-webkit-scrollbar-thumb:window-inactive {
  background-color: gainsboro; /* $G */
}



header {
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 0;
  text-align: center;
  color: ivory; /* $F */
}
header a {
  color: ivory; /* $F */
}

header .panel {
  position: fixed;
  z-index: 128;
  width: 100%;
  height: 48px;
  left: 0;
  bottom: 0;
  background-color: black; /* $B */
  opacity: .75;
}

header .title {
  position: fixed;
  z-index: 256;
  width: 32%;
  width: calc(38.2% - 48px - 12px);
  height: 48px;
  left: 48px;
  bottom: 0;
  margin: 0;
  text-align: right;
  font-size: 16px;
  line-height: 48px;
}

header .subtitle {
  position: fixed;
  z-index: 256;
  width: 55%;
  width: calc(61.8% - 48px - 12px);
  height: 48px;
  right: 48px;
  bottom: 0;
  margin: 0;
  text-align: left;
  font-size: 16px;
  line-height: 48px;
}
header .subtitle p {
  margin: 0;
}

header .pagination a {
  position: fixed;
  z-index: 512;
  width: 24px;
  height: 24px;
  bottom: 0;
  padding: 12px;
  font-size: 24px;
  opacity: .5;
  transition: .5s;
}
header .pagination a:hover {
  opacity: 1;
}
header .pagination a.prev {
  left: 0;
}
header .pagination a.next {
  right: 0;
}

header .pagination .jump a {
  position: relative;
  bottom: 8px;
  font-size: 20px;
}
header .pagination .jump a.current-page {
  opacity: 1;
}

div.result {
  position: fixed;
  left: 0;
  bottom: 48px;
  margin: 0 12px;
  text-align: left;
  font-size: 12px;
  line-height: 24px;
}

div.site-info {
  position: fixed;
  right: 0;
  bottom: 48px;
  margin: 0 12px;
  text-align: right;
  font-size: 12px;
  line-height: 24px;
}

aside {
  position: absolute;
  height: 48px;
  left: 0;
  top: 0;
}

aside #logo img {
  position: relative;
  height: 44px;
  left: 8px;
  top: 4px;
  border-radius: 50%;
}

aside nav {
  display: inline;
  position: relative;
  bottom: 16px;
  padding: 16px;
  font-size: 16px;
}

aside nav a, aside #intro {
  padding: 16px;
}
aside nav a:hover {
  border-style: solid;
  border-width: 0 0 2px 0;
}

main {
  width: 100%;
  left: 0;
  top: 0;
  margin-top: 48px;
}

article {
  margin-bottom: 48px;
}

article .graphics {
  margin: 0;
  text-align: center;
}
article .graphics img {
  max-width: 100%;
  border-radius: 8px;
}
article .graphics figcaption {
  width: 60%;
  margin-left: 20%;
  font-size: .8em;
}

article .text {
  width: 40%;
  margin-left: 30%;
  padding: 1em 0;
  font-size: .9em;
  line-height: 1.2em;
}

article .tag {
  font-size: .8em;
  opacity: .5;
  transition: .5s;
}
article .tag:hover {
  opacity: 1;
}

article .sidebar-l {
  position: absolute;
  width: 25%;
  width: calc(30% - 1em - 1em);
  left: 0;
  padding-top: 2em;
  text-align: right;
  font-size: 1em;
}

article .sidebar-l hr {
  height: 1px;
  margin-left: 50%;
  border: 0;
  background-image: linear-gradient(to right, black, white); /* A&T */
}

article .sidebar-r {
  position: absolute;
  width: 25%;
  width: calc(30% - 1em - 1em);
  right: 0;
  padding-top: 2em;
  text-align: left;
  font-size: 1em;
}

article footer {
  width: 40%;
  margin-left: 30%;
  padding: 1em 0;
  font-size: .8em;
  text-align: center;
}

article footer hr {
  margin-bottom: 1em;
  height: 1px;
  border: 0;
  background-image: linear-gradient(to right, black, white, black); /* A&T */
}

@media (max-width: 1023px) {
  article .text,
  article footer {
    width: 60%;
    margin-left: 20%;
  }

  article .sidebar-l,
  article .sidebar-r {
    width: 15%;
    width: calc(20% - 1em - 1em);
  }
}