:root {
    --link-color: #0000EE;
    --visited-link-color: #551A8B;
    --width: 80rem;
    --aside-width: 20rem;
}


html {
  font-size: 100%;
  font-family: "Source Serif Pro", serif;
}

/* TODO why 80? is this --width + --aside-width? looks like coinsidence though...  */
@media (min-width: 80rem) {
    body {
        /* TODO how to choose good width?? */
        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;
    }

    /* TODO not sure about this vvv */
    /*
    header {
        width: calc(var(--width) - var(--aside-width));
    }
    */
}

/*
   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;
}

a:hover {
/*      text-decoration: overline; */
     /* color: yellow; */

    /* mm, this is nice, but annoying because it infrates and may impact content around the link */
    /* font-weight: bold; */
}


/* not sure about this one.. */
header {
   border-bottom: 0.1rem solid;
   padding: 1rem 0;
}

a.fat {
    font-weight: bold;
    color: black;
    text-transform: uppercase;
}

/* START nav bar stuff */
nav {
    /* TODO what's that for?? seems to work without it...*/
    overflow: auto;

    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

nav {
  font-size: 1.8rem;
}

nav .nav-left {
  float: left;
}

nav .nav-right {
  float: right;
}

/* END nav bar stuff */

footer {
  margin-top: 1.5rem;
  padding: 1rem 0;
  border-top: 0.1rem solid #000;
  font-size: 0.75rem;
  text-align: right;
}


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;
}

section.post-title h1 {
  margin-bottom: 0em;
}

section.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;
}

article .footer time {
  /* font-size: 1.4rem; */
  color: #555;
}


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


article .content {
    position: relative;
}


@media (min-width: 80rem) {
    article .content {
        --sn-position   : absolute;
        --sn-right      : 0;
        --sn-width      : var(--aside-width);
        --sn-display    : inline;
    }

    .before-aside {
        /* hacky way of forcing aside to display on the same line.... */
        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 .content {
        --sn-display    : block;
    }
}

article .content > * {
    padding-right: var(--sn-width);
}

/* TODO highlight sidenotes maybe? */
article .content aside.sidenote {
    /* makes it work in conjucion with position: relative in article */
    position: var(--sn-position);
    right   : var(--sn-right);

    width   : var(--sn-width);

    /* TODO maybe decorate somehow on mobile devices... */
    /* for horizontal padding between text and note */
    padding-left: 2em;
    box-sizing: border-box;


    text-align: left;
    font-size: 0.8em;
    color: gray;

    /* to match with corresponding <p> */
    display: var(--sn-display);
}


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;
}
*/
/* */


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



/* 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 */


.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;    }
}