@font-face {
    font-family:"dejavu-serif";
    src: url("dejavu-fonts/ttf/DejaVuSerif.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family:"dejavu-mono";
    src: url("dejavu-fonts/ttf/DejaVuSansMono.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family:"dejavu-sans";
    src: url("dejavu-fonts/ttf/DejaVuSans.ttf") /* TTF file for CSS3 browsers */
}
@font-face {
    font-family:"dejavu-serif-bold";
    src: url("dejavu-fonts/ttf/DejaVuSerif-Bold.ttf") /* TTF file for CSS3 browsers */
}

@font-face {
    font-family:"dejavu-serif-italic";
    src: url("dejavu-fonts/ttf/DejaVuSerif-Italic.ttf") /* TTF file for CSS3 browsers */
}
 

.header { margin-bottom: 1.5em; padding-bottom: 0.5em; min-height: 1.1em; border-bottom: 2px solid #E01F3C; }
.header a:hover, .footer a:hover { border: none; }
.header:after { content: ''; clear: both; display: block; }
.logo { float: left; margin-top: 0.3em;}
.logo a {font-family: dejavu-mono;  color: #E01F3C; font-size: 1.4em; }
.logo a:hover { color: red; }
.menu { float: right; padding: 0; margin: 0; color: #E01F3C;}
.menu li { display: inline-block; padding: 0.4em 0 0.4em 2em; }
.menu a { font-family: dejavu-serif;  font-weight: 100; }
.main { min-height: 18em; padding-bottom: 1em; border-bottom: 2px solid #E01F3C; }
.main a { border-bottom: 2px solid grey; }
.main p, .main ul { margin-top: 0; margin-bottom: 0.5em; }
.article { line-height: 180%; margin-bottom: 4em; font-size: 0.9em; }
.articleinfo { color: #AAA; margin-bottom: 1em; font-size: 0.9em; }
.articletitle{ margin-bottom: 0; }
.footer { padding: 1em 0 2em; font-size: .75em; color: #bdc3c7; }
.footer .left { float: left; }
.footer .right { float: right; }

* { margin: 0; }
div {
    text-align: justify;
    line-height: 150%;
}
html {font-family: dejavu-serif; /*height: 100%;*/  font-size: 1.0em; }
body {font-family: dejavu-serif; margin: 0 auto; padding: 3em 3em 1em 3em;  max-width: 44em; line-height: 1.5em; color: #bdc3c7;  background-color: #18191B; }
a { color: #bdc3c7; text-decoration: none; transition: color .2s, background .2s, border .2s; }
a:hover  { border-bottom: 2px solid white; color: white; }
img { max-width: 100%; }

h1 {font-family: dejavu-serif; font-size: 2em; font-weight: 300;  margin-bottom: .5em; line-height: 1.25em; color: #bdc3c7; }
h2 {font-family: dejavu-serif;   font-size: 1.95em; font-weight: 300; margin-bottom: .5em; line-height: 1.25em; }
h3 {font-family: dejavu-serif;   font-size: 1.4em; font-weight: 400; margin-bottom: .5em; line-height: 1.25em; }
h4 {font-family: dejavu-serif;   font-size: 1.2em; font-weight: 600; margin-bottom: .5em; line-height: 1.25em; }
blockquote {font-family: dejavu-mono; background: none; border-left: 3px solid #777; color: #777; padding: 0 0 0 10px; margin-left: 1.2em; }
hr { margin: 2em 0; height: 2px; background-color: grey; border: none; }
pre { background-color:#bdc3c7 ; margin-bottom: 0.7em; line-height: 1.5em; }

@media (max-width: 640px) { 
  body { padding: 1.25em; }
  .header { padding-bottom: 0; }
  .logo { float:none; } 
  .menu { float:none; margin-top: 2em; } 
  .menu li { display: block; padding: 0.2em 0; margin: 0.2em; border-top: 1px solid #D1D1D1; } 
}