body {
  font-family: 'Noto Serif', serif;
  text-align: justify;
  max-width: 700px;
  margin: 50px;
  margin-top: 0px;
  margin-right: auto;
  margin-left: auto;
  background-color: #0C0B1E;
  color: #C7C7C7;
}

h1, h2, h3, h4 {
  font-family: 'Noto Sans', sans-serif;
  text-align: left;
  margin-top: 40px;
}

a {
  color: #7AA6FF;
}

a:visited {
  color: #B694E0;
}

a:hover {
  color: #A3D8FF;
}

nav a,
nav a:visited {
  margin-left: 20px;
  font-size: small;
  text-decoration: none;
  color: #8B89B5;
}

nav a:hover {
  color: #7AA6FF;
}

nav {
  float: right;
}

header {
  clear: right;
  padding-top: 40px;
  margin-bottom: 50px;
}

header h1 {
  font-size: 40px;
  display: inline;
}

header h1 a img {
  vertical-align: -14px;
  margin-bottom: 0px;
  margin-right: -6px;
  box-shadow: none;
}

header h4 {
  display: inline;
  font-size: small;
}

details {
  cursor: se-resize;
}

details[open] {
  cursor: default;
}

img {
  box-shadow: 2px 2px 15px rgba(0,0,0,0.5);
  margin-top: 10px;
  margin-bottom: 20px;
}

img.icon {
  box-shadow: unset;
  margin-top: 0;
  margin-bottom: 0;
}

.post-list {
  margin-left: 0;
  padding-left: 0;
  list-style: none;
}

.post-meta {
  font-size: small;
  color: #8B89B5;
}

.post-list li h2 {
  margin-top: 5px;
}

pre,
code {
  font-size: 15px;
  margin: 0;
  padding: 0;
  background-color: #1A1935;
}

/* Used for key bindings */
i {
  background-color: #2D2A55;
  border-color: #5B5499;
  border-style: solid;
  border-width: 1px;
  border-radius: 2px;
  padding: 0px 5px 1px 5px;
  box-shadow: 1px 1px 3px rgba(0,0,0,0.3);
}

code {
  padding: 2px 5px;
}

pre {
  padding: 12px 15px;
  overflow-x: auto;
}

pre > code {
  border: 0;
  padding-right: 0;
  padding-left: 0;
}

figure {
  margin: 0;
  padding: 0;
}

blockquote {
  font-style: italic;
}

/* black color theme for code highlight */
.highlight {
  background: #1A1935;
  color: #C7C7C7;
}
.highlight .c { color: #5B5499; font-style: italic; }
.highlight .err { color: #C7C7C7; background-color: #dc322f; }
.highlight .k { color: #7AA6FF; font-weight: bold; }
.highlight .o { color: #6c71c4; }
.highlight .cm { color: #5B5499; font-style: italic; }
.highlight .cp { color: #7AA6FF; font-weight: bold; }
.highlight .c1 { color: #5B5499; font-style: italic; }
.highlight .cs { color: #5B5499; font-weight: bold; font-style: italic; }
.highlight .gd { color: #C7C7C7; background-color: #d33682; }
.highlight .ge { font-style: italic; }
.highlight .gr { color: #C7C7C7; background-color: #dc322f; }
.highlight .gh { color: #8B89B5; }
.highlight .gi { color: #859900; background-color: #1A1935; }
.highlight .go { color: #C7C7C7; }
.highlight .gp { color: #8B89B5; }
.highlight .gs { font-weight: bold; }
.highlight .gu { color: #8B89B5; }
.highlight .gt { color: #C7C7C7; background-color: #dc322f; }
.highlight .kc { color: #7AA6FF; font-weight: bold; }
.highlight .kd { color: #7AA6FF; font-weight: bold; }
.highlight .kn { color: #6c71c4; font-weight: bold; }
.highlight .kp { color: #7AA6FF; font-weight: bold; }
.highlight .kr { color: #7AA6FF; font-weight: bold; }
.highlight .kt { color: #B694E0; font-weight: bold; }
.highlight .m { color: #d33682; }
.highlight .s { color: #2aa198; }
.highlight .n { color: #C7C7C7; }
.highlight .na { color: #B694E0; }
.highlight .nb { color: #7AA6FF; }
.highlight .nc { color: #B694E0; font-weight: bold; }
.highlight .no { color: #b58900; }
.highlight .ni { color: #8B89B5; }
.highlight .ne { color: #7AA6FF; font-weight: bold; }
.highlight .nf { color: #7AA6FF; font-weight: bold; }
.highlight .nl { color: #859900; }
.highlight .nn { color: #B694E0; }
.highlight .nt { color: #7AA6FF; font-weight: bold; }
.highlight .nv { color: #b58900; }
.highlight .ow { color: #6c71c4; font-weight: bold; }
.highlight .w { color: #C7C7C7; }
.highlight .mf { color: #d33682; }
.highlight .mh { color: #d33682; }
.highlight .mi { color: #d33682; }
.highlight .mo { color: #d33682; }
.highlight .sb { color: #2aa198; }
.highlight .sc { color: #2aa198; }
.highlight .sd { color: #2aa198; }
.highlight .s2 { color: #2aa198; }
.highlight .se { color: #2aa198; }
.highlight .sh { color: #2aa198; }
.highlight .si { color: #2aa198; }
.highlight .sx { color: #2aa198; }
.highlight .sr { color: #859900; }
.highlight .s1 { color: #2aa198; }
.highlight .ss { color: #d33682; }
.highlight .bp { color: #8B89B5; }
.highlight .vc { color: #b58900; }
.highlight .vg { color: #b58900; }
.highlight .vi { color: #b58900; }
.highlight .il { color: #d33682; }