/* Fonts */
/* TODO: Maybe I should serve these, instead of using a cdn */
@import url('https://cdn.jsdelivr.net/npm/@typopro/web-iosevka@3.7.5/TypoPRO-Iosevka.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500;700&display=swap');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');

:root {
  --font: 'Noto Serif', serif;
  --font-color: #545759;
  --light-font-color: #808486;
  --muted-color: #c7c7c7;

  --monospace-font: 'TypoPRO Iosevka Term', monospace;
  --src-block-bg-color: #f3f2ee;
  --inline-src-block-bg-color: #f8f7f3;

  --header-font: 'Roboto Slab', serif;
  --header-color: #2b2e30;
  --post-title-font-size: 2em;
  --post-first-header-font-size: 1.7em;
  --post-second-header-font-size: 1.5em;
  --post-third-header-font-size: 1.3em;
  --post-fourth-header-font-size: 1.2em;

  --link-color: #5f9b65;
  --link-hover-color: #808486;
}

body {
  font-family: var(--font);
  color: var(--font-color);
  margin: 0;
  padding: 0;
}

header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #f8f7f3;
  padding: 1rem 3.5rem;
  display: block;
  box-shadow: 3px 3px 2px #aaaaaa;
  display: flex;
  justify-content: space-around;
}

header > .site-title {
    font-weight: bold;
}

section {
  margin-top: 3.5rem !important;
  margin: 3rem auto;
  max-width: 46rem;
  line-height: 1.5;
  padding: 0 10px;
}

footer {
  max-width: 46rem;
  margin-right: auto;
  margin-left: auto;
}

footer > p {
  text-align: left;
}

footer > p > span {
   float: right;
}

h1, h2, h3, h4, h5, h6, h7 {
  font-family: var(--header-font);
  line-height: 1.35;
  color: var(--header-color);
}

h1 {
  font-size: var(--post-title-font-size);
  border-bottom: 1.7px dashed var(--light-font-color);
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--post-first-header-font-size);
  border-bottom: 1.5px dashed var(--light-font-color);
}

h3 {
  font-size: var(--post-second-header-font-size);
  border-bottom: 1px dashed var(--light-font-color);
}

h4 {
  font-size: var(--post-third-header-font-size);
}

h5 {
  font-size: var(--post-fourth-header-font-size);
}

h1:hover, h2:hover, h3:hover, h4:hover {
  color: var(--light-font-color);
  cursor: pointer;
}

blockquote {
  border-left: 1.4px solid var(--light-font-color);
  margin: 0;
  margin-left: 1rem;
  padding: 0 0 0 20px;
  font-style: italic;
}

a {
  color: var(--link-color);
  text-decoration: none;
}

a:hover {
  color: var(--link-hover-color);
  text-decoration-color: var(--link-hover-color);
}

.org-dl dt {
    font-weight: bold;
    font-style: italic;
}

/* Inline codes */
code {
  font-family: var(--monospace-font);
  /* font-size: 0.7em; */
  background: var(--inline-src-block-bg-color) !important;
  border-radius: 0.4rem !important;
  padding: 0.24rem !important;
}

/*
 * Make code blocks in paragraphs inline.
 * hljs turns them into a fully-fledged code block. We don't want that.
 */
code {
  display: inline !important;
}

hr {
  border: 0;
  background: var(--muted-color);
  height: 1px;
}

/* Code blocks */
.src, .example {
  /* font-size: 0.85em; */
  font-family: var(--monospace-font);
  background: var(--src-block-bg-color);
  padding: .4rem .7rem !important;
  border-radius: 0.3rem !important;
  display: block !important;
}

.post-information {
  display: flex;
  justify-content: space-between;
}

.post-information ul {
  padding: 0;
  margin: 0;
}

.post-information ul:nth-child(2) {
  text-align: right;
}

.post-information li {
  list-style-type: none;
  position: relative;
}

/* Center images and fit into the page */
.centered {
  margin: 20px auto 20px;
  display: block;
  max-width: 100%;
}

.clear {
  color: inherit;
  text-decoration: inherit;
}