/* Variables */
:root {
  --outer-bg: #ffffff;
  --main-bg: #dee0ea;
  --main-fg: #000000;
  --faint: #666666;
}

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

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;

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

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

      a.active {
        text-decoration: double;
      }
    }
  }

  #content {
    flex-grow: 1;
    text-align: left;
    max-width: 65em;
    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;
  }
}