/* Don't forget to update the hash in html to flush cache */
/* General theme */

/* Many values are set explicitly to avoid relying on browser defaults */
body {
  max-width:80ch;
  margin:40px auto;
  padding:0 2ch;
  font-family: serif;
  font-size: 16px;
  line-height: 1.375;
}
h1 {
  display: block;
  font-size: 2em;
  margin-top: 0.67em;
  margin-bottom: 0.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  line-height:1.2;
}
h2 {
  display: block;
  font-size: 1.5em;
  margin-top: 0.83em;
  margin-bottom: 0.83em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  line-height:1.2;
}
h3 {
  display: block;
  font-size: 1.17em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
  line-height:1.2;
}
h4 {
  display: block;
  margin-top: 1.33em;
  margin-bottom: 1.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
h5 {
  display: block;
  font-size: .83em;
  margin-top: 1.67em;
  margin-bottom: 1.67em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
h6 {
  display: block;
  font-size: .67em;
  margin-top: 2.33em;
  margin-bottom: 2.33em;
  margin-left: 0;
  margin-right: 0;
  font-weight: bold;
}
p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}
  @media (prefers-color-scheme: dark) {
    body {
      color:#c9d1d9;
      background:#0d1117
    }
    a:link {
      color:#58a6ff
    }
    a:visited {
      color:#8e96f0
    }
  }

/* Custom styles */

.ghost {
  opacity: 0.5;
}
.profile-photo {
  margin: 0.5rem;
  float: right;
  /* Calculated to be as high as (one <h1>      ) + (line of <p>) + (3 lines of <p>) - margin
  *                               2*1.2 + 2*0.67  + 1*1.375   + 1 + 3*1.375          - 1
  */
  height: 10.615rem;
  width: calc(1.66 * 10.615rem);
}
.clear {
  clear: both;
}

#bnfgh {
  float: left;
  min-width: 300px;
}

/* if too slim to fit profile picture:
                        (body margin) + 14*(h1 text size) + picture size (with margin) + margin */
@media (max-width: calc( 4ch +          14*2ch            + 1.66*10.615rem + 1rem                   + 0ch)) {
  .profile-photo {
    float: none;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
  h1{
    text-align: center;
  }
  .links{
    text-align: center;
  }
  /* … */
}