:root {
    --white-color: #fff;
    --black-color: #000;
    --gray-color: #ddd;
    --lightgray-color: #eee;
    --darkgray-color: #666;
    --red-color: #e41a1c;
    --blue-color: #377eb8;
}

body {
  max-width: 800px;
  margin: auto;
  padding: 1em;
  line-height: 1.5em;
}

/* text urls */

a {
    text-decoration: none;
    color: var(--red-color);
}
a:hover {
    color: var(--red-color);
    font-weight: bold;
}

mark {
    background: var(--white-color);
    font-weight: bold;
}


/* header and footer areas */
.menu { padding: 0; }
.menu li { display: inline-block; }
.menu a {
    color: var(--black-color);
    text-decoration: none;
    margin-right: 20px;
}
.menu, .article-meta, footer { text-align: left; }
.title {
    font-size: 1.1em;
    line-height: 1.1em;
}
footer a { text-decoration: none; }
footer p { color: var(--darkgray-color); }
hr {
  border-style: dashed;
  color: var(--gray-color);
}
.date {color: var(--darkgray-color);}

/* code */
pre {
  border: 1px solid var(--gray-color);
  box-shadow: 5px 5px 5px var(--gray-color);
  padding: 1em;
  overflow-x: auto;
}
code { background: var(--lightgray-color); }
pre code { background: none; }

/* misc elements */
img, iframe, video { max-width: 100%; }
blockquote {
  background: var(--lightgray-color);
  border-left: 5px solid var(--gray-color);
  padding: 3px 1em 3px;
}

table {
  margin: auto;
  border-top: 1px solid var(--darkgray-color);
  border-bottom: 1px solid var(--darkgray-color);
}
table thead th { border-bottom: 1px solid var(--gray-color); }
th, td { padding: 5px; }
thead, tfoot, tr:nth-child(even) { background: var(--lightgray-color); }

/* content lists */
.clist {
    list-style: none;
    padding: 0;
}
.clist p {margin: 0;}
.clist p.title {
    font-weight: bold;
}
.clist p.date {
    color: var(--darkgray-color);
}
.clist li {
    margin-bottom: 20px;
}
.clist a {
    color: var(--black-color);
    text-decoration: none;
}
.clist a:hover {
    color: var(--red-color);
}

/* aside lists */
.alist {
    list-style: none;
    padding: 0;
}
.alist ul li {margin: 0;}
.alist a {
    color: var(--black-color);
    text-decoration: none;
}
.alist a:hover {
    color: var(--red-color);
}