.posts article.post {
    margin-bottom: 1em;
}

.posts .post-date {
    margin-top: -.8rem;
}

.container.sidebar-sticky {
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.sidebar .cool-maze-devices {
    width: 100%;
    text-align: center;
    margin-bottom: 0.8em;
}

.sidebar .cool-maze-devices svg {
    max-width: 12em;
    max-height: 8rem;
}

.homepage .sidebar .cool-maze-devices svg {
    max-width: 15em;
    max-height: 10rem;
}

.sidebar-about h1 {
    font-family: 'Comic Mono', 'Courier New', Courier;
}

@media (min-width: 48em) {
    .sidebar {
        width: 19rem;
    }

    .sidebar .cool-maze-devices {
        margin-bottom: 3em;
    }

    .sidebar .cool-maze-devices svg {
        max-width: 15em;
        max-height: 10rem;
    }
}

@media (min-width: 58em) {
}

.posts .post h1 {
    font-size: 1.6rem;
}

.content {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (max-width: 48em) {
    .content {
        padding-top: 1rem;
    }
}

.end-of-article {
    display: grid;
    place-items: center;
    margin-top: 2em;
}

.end-of-article img {
    width: 1.5em;
}

/* From https://cdn.jsdelivr.net/npm/comic-mono@0.0.1/index.css */
@font-face {
    font-family: Comic Mono;
    font-weight: normal;
    src: url(./ComicMono.ttf);
}

@font-face {
    font-family: Comic Mono;
    font-weight: bold;
    src: url(./ComicMono-Bold.ttf);
}

/* For YouTube videos, because Hugo doesn't add convenient class names */
div[style^=position][style*=overflow][style*=hidden] {
    /* By default the video is too close to the next paragraph. Adding vertical space. */
    margin-bottom: 2rem;
}

/* For the 2 side-by-side screenshots in post 001 */
/* Remove borders, remove cell grey backgrounds */
table {
    border: none;
}
th, td {
    border: none;
}
tbody tr:nth-child(odd) td, tbody tr:nth-child(odd) th {
    background-color: transparent;
}

/* For tags */

.article-tags {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: 0.9em;
  color: #555;
}

.tag-list-inline {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline;
}

.tag-list-inline li {
  display: inline-block;
  margin-right: 8px;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 8px;
}

.tag-list-inline li a {
  text-decoration: none;
  color: #555;
}

.tag-list-inline li a:hover{
  color: #000;
}

.tag-list-inline li:has(a:hover) {
  border: 1px solid #555;
}

/*
 * Specific articles.
 */

/* For article 003 */

img[src*="003/android-cool-maze-homepage"],
img[src*="003/ios-cool-maze-homepage"] {
    border-radius: 0;
}

/* For article 004 */

img[src*="004/qr-"] {
    min-width: 8rem;
}

img[src*="004/Birthday"] {
    min-width: 10rem;
    width: 12rem;
    max-width: 16rem;
}

img[src*="004/size-qr-"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* For article 007 */

.post-007 th,
.post-007 td
{
    text-align: center;
}

img[src*="007/timeline-1.png"] {
    margin-bottom: -1rem;
}

img[src*="007/shared-resource.jpg"],
img[src*="007/shared-resource-resized.jpg"] {
    display: inline-block;
    width: 12rem;
    margin-bottom: -0.6rem;
}

img[src*="007/browser-"] {
    margin-bottom: 0;
}

/* For article 015 */

.post-015 th,
.post-015 td
{
    text-align: center;
}

.better {
    background-color: #DFD;
    font-weight: bold;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.worse {
    background-color: #FDD;
    font-weight: bold;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

/* For article 016 */

img[src*="016/monitoring.svg"] {
    margin-top: 2rem;
    margin-bottom: 2rem;
}