* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    /*
      TODO: https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
      read, because I have no clue what this does.
      
      CSS border-box is the most popular choice for setting box-sizing.
      It guarantees that the content box shrinks to make space for
      the padding and borders. Therefore, if you set your element
      width to 200 pixels, border-box makes sure that the content,
      padding, and borders fit in this number
   */
}

a {
    text-decoration: none;
    color: dodgerblue;
}

a:hover {
    text-decoration: underline;
}

#layout {
    padding: 0;
}

.top-nav {
    display: inline;
}

.top-nav nav {
    display: inline;
}

.top-nav ul {
    display: inline;
}

.top-header {
    background-color: #a6e22e;
}

.nav-list  {
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.nav-item  {
    display: inline;
}

.nav-lnk {
    margin: 0;
    padding: 0;

    letter-spacing: 0.05em;
    font-size: 115%;
}

.tag-list {
    margin-top: 1em;
    padding: 0;
    list-style: none;
    text-align: left;
    width: 100%;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    /* background-color: darkgreen; */
}

.content {
    margin-top: 10px;
    padding: 2em 1em 0;
    max-width: 1800px;
}

.post {
    padding-bottom: 2em;
}

.post-title {
    color: #222;
    margin-bottom: 0.2em;
    text-align: left;
    display: inline;
}

.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
}

.post-meta {
    color: #000;
    font-size: 80%;
    margin: 0;
    display: inline;
}

.footer {
    padding: 1em 0;
}

.footer a {
    color: #ccc;
}

.ftr-item {
   list-style: none;
   display: inline;
   margin: 0 1.5em 0;
}