/* fonts */
body {
  font-family: "Merriweather", "Arial", serif; }

h1, h2, h3, h4, h5, h6 {
  font-family: 'Lato', sans-serif; }

/* basics */
body {
  max-width: 50rem;
  margin: 0 auto;
  line-height: 1.8em;
  padding: 4em 1em; }

code {
  font-size: 1.2em;
  padding: 2px 4px; }

code.hljs {
  font-size: 1.1em;
  line-height: 1.3em; }

a {
  text-decoration: none; }

pre {
  padding: 1em; }

/* colors */
body {
  color: #555;
  background: #fdfdfd; }

a {
  color: #247BA0; }

a:hover {
  color: #DE6B48; }

h1, h2, strong {
  color: #333; }

header nav ul li:first-child a {
  color: #DE6B48; }

pre {
  background: #fafafa; }

/* header and nav */
header nav a {
  text-decoration: none; }

header nav ul {
  padding: 0;
  margin: 0; }

header nav ul li {
  display: inline;
  margin: 0em 1em 0em 0em; }

header nav li:first-child {
  font-size: 2em; }

.rwd-break {
  display: none; }

/* article */
article {
  margin: 3em 0em 0em 0em; }

article header h1 {
  font-size: 1.3em;
  margin: 0em 0em .5em 0em; }

article header p {
  margin: 0em;
  font-size: 0.8em;
  font-style: italic; }

article section h2 {
  font-size: 1.1em; }

article section img {
  max-width: 100%; }

article.preview section p {
  margin: 0em; }

article.project section p {
  margin: 0em; }

/* footer */
footer {
  padding: 2em 0 0.5em;
  text-align: center; }

footer p {
  font-size: 0.6em;
  margin: 0.3em 0 0.3em;
  line-height: 1.4em; }

/* images and video */
img.left {
  float: left;
  margin: 0em 2em 1em 0em; }

img.center {
  display: block;
  margin: 0 auto; }

figure video {
  max-width: 100%; }

/* identity */
pre {
  border-left: 2px solid #247BA0;
  border-bottom: 1px solid #e1e1e1; }

@media only screen and (min-width: 321px) {
  .rwd-break {
    display: none; } }

@media only screen and (max-width: 320px) {
  .rwd-break {
    display: block; } }

@media only screen and (min-device-width: 768px) {
  .rwd-break {
    display: none; } }

@media (prefers-color-scheme: dark) {
  body {
    background: #272727;
    color: #d4d4d4; }
  h1, h2, strong {
    color: #eee; }
  a {
    color: #89c9e5; }
  a:hover {
    color: #ce4d25; }
  header nav ul li:first-child a {
    color: #ce4d25; }
  pre {
    background: #282c34;
    border-left: 2px solid #DE6B48;
    border-bottom: 1px solid #696b71; } }