:root {
    --link-color: #0000EE;
    --visited-link-color: #551A8B;
    --width: 60rem; /* todo rename to main-width?? */
    --aside-width: 20rem;
}


html {
  font-family: "Source Serif Pro", serif;

  /* otherwise scrollbar impacts the content */
  overflow-y: scroll;
}

/* 80 = --width + --aside-width */
@media (min-width: 80rem) {
    body {
        width: var(--width);
        /* auto margin centers the content. not sure if it's the right way to do it... */
        margin-left:  auto;
        margin-right: auto;

        /* debugging */
        /* color: red; */
    }

    /* mm, otherwise it might not work properly (at least on OSX chrome) */
    a.headerlink {
        margin-left: -1em;
    }
}

/*
   Used to be bold, but visually a bit too spammy. I wouldn't mind 'slightly' bold perhaps at some point..
 */
a:link {
    /* default is underline... dunno, feels pretty distracting */
    text-decoration: none;
}


#settings {
  z-index: -1;
}

#topnav {
  /* just to separate from the content */
  border-bottom: 0.1rem solid;
  font-size: 2em;

  display: flex;
  flex-wrap: wrap; /* default is nowrap; makes it responsive */
  column-gap: 0.3em;
}
#topnav > a {
  color: black; /* default links are blue */
  text-transform: uppercase;
}
#topnav > a:hover {
  color: blue; /* hmm, not sure about this.. a bit misleading, usually unvisited are blue */
}

#bottomfooter {
  border-top: 0.1rem solid;
  padding-top: 1em;
  font-size: 0.75em;

  display: flex;
  flex-wrap: wrap;
  column-gap: 0.5em;
}

/* now, post-specific stuff */

time {
    font-family: "Lucida Console", Monaco, monospace;
}

.post-tag + .post-tag {
    margin-left: 0.5em;
}

.post-tag {
  font-size: 0.95em;
  font-family: "Lucida Console", Monaco, monospace;

  /* https://stackoverflow.com/a/12362315/706389
     somewhat hacky way to prevent breaking tags on hyphens...
   */
  white-space: nowrap;
}

.tag-active {
  color: #a51;
  font-weight: bold;
}

.tag-inactive {
  color: black;
}

#post-title h1 {
  /* default margin is too large */
  margin-bottom: 0em;
}

#post-title .summary {
  /* ???  */
  -webkit-margin-before:0em;
  -webkit-margin-after:0em;

  color: #a9a9a9;
  font-size: 1.5em;
}

/*
  TODO move these styles to post.css?
  they kind of make sense for meta stuff too though...
*/

h1 {
  font-size: 1.7rem;
}

h2 {
  font-size: 1.4rem;
}


img {
    max-width: 100%;
    max-height: 100%;
}


/* 80 = --width + --aside-width */
@media (min-width: 80rem) {
  /* when wide enough, display as a side note */
  article {
    --sidenote-display  : inline;

    /* if wide enough, display at a fixed position on the right */
    position: relative;
    --sidenote-position : absolute;
    --sidenote-left     : var(--width);

    /* set width, otherwise they wrap at the word boundary */
    --sidenote-width    : var(--aside-width);
  }

  .before-aside {
    /* hacky way of forcing aside to display on the same line....
     * without it, it displays on the same line as the last
     * (can see on multiline paragraphs). probably can be fixed in a better way?
     * e.g. can reorder aside and the preceding element.. but this is a bit misleading then
     */
    display: inline-block;
  }
  li .before-aside {
    /* for li, that breaks the list marker alignment...  I guess that's a relatively small price to pay for now... */
    display: initial;
  }
}
@media (max-width: 80rem) {
  article {
    --sidenote-display  : block;
  }
}
article aside.sidenote {
  /* todo highlight sidenotes maybe? */
  /* to match with corresponding <p> */
  /* TODO is this really necessary?? */
  display : var(--sidenote-display);

  /* makes it work in conjucion with position: relative in article */
  position: var(--sidenote-position);
  left    : var(--sidenote-left);
  width   : var(--sidenote-width);

  padding-left : 2em; /* for horizontal padding between text and note */
  padding-right: 1em; /* so it's not too close to the screen edge */
  box-sizing: border-box; /* without it doesn't wrap around?? */

  font-size: 0.8em;
  color: gray;
}

/* TODO not sure if article should contain footer and comments?? */

a.headerlink {
    text-decoration: none;
    color: lightgrey;
}
h1:hover > a.headerlink,
h2:hover > a.headerlink,
h3:hover > a.headerlink,
h4:hover > a.headerlink,
h5:hover > a.headerlink,
h6:hover > a.headerlink {
    color: #c60f0f
}
/*
a.headerlink:hover {
    background-color: #c60f0f;
    color: white;
}
*/
/* */

/* highlight inline code produced by org-mode */
/* TODO support for ipynb as well? */
code.inline {
    color: green;
}
a code.inline {
    /* TODO not sure about this one... */
    text-decoration: underline;
}
/* end */


details summary {
    cursor: pointer;
}


/* compile-org sets these  */
a.link-down:after {
    content: "⤵";
}

a.link-up:after {
    content: "⤴";
}
/* end */


#post-footer time {
  color: #555;
}

#isso-root .avatar {
  display: none;
}

.debug-usage {
    animation:debug 0.8s infinite;
}

@keyframes debug{
    0%{     background: black; color: #f00;    }
    49%{    background: black; color: transparent; }
    50%{    background: black; color: transparent; }
    99%{    background: black; color: transparent;  }
    100%{   background: black; color: #f00;    }
}