:root {
  /* Pure CSS variables */
  --container-width: 800px;
  --serif-font-stack: "Freight Text", "Georgia", "Charter", serif;
  --sans-font-stack: "Helvetica Neue", "Helvetica", "Source Sans Pro", sans-serif;
  --mono-font-stack: "Source Code Pro", "Consolas", monospace;
  --font-stack: var(--mono-font-stack);
  /* Fallbacks should be provided, of course */
}

.has-serif-font {
  --font-stack: var(--serif-font-stack);
}

.has-sans-font {
  --font-stack: var(--sans-font-stack);
}

body {
  max-width: 800px;
  max-width: var(--container-width);
  padding: 0 0.5rem;
  margin-right: auto;
  margin-left: auto;
  line-height: 1.5;
  font-family: monospace;
  font-family: var(--font-stack);
}

img {
  max-width: 100%;
  height: auto;
}

figure {
  margin-left: auto;
  margin-right: auto;
}

figcaption {
  text-align: center;
  font-size: 0.75rem;
}

pre {
  overflow: auto;
}

nav ul {
  list-style-type: none;
  padding-left: 0;
}

footer nav {
  font-size: smaller;
}

hr {
  border: none;
  border-top: 1px solid #ccc;
  margin: 1.5rem 0 1.5rem 0;
}

ul {
  padding-inline-start: 1rem;
}

ol {
  padding-inline-start: 1.75rem;
}

.inline-block {
  display: inline-block;
}

.center-text {
  text-align: center;
}


/* IMAGE WIDTH STYLES */
/* ================== */

/* Style at will... */
/* figure.kg-width-full { } */
/* figure.kg-width-wide { } */
/*
PROTIP:
Try something like as a starting point for centering images that are wider than their parent container's width:

.full-bleed {
	  width: 100vw;
	  position: relative;
	  left: 50%;
	  right: 50%;
	  margin-left: -50vw;
	  margin-right: -50vw;
	}

For large images that aren't full width, but are larger than their parent, just replace 100vw with your max width (say, 1000px), and then replace the -50vw margins with -{NUM}px / 2 (in this case, -500px). You can see a version of this techinique in action in the stylesheet of my MNML Ghost theme:
https://github.com/curiositry/mnml-ghost-theme
*/

/* IMAGE GALLERY STYLES */
/* ==================== */

/* Style at will... */
/* .kg-gallery-card { } */
/* .kg-gallery-container { } */
/* .kg-gallery-row { } */
/* .kg-gallery-image { } */

/*
Docs can be found here: http://themes.ghost.org/docs/ghost-editor#section-gallery-card

The implementation that Ghost recommends is pretty robust, with one caveat: it needs a few lines of JavaScrpt. Example can be found here:
https://github.com/TryGhost/Casper/pull/475/files#diff-ce5e030f2e2e2a50f18199464f07ea70
*/


/* BOOKMARK CARD STYLES */
/* ==================== */

/* This is a lean implementation. Style to taste, or delete if you don’t use this modern stuff. (Note: Ghost will throw warnings on theme activation if you fully remove these classes.) */

/* Required for validation */
.kg-bookmark-card {}

.kg-bookmark-container {
  display: flex;
  flex-wrap: wrap;
  text-decoration: none;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  background-color: #eee;
  text-align: center;
}

.kg-bookmark-content {
  padding: 1rem;
  order: 2;
  width: 100%;
}

.kg-bookmark-title {
  font-weight: 600;
}

.kg-bookmark-description,
.kg-bookmark-metadata {
  margin-top: 1rem;
  filter: grayscale(75%);
}

.kg-bookmark-thumbnail {
  width: 100%;
}

.kg-bookmark-icon {
  width: 22px;
  height: 22px;
  margin-right: 8px;
  vertical-align: bottom;
}

.kg-bookmark-publisher {
  display: inline-block;
}

.kg-bookmark-author:after {
  content: " • ";
}

/* END BOOKMARK CARD STYLES */

/* RESPONSIVE VIDEO EMBED STYLES */
/* ============================= */

/* This is lightest-weight implementation of responsive video embeds that I have been able to come up with. To cover all edge cases, a JavaScript solution would be needed, but this works in most modern browsers. */

iframe[src*="youtube.com"],
iframe[src*="youtube-nocookie.com"],
iframe[src*="vimeo.com"] {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* END RESPONSIVE EMBED CARD STYLES */



/* MEMBERSHIP STYLES */
/* ================= */

/* Most membership stuff is handled by the Ghost portal. These are used for the optin form 
   at the bottom of each post. Feel free to remove these barebones membership styles if you 
   don't plan on enabling memberships & subscriptions for your blog. */

.notification-area {
  display: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  background-color: #82ea02;
  padding: 1rem;
  margin-top: 2rem;
  box-sizing: border-box;
}

.message-success,
.message-error {
  display: none;
  margin-top: 1rem;
}

.message-error,
[data-members-error] {
  color: red;
}

.message-success {
  color: green;
}

.loading button span,
.error button span,
.success button span {
  display: none;
}

.loading button::after {
  content: "Loading...";
}

.error button::after {
  content: "Error :(";
}

.success button::after {
  content: "Success :)";
}

.success~.message-success,
.invalid~.message-error,
.error~.message-error {
  display: block;
}

/* END MEMBERSHIP STYLES */

@media all and (min-width: 800px) {

  ol,
  ul {
    /* Hanging punctuation */
    padding-inline-start: 0;
  }

  nav li,
  nav ul {
    display: inline;
  }

  nav li {
    margin: 0.5rem;
  }

  .form-group {
    display: inline;
  }

  .site-footer__attribution>div {
    display: inline-block;
    margin: 0.5rem;
  }

}

@media (prefers-color-scheme: dark) {

  body {
    background: #333;
    color: #fdfdfd;
  }

  a {
    color: lightblue;
  }

  .kg-bookmark-container {
    background-color: #444;
  }

}

@media print {
  p {
    text-indent: 0 !important;
  }
}