:root {
  --color-primary: #da1d50; /* brand color */
  --grid-maxWidth: 90rem; /* max container width 1080px */
  --header-background-color: #F4F5F7;
}

body.dark { /* night mode */
      --bg-color: #000;
      --bg-secondary-color: #131316;
      --font-color: #f5f5f5;
      --color-grey: #ccc;
      --color-darkGrey: #777;
      --header-background-color: #2a2a2a;
    }

body {
  font-family: var(--font-family-mono);
  transition: background-color 0.3s ease, color 0.3s ease; /* zachte overgang dag/nacht modus  */
}
header {
  padding:2em;
  background-color: var(--header-background-color);
}
pre {
  border: 1px solid var(--color-darkGrey);
  white-space: pre-wrap;       /* Since CSS 2.1 */
  white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
  white-space: -pre-wrap;      /* Opera 4-6 */
  white-space: -o-pre-wrap;    /* Opera 7 */
  word-wrap: break-word;       /* Internet Explorer 5.5+ */
}
.header-img {
    margin-left:auto;
    margin-right: auto;
    border: 8px solid #FFF;
    width: 80%;
    align-items: center;
justify-content: center;
}
h1 {
  font-weight: bold;
  letter-spacing: 2px;
}
p.published {
  font-style: oblique;
  color: var(--color-grey);
}