/* body { */
/*   font-family: sans-serif; */
/*   background-color: #fffaf7; */
/* } */
/* main { */
/*   max-width: 38rem; */
/*   /\* padding: 1rem; *\/ */
/*   margin: 0; */
/* } */
/* header { */
/*   margin-bottom: 2rem; */
/* } */
/* h1 { */
/*   margin-bottom: .5rem; */
/* } */
/* time { */
/*   color: #888; */
/* } */

/* body { */
/*     margin: 40px */
/* 	    auto; */
/*     max-width: 650px; */
/*     font-size: 18px; */
/*     color: #444; */
/* } */

body > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

nav > ul {
    list-style-type: none;
    padding: 0;
    margin:0;
    display: flex;
}
nav > ul > li > a {
    display: block;
    padding: 0.5em;
    text-decoration: none;
}
footer {
    border-top: 1px solid grey;
    font-size: 75%;
    padding-left:1em;
}

body > header >  h1 { 
    padding: 0;
    margin: 0;
    box-sizing:border-box;
}

/* page */

/* html { */
/*   font-size: medium; */
/* } */

/* body { */
/*   background-color: #fffff6; */
/*   color: #330; */
/*   font-family: georgia, times, serif; */
/*   margin: 2rem auto 8rem; */
/*   max-width: 40em; */
/*   padding: 0 2em; */
/*   width: auto; */
/*   font-size: 1rem; */
/*   line-height: 1.4; */
/* } */

/* a { */
/*   color: #1e6b8c; */
/*   font-size: 1em; */
/*   text-decoration: none; */
/*   transition-delay: 0.1s; */
/*   transition-duration: 0.3s; */
/*   transition-property: color, background-color; */
/*   transition-timing-function: linear; */
/* } */

/* a:visited { */
/*   color: #6f32ad; */
/*   font-size: 1em; */
/* } */

/* a:hover { */
/*   background: #f0f0ff; */
/*   font-size: 1em; */
/*   text-decoration: underline; */
/* } */

/* a:active { */
/*   background-color: #427fed; */
/*   color: #fffff6; */
/*   color: white; */
/*   font-size: 1em; */
/* } */

/* h1, */
/* h2, */
/* h3, */
/* h4, */
/* h5, */
/* h6 { */
/*   color: #703820; */
/*   font-weight: bold; */
/*   line-height: 1.2; */
/*   margin-bottom: 1em; */
/*   margin-top: 2em; */
/* } */

/* h1 { */
/*   font-size: 2.2em; */
/*   text-align: center; */
/* } */

/* h2 { */
/*   font-size: 1.8em; */
/*   border-bottom: solid 0.1rem #703820; */
/* } */

/* h3 { */
/*   font-size: 1.5em; */
/* } */

/* h4 { */
/*   font-size: 1.3em; */
/*   text-decoration: underline; */
/* } */

/* h5 { */
/*   font-size: 1.2em; */
/*   font-style: italic; */
/* } */

/* h6 { */
/*   font-size: 1.1em; */
/*   margin-bottom: 0.5rem; */
/*   color: #330; */
/* } */

/* pre, */
/* code, */
/* xmp { */
/*   font-family: courier; */
/*   font-size: 1.1rem; */
/*   line-height: 1.4; */
/*   white-space: pre-wrap; */
/* } */

/* img { */
/*   margin: 2em auto; */
/*   padding: 1em; */
/*   outline: solid 1px #ccc; */
/*   max-width: 90%; */
/*   } */

/* https://perfectmotherfuckingwebsite.com */
body {
    max-width: 650px;
    margin: 40px auto;
    padding: 0 10px;
    font: 18px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    color:#444
}

h1, h2, h3 {
    line-height:1.2
}


@media (prefers-color-scheme: dark) {
    body {
        color: #c9d1d9;
        background:#0d1117
    }

    a:link {
        color:#58a6ff
    }

    a:visited {
        color: #8e96f0
    }
}
html {
  font-size: medium;
}

/* https://codepen.io/dredmorbius/pen/KpMqqB */

body {
  background-color: #fffff6;
  color: #330;
  font-family: georgia, times, serif;
  margin: 2rem auto 8rem;
  max-width: 40em;
  padding: 0 2em;
  width: auto;
  font-size: 1rem;
  line-height: 1.4;
}

a {
  color: #1e6b8c;
  font-size: 1em;
  text-decoration: none;
  transition-delay: 0.1s;
  transition-duration: 0.3s;
  transition-property: color, background-color;
  transition-timing-function: linear;
}

a:visited {
  color: #6f32ad;
  font-size: 1em;
}

a:hover {
  background: #f0f0ff;
  font-size: 1em;
  text-decoration: underline;
}

a:active {
  background-color: #427fed;
  color: #fffff6;
  color: white;
  font-size: 1em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #703820;
  font-weight: bold;
  line-height: 1.2;
  margin-bottom: 1em;
  margin-top: 2em;
}

h1 {
  font-size: 2.2em;
  text-align: center;
}

h2 {
  font-size: 1.8em;
  border-bottom: solid 0.1rem #703820;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.3em;
  text-decoration: underline;
}

h5 {
  font-size: 1.2em;
  font-style: italic;
}

h6 {
  font-size: 1.1em;
  margin-bottom: 0.5rem;
  color: #330;
}

pre,
code,
xmp {
  font-family: courier;
  font-size: 1.1rem;
  line-height: 1.4;
  white-space: pre-wrap;
}

img {
  margin: 2em auto;
  padding: 1em;
  outline: solid 1px #ccc;
  max-width: 90%;
  }