/* Variables */
:root {
  --outer-bg: #f0f0f0;
  --main-bg: #c9cfea;
  --main-fg: #0f0f0f;
  --faint: #666666;
}

/* Basic layout */
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
  margin: 0; padding:0;
  background: var(--main-bg);
  color: var(--main-fg);
}

a {
  color: var(--main-fg);

  &:hover {
    color: var(--faint);
  }
}

#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  text-align: center;

  > div {
    padding: 0.25em 1.5em;
  }

  #header {
    background: var(--outer-bg);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 0.5em;

    a {
      text-decoration: none;

      &.current {
        color: inherit;
      }
    }

    #header-left a {
      font-weight: bold;
    }

    #header-right {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;

      a {
        &.active {
          text-decoration: underline;
          text-decoration-thickness: 2px;
          text-decoration-color: var(--faint);
        }
      }
    }
  }

  #breadcrumbs {
    display: block;
    width: 100%;
    text-align: left;
    color: var(--faint);
    font-size: 0.75em;

    a {
      text-decoration: none;
      color: var(--faint);
    }
  }


  #content-wrapper {
    flex-grow: 1;
  }

  #content {
    text-align: left;
    max-width: 55em;
    margin: 0 auto;
  }

  #footer {
    background: var(--outer-bg);
    color: var(--faint);
  }
}

/* Fix how svgs look when dark reader is active */
[data-darkreader-scheme="dark"] .org-svg {
  filter: invert(1) brightness(2);
}

/* Make org-mode footnotes section a little nicer */
.footdef {
  display: flex;

  .footpara {
    margin: 0 0 0.3rem 0.3rem;
  }
}