/* VARIABLES */

:root {
  --foreground: #ebdbb2;
  --background: #282828;
  --blue: #83a598;
}

/* LAYOUT */

body {
  background: #f2f2f2;
  max-width: 650px;
  max-width: 80ch;
  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: var(--foreground);
  background-color: var(--background);
}
a {
  color: var(--blue);
}
img {
  max-width: 100%;
}
h1,
h2,
h3 {
  line-height: 1.2;
}

.content {
  margin-bottom: 2rem;
}

/* NAVIGATION */

.site-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.site-nav a {
  display: block;
  padding: 0.25rem;
}

.logo {
  display: flex;
  flex-wrap: inherit;
  font-weight: bold;
  padding-left: 0;
  font-size: 24px;
}

.main-menu {
  display: flex;
  list-style: none;
  word-break: keep-all;
  overflow-x: auto;
  white-space: nowrap;
  font-size: 16px;
}

/* LISTS */

.post-snippet {
  margin-bottom: 1rem;
}

.post-snippet h3 {
  margin-bottom: 0.25rem;
}