@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-Regular.otf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-Italic.otf');
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-Bold.otf');
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-Black.otf');
  font-weight: 900;
  font-style: normal;
}

@font-face {
  font-family: Poppins;
  src: url('/static/fonts/Poppins-LightItalic.otf');
  font-weight: 300;
  font-style: italic;
}

body {
  font-family: Poppins, sans-serif;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
}

h1 {
  font-weight: 900;
}

h1 small {
  font-weight: 700;
  opacity: 0.6;
}

h2 {
  font-weight: 700;
}

h1:has(+ h2),
h2:has(+ h3) {
  margin-bottom: 0;
}

h1 + h2,
h2 + h3 {
  margin-top: 0;
  font-weight: 500;
  opacity: 0.6;
}

.site-header {
  display: flex;
  padding: 0.5em;
  background: lightgrey;
  column-gap: 0.6rem;
}

.site-header a {
  display: flex;
  color: grey;
}

.site-header a.primary {
  color: black;
}

.site-header a:hover {
  color: black;
}

.site-header .header-logo-wrapper img {
  height: 1.5em;
  width: 1.5em;
  margin-right: 0.3em;
}

/*
 * Setting the maximum width for posts. This should
 * give you not much more than 75 letters per line;
 * the reason it's given as 40 is that 'em' is
 * literally the width of the letter 'M', which is
 * significantly wider than any of the other letters.
 * So if we write 'MMMM...' only 40 letters will fit,
 * but for ordinary English this is getting us to 70
 * or thereabouts.
 */
.main {
  max-width: 40em;
  margin: auto;
  min-height: calc(100vh - 16em);
  padding: 1em;
}

./*
  * Styling for images. We centre-align them, make sure
  * they fit in the screen, and see that they don't
  * spill out of the post container.
  */
.main p:has(img) {
  text-align: center;
}

.main img {
  max-width: min(40em, 100vw);
  max-height: 100vh;
  margin: 1em auto;
}

.post-list {
  padding: 0;
  list-style-type: none;
}

.site-footer {
  font-weight: 300;
  font-style: italic;
  max-width: 60em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 4em;
  padding: 1em;
  text-align: center;
}