/* Stolen from http://evenbettermotherfucking.website */
body {
    margin: 5% auto;
    background: #f2f2f2;
    color: #444444;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    font-size: 20px;
    line-height: 1.8;
    text-shadow: 0 1px 0 #ffffff;
    width: 380px;
}

header {
  display: flex;
  justify-content: space-between; /* avatar left, nav group right */
  align-items: center;
  padding: 0 0 0.75rem 0; /* space below header */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1); /* subtle bottom border */
}

/* The nav holds Home, Workshop, and the GitHub icon */
header nav {
  display: flex;
  gap: 1.5rem;              /* even spacing between items */
  align-items: center;      /* vertically align text and svg */
}

/* Links and the GitHub anchor */
header nav a {
  text-decoration: none;    /* no underline by default */
  color: inherit;           /* inherit text color from header/theme */
  font-weight: 500;
  display: flex;
  align-items: center;      /* keeps text and svg aligned */
}

/* Hover effect */
header nav a:hover {
  text-decoration: underline;
}

/* Avatar image */
header img {
  display: block;           /* removes inline spacing quirks */
  border-radius: 50%;       /* optional: makes avatar circular */
}

code {
    background: white;
}

a {
    /* border-bottom: 1px solid #444444; */
    color: #444444;
    text-decoration: underline;
}

a:hover {
    border-bottom: 0;
}

time {
    color: #444444;
    font-size: .8em;
    padding: 0 .1em 0 .1em;
}

footer {
    font-size: 12px;
}

/* tablet-ish size */
@media only screen and (min-width: 421px) {
    body {
        font-size: 18px;
        width: 600px;
    }
}

/* desktop size */
@media only screen and (min-width: 768px) {
    body {
        font-size: 16px;
        width: 800px;
    }
}