/* https://personal.sron.nl/~pault/ */
:root {
   --white: #fff;
   --black: #000;
   --blue: #47a;
   --cyan: #6ce;
   --green: #283;
   --yellow: #cb4;
   --red: #e67;
   --purple: #a37;
   --grey: #bbb;

   --contrast-yellow: #da3;
   --contrast-red: #b56;
   --contrast-blue: #048;

   --pale-blue: #bce;
   --pale-cyan: #cef;
   --pale-green: #cda;
   --pale-yellow: #eeb;
   --pale-red: #fcc;
   --pale-grey: #ddd;

   --dark-blue: #225;
   --dark-cyan: #255;
   --dark-green: #252;
   --dark-yellow: #663;
   --dark-red: #633;
   --dark-grey: #555;

   --backgroundColor: var(--white);
   --textColor: var(--black);
   --linkColor: var(--blue);
   --footerColor: var(--grey);
   --blockquoteColor: var(--grey);
   --codeColor: var(--pale-yellow);
   --codeBackgroundColor: var(--contrast-blue);
   --tagForegroundColor: var(--white);
   --tagBackgroundColor: var(--blue);
   --metaTextColor: var(--black);

   --mainFontFamily: 'Helvetica Neue', arial, sans-serif;
   --monospaceFontFamily: monospace;
}

body {
   font-size: 1rem;
   margin: 0;
   padding: 0;
   background-color: var(--backgroundColor);
   font-family: var(--mainFontFamily);
   color: var(--textColor);
}

.post-content img {
   max-height: 85%;
   max-width: 75%;
   height: auto;
   display: block;
   margin: 0 auto;
}
 
a, a:visited {
   color: var(--linkColor);
   text-decoration: none;
   border-bottom-color: var(--linkColor);
   border-bottom-width: 1px;
   border-bottom-style: solid;
}

header h1 {
   display: block;
   font-size: 2rem;
   font-weight: bold;
   line-height: 2.4rem;
   margin: 1rem 0 1rem 0;
}

main h1 {
   display: block;
   font-size: 2rem;
   font-weight: bold;
   line-height: 2.4rem;
   margin: 1rem 0 1rem 0;
}

main h2 {
   display: block;
   font-size: 1.5rem;
   font-weight: bold;
   line-height: 2rem;
   margin: 0.85rem 0 0.85rem 0;
}

nav {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
   padding: 0;
}

nav a {
   text-wrap: nowrap;
   margin-bottom: 0.5rem;
   margin-right: 1rem;
}

main blockquote {
   display: block;
   margin-block: 0;
   margin-inline: 0;
   padding-block-start: 0.5rem;
   padding-block-end: 0.5rem;
   padding-inline-start: 1.5rem;
   padding-inline-end: 1.5rem;
   border-left-style: solid;
   border-left-width: 3px;
   border-left-color: var(--blockquoteColor);
}

main pre code {
   font-family: var(--monospaceFontFamily);
   font-size: 1rem;
   line-height: 1.2rem;
   display: block;
   box-sizing: border-box;
   width: 100%;
   padding-block-start: 1rem;
   padding-block-end: 1rem;
   padding-inline-start: 1.5rem;
   padding-inline-end: 1.5rem;
   color: var(--codeColor);
   background-color: var(--codeBackgroundColor);
   overflow-x: scroll;
}

.post-content {
   margin: 0.5rem 0 1.5rem 0;
}

.post-meta {
   font-size: 0.8rem;
   line-height: 1.2rem;
   color: var(--metaTextColor);
   margin: 0 0 0.5rem 0;
}

.post-meta .tag {
   text-wrap: nowrap;
   margin-right: 0.6rem; 
   background-color: var(--tagBackgroundColor);
   color: var(--tagForegroundColor);
   padding: 0.4rem;
   border-radius: 0.3rem;
}

.post-item p {
   margin-bottom: 2pt;
}

header, main, footer {
   margin: 10pt 2% 30pt 2%;
   max-width: 96%;
}

footer {
   color: var(--footerColor);
   font-size: 0.8rem;
   line-height: 1.2rem;
}

footer a, footer a:visited {
   color: var(--footerColor);
   border-bottom-color: var(--footerColor);
}

@media screen and (min-width: 1024px) {
   header, main, footer {
      margin-left: auto;
      margin-right: auto;
      max-width: 960px;
   }
}

@supports (font: -apple-system-body) {
   html {
      font: -apple-system-body;
   }
}