/* Base fonts and syntax highlighting */
@import url('https://fonts.googleapis.com/css?family=Source+Code+Pro:400,700');
@import url('syntax-highlighting.css');

/* Theme variables */
:root {
  --main-color: white;
  --bg-color: black;
  --text-color: #DDD;
  --pop-color: white;
  --alt-color: #2ed573;
  --light-alt-color: rgba(46, 213, 115);
}

/* Base */
body {
  background-color: var(--bg-color);
  color: var(--main-color);
  font-family: 'Roboto Mono', monospace;
  margin: 0 auto;
  width: 90%;
  max-width: 700px;
  line-height: 2em;
  font-size: 0.9em;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0px;
  margin-top: 22px;
  font-weight: bold;
  color: var(--pop-color);
  font-size: 1em;
}

p, ul, ol {
  font-size: 1em;
  color: var(--text-color);
}

a {
  text-decoration: underline;
  color: var(--alt-color);
}

a:hover {
  color: var(--bg-color);
  background-color: var(--alt-color);
}

.primary-text { color: var(--main-color); }

@media only screen and (max-device-width: 500px) {
  * { font-size: 12px !important; }
}

b, strong { color: var(--main-color); }

.invert {
  color: var(--bg-color);
  background-color: var(--main-color);
  padding-left: 3px;
  padding-right: 3px;
  padding-top: 1px;
  padding-bottom: 1px;
}

/* Small font override */
body.large {
  line-height: 2em;
  font-size: 1em;
}

/* Layout */
.container { margin-right: auto; margin-left: auto; }
p { word-wrap: break-word; word-break: break-word; white-space: pre-wrap; }
footer {
  color: var(--text-color);
  border-top: dashed 1px rgba(219, 219, 219, 0.9);
  margin: 20px auto 15px;
  padding-top: 10px;
  text-align: right;
}
header { margin-top: 25px; margin-bottom: 10px; }
header p { text-align: left; margin: 0; }
footer { margin-bottom: 20px; }
img.home_header { width: 100%; margin-top: 5%; margin-bottom: 5%; }
img.detail_header { width: 100%; }

/* Lists */
main ul {
  list-style: disc;
  list-style-position: outside;
  padding-left: 1.5em;
  margin: 0.5em 0 0.7em 0;
}

main ul ul {
  list-style: circle;
  padding-left: 1.5em;
}

main ol {
  list-style: decimal;
  list-style-position: inside;
  padding-left: 0;
  margin: 0.5em 0 0.7em 0;
}

/* Keep ordered list markers inside bordered containers */
blockquote ol {
  list-style-position: inside;
  padding-left: 0;
}

/* Navigation */
.menu {
  border-top: dashed 1px rgba(219, 219, 219, 0.9);
  border-bottom: dashed 1px rgba(219, 219, 219, 0.9);
  margin-bottom: 25px;
}

.menu ul {
  margin-top: 12px;
  margin-bottom: 12px;
  padding-left: 0px;
  list-style-type: none;
  text-align: right;
}

.menu ul li { display: inline; margin-left: 10px; }
.menu ul li a { text-decoration: none; color: var(--text-color); }
.menu ul li a:hover { text-decoration: none; color: var(--bg-color); background-color: var(--main-color); }
.menu ul li.page_title { text-align: left; margin-left: 10px; float: left; font-weight: bold; color: var(--main-color); }

/* Error pages */
div.error_box { margin: 100px; }
div.error_box h1 { font-size: 2em; }

*::selection { background-color: var(--light-alt-color); color: black; }

button:disabled.btn.btn-outline { display: none; }

a.active.btn.btn-outline { color: var(--bg-color); background-color: var(--alt-color); }

.home-paginator .btn.btn-outline { margin: 0 0.5em; }

img { max-width: 100%; }

pre {
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(219, 219, 219, 0.25);
  border-radius: 6px;
  padding: 0.8em;
  margin: 1em 0;
}

/* Blockquote hint boxes */
blockquote {
  position: relative;
  margin: 0.5em 0;
  padding: 0.8em 1em 0.8em 2.2em;
  color: var(--text-color);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(219, 219, 219, 0.25);
  border-left: 4px solid var(--alt-color);
  border-radius: 6px;
}

blockquote::before {
  content: "❝";
  position: absolute;
  left: 0.9em;
  top: 0.7em;
  font-weight: bold;
  color: var(--alt-color);
}

blockquote p { margin: 0.4em 0; }
blockquote ul, blockquote ol { margin: 0.4em 0 0.2em 0; }
blockquote a:hover { color: var(--alt-color); background-color: initial; }

/* Page structure */
body { display: flex; min-height: 100vh; flex-direction: column; }
main { width: 100%; flex-grow: 1; display: flex; flex-direction: column; }
footer { margin: 0.4em 0 20px 0; }

.post-tags { display: flex; flex-wrap: wrap; }
.post-tags a { padding: 0 20px 0 0; }
.post-tags a:hover { color: var(--alt-color); background-color: initial; }

.contact-me { display: flex; justify-content: end; }
.contact-me a { display: flex; margin: 0 0 0 20px; align-items: center; text-decoration: none; }
.contact-me a img { top: 0.5px; width: 14px; height: 14px; position: relative; }

.home-paginator { display: flex; justify-content: end; }
.flex-spacer { width: 100%; flex-grow: 1; }

/* Inline code */
code {
  font-family: 'Source Code Pro', monospace;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(219, 219, 219, 0.25);
  border-radius: 4px;
  padding: 0 4px;
  color: var(--main-color);
}

pre code {
  display: block;
  padding: 0;
  background: transparent;
  border: none;
}

/* Heading anchors (#) */
main .h-anchor {
  display: inline-block;
  text-decoration: none;
  margin-right: 0.4em;
  opacity: 0.5;
  color: var(--text-color);
}

main h1:hover .h-anchor,
main h2:hover .h-anchor,
main h3:hover .h-anchor,
main h4:hover .h-anchor,
main h5:hover .h-anchor,
main h6:hover .h-anchor,
main .h-anchor:focus {
  opacity: 1;
  color: var(--alt-color);
}