@import "reset.css";
@import "index.css";
@import "blog.css";
@import "post.css";
@import "bookshelf.css";
@import "music.css";
@import "photography.css";
@import "recipes.css";
@import "recipe.css";

:root {
  --foreground: black;
  --background: rgb(245, 243, 235);
  --purple: rgb(170, 142, 214);
  --red: rgb(165, 32, 21);
  --mint: rgb(240, 240, 232);
  --dark-green: rgb(142, 148, 20);
  --theme-main: var(--dark-green);
  --breathing-room: 2rem;
  font-size: 18px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: rgb(245, 243, 235);
    --background: rgb(43, 43, 43);
    --theme-main: var(--purple);
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  accent-color: var(--theme-main);

  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-display: swap;
  font-weight: 400;
  line-height: 1.725;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 48rem;
  margin-right: auto;
  margin-left: auto;
  padding-right: 2rem;
  padding-left: 2rem;
}

body > nav {
  position: sticky;
  top: 0px;
  background: var(--background);
  backdrop-filter: blur(3px);
  z-index: 1;

  padding: var(--breathing-room);
  font: 0.9em system-ui;
  letter-spacing: 0.02em;
  font-size: 0.8rem;
  display: flex;
}

body > nav .nav-sans-home {
  display: flex;
}

body > nav ul {
  display: flex;
  align-items: flex-end;
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 2rem;
  margin-inline-start: calc(var(--breathing-room) / -2);
}

body > nav li.active a {
  color: var(--theme-main);
}

body > nav a {
  text-decoration: none;
  font-weight: bold;

  color: inherit;
  display: block;

  display: inline-flex;
  flex-direction: column;
  align-items: center;

  padding-inline-start: calc(var(--breathing-room) / 2);
  padding-inline-end: calc(var(--breathing-room) / 2);
}

body > nav a::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  height: 0;
  overflow: hidden;
  user-select: none;
  pointer-events: none;
  font-weight: 800;
  display: block;
}

body > nav svg {
  width: 2em;
  height: auto;
}

body > main {
  flex: 1 0 0;
  padding: var(--breathing-room);
}

main > * + * {
  margin-block-start: 2em;
}

main p {
  line-height: 1.6;
}

main a {
  text-decoration: none;
  color: var(--theme-main);
  font-weight: bold;
}

body > footer {
  padding: var(--breathing-room) 0;
  color: #666;
  text-align: center;
  font-size: 11px;
}

h3 {
  margin-block: 2rem;
  font-size: 2rem;
  font-family: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
  font-weight: 400;
}

@media (max-width: 900px) {
  :root {
    font-size: 14px;
  }

  body > nav {
    background-color: var(--background);
    z-index: 1;
    padding: var(--breathing-room) 0;
  }

  body > nav .nav-sans-home {
    margin: 0;
    overflow-x: auto;
    gap: 1em;
  }

  body > nav ul {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
    margin-inline-start: 0;
  }

  body > nav ul li {
    flex-shrink: 0;
  }

  body > nav ul > * + * {
    margin-inline-start: 1em;
  }

  body > nav li.active a {
    font-weight: bolder;
  }

  body > nav a {
    padding: 0;
    font-weight: bold;
  }

  body > main {
    padding: 0;
  }
}