@import "./reset.css";
@import "./fonts.css";

:root {
  --white: #f1f1f1;
  --grey: #b3b3b3;
  --dark-grey: #424242;
  --black: #141414;

  --sidebar-width: 16rem;
  --body-font: "Atkinson HyperlegibleNext", sans-serif;
  --header-font: charter, serif;
}

:root {
  height: 100%;
}

body {
  height: 100%;
  margin: 0;
  background-color: var(--white);
  color: var(--black);
  display: flex;
  flex-direction: column;

  font-size: 18px;
  font-family: var(--body-font);
}

header {
  padding: .5rem 1rem;
  border-block-end: 1px solid var(--grey);
  display: flex;

  font-family: 'Cooper Hewitt', sans-serif;

  a {
    text-decoration: none;
  }

  .logo {
    font-size: 2rem;
    font-weight: 500;
    width: var(--sidebar-width);
  }

  nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;

    a {
      color: var(--black);
      font-weight: 300;
      letter-spacing: 0.45px;

      &:hover {
        text-decoration: underline;
      }

      &[aria-current="true"] {
        font-weight: 500;
        letter-spacing: unset;
      }
    }
  }
}

.content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

footer {
  border-block-start: 1px solid var(--grey);
  font-size: 0.75rem;
  color: var(--dark-grey);
  padding: 0.25rem;
  text-align: right;
}

.book {
  flex: 1;
  min-height: 0;

  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;

  nav {
    border-right: 1px solid var(--grey);
    padding: 1rem 1rem;

    font-family: 'Cooper Hewitt', sans-serif;
    overflow: auto;

    a {
      text-decoration: none;
      color: var(--black);
      font-weight: 300;
      letter-spacing: 0.45px;

      &:hover {
        text-decoration: underline;
      }

      &[aria-current="page"] {
        font-weight: 500;
        letter-spacing: unset;
      }
    }

    ol {
      margin: 0;
      padding: 0;
      list-style-type: none;

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


  main {
    padding: 2rem 3rem;

    .title {
      font-size: 2rem;
      margin-block-start: 0;
    }

    p,
    li {
      max-width: 65ch;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
      font-family: var(--header-font);
    }

    overflow: auto;
  }
}

.landing {
  margin: auto;

  p {
    max-width: 65ch;
  }
}