article {
  margin: auto 0 0 0;

  font-family: Nimbus sans, Cascadia code, Courier New, get a font bro, Arial;
  line-height: 1.65rem;
  font-size: 1.25rem;

  position: relative;
  max-width: 950px; ;

  .pubdate {
    text-align: right;
    font-size: 0.75em;

  }
  ul {
    line-height: 1.6;
  }

  h1, h2, h3 {
    font-family: Palatino Linotype, Bookman Old Style, get a font bro, Times;
  }

  h1 {
    font-size: 3rem;
    line-height: 3rem;
  }
  h2 {
    font-size: 2rem;
    line-height: 3rem;
  }
  h3 {
    font-size: 1.6rem;
    line-height: 3rem;
  }

  .anchor {
    user-select: none;
    text-decoration: none;
    color: inherit;

    &:link {
      color: inherit;
    }
    &:visited {
      color: inherit;
    }
    &:hover, &:focus {
      text-decoration: underline;
    }
  }

  > p:first-of-type {
      > img {
        height: 150px;
        width: 150px;
        float: right;
        position: relative;
        top: -25px;
      }
      > picture {
        height: 150px;
        width: 150px;
        float: right;
        position: relative;
        top: -25px;
      }
    @media #{$gt-gsm} {
      margin-top: 2.5% 0;
    }
  }

  @media #{$gt-gsm} {
    ul {
      line-height: 1.4;
    }

    float: none;
    width: auto;

    padding-right: 1vw;
    padding-left: 3vw;

    margin-top: 25px;
    margin-bottom: 25px;

    &.zen-mode {
      margin-left: auto;
      transition: margin-left 0.25s ease-out 0.25s;
    }

    &.zen-mode-disabling {
      margin-left: --(width_panel);
      transition: margin-left 0.5s ease-out 0.25s;
    }
  }
  li p {
    display: inline;
  }
  ol {
    line-height: 2.5em;
    @media #{$gt-gsm} {
      line-height: 1.4em;
    }

    li {
      list-style-type: upper-roman;
    }
    li li {
      list-style-type: lower-roman;
    }
  }
  .footnotes {
    font-size: 0.8em;
    li {
      padding-bottom: 15px;
      list-style-type: decimal;
    }
    ol p {
      display: inline;
    }

    @mixin lightMode {
      color: #504d4d;
    }
    @mixin darkMode {
      color: #E0DDDD;
    }

    @media (prefers-color-scheme: dark) { @include darkMode; }
    @media (prefers-color-scheme: light) { @include lightMode; }
    &.light{ @include lightMode; }
    &.dark { @include darkMode; }

  }

  blockquote {
    padding: 1px 2%;

    border-left: 5px solid #ccc;
  }

  h1 h2 h3 {
    line-height: initial;
  }
  h1, h2, h3, h4, h5 {
      text-indent: -10px;
  }

  @media #{$gsm} {
    margin: 0;
    padding: 50px 5px;
    width: calc(100% - 10px);
    font-size: 1rem;
    code {
      font-size: 0.9rem;
    }
  }
  @mixin lightMode {
    .pubDate {
      color: #606060;
    }
    blockquote {
      color: #504d4d;
    }

    h4, h5, h6 {
      color: black;
    }
    img {
      filter: none;
    }
    color: initial;

    > p:first-of-type {
      font-weight: 2;
      > img {
        filter: none;
      }
    }
  }

  @mixin darkMode {
    .pubDate {
      color: #606060;
    }
    blockquote {
      color: #E0DDDD;
    }

    h4, h5, h6 {
      color: #EFEFEF;
    }
    img {
      filter: invert(1);
    }
    color: #EFEFEF;

    > p:first-of-type {
      font-weight: 2;
      > img {
        filter: invert(0);
      }
    }
  }
  @media (prefers-color-scheme: dark) { @include darkMode; }
  @media (prefers-color-scheme: light) { @include lightMode; }
  &.light{ @include lightMode; }
  &.dark { @include darkMode; }
}

.keybs {
  font-size: 1em;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  margin: 2px 3px;
  padding: 1px 5px;
  white-space: nowrap;

  // Theme style
  border: 1px solid gray;
  box-shadow: 1px 0 1px 0 #eee,0 2px 0 2px #ccc,0 2px 0 3px #444;
}

.marge {
    display: block;
}
.marge {
  @media #{$tab} {
    display: none;
  }
}
.sidenotes {
  margin: 10px 10px 0 0;
  text-align: justify;

  @media #{$tab} {
    display: none;
  }

  @mixin lightMode {
    color: #333333;
    sup {
      color: black;
    }
  }

  @mixin darkMode {
    color: #eee;
    sup {
      color: white;
    }
  }
  @media (prefers-color-scheme: dark) { @include darkMode; }
  @media (prefers-color-scheme: light) { @include lightMode; }
  &.light{ @include lightMode; }
  &.dark { @include darkMode; }

  transition: width 0.25s ease-out 0.25s;
  position: relative;
  max-width: 475px;
  p {
    margin: 0;
  }
  .sidenote {
    position: absolute;
    font-style: oblique;
    font-size: 1.07rem;
  }
}


section.likes {
  display: flex;
  justify-content: center;

  @mixin lightMode {
    .likesBox {
      background-color: #CDE3EC;
      .likesNotes {
        color: #555;
      }
      .icon {
        .nbLikes {
          color: #00324D;
        }
      }
    }
  }
  @mixin darkMode {
    .likesBox {
      background-color: #3C3C7C;
      .likesNotes {
        color: #CCC;
      }
      .icon {
        .nbLikes {
          color: #F0D5AD;
        }
      }
    }
  }
  @media (prefers-color-scheme: dark) { @include darkMode; }
  @media (prefers-color-scheme: light) { @include lightMode; }
  &.light{ @include lightMode; }
  &.dark { @include darkMode; }

  .likesBox {
    padding: 20px;
    border-radius: 8px;
    display: flex;


    .likesTitle {
      font: monospace;
      font-weight: 800;
    }
    .likesText {
      font-size: 0.8em;
    }
    .likesNotes {
      font-size: 0.8em;
      &.err {
        color: red;
      }
    }


    .icon {
      fill: transparent;
      stroke: pink;
      stroke-width: 20;
      cursor: pointer;
      position: relative;
      svg {
        overflow: visible;
        width: 10rem;
      }

      path {
        stroke-dashoffset: 0;
        stroke-dasharray: 1550;
        transform-origin: center;
      }

      .hear-main {
        z-index: 2;
      }
      .heart-background {
        position: absolute;
        left: 0;
        right: 0;
        z-index: 1;
        stroke: none;
      }
      .heart-main path.anim {
        animation: stroke-animation 2s ease-in-out forwards;
      }

      .heart-main ~ .heart-background path.anim-click {
        animation: fade-animation 0.35s ease-in-out forwards;
      }
      .nbLikes {
        font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
        text-align: center;
        position: relative;
        top: -10px;
        height: 0;
      }
    }

    @keyframes stroke-animation {
      0% {
        fill: transparent;
        transform: scale(1);
      }
      50% {
        fill: pink;
        transform: scale(1.1);
      }
      70% {
        transform: scale(1);
      }
      100% {
        stroke-dashoffset: 0;
        fill: pink;
      }
    }

    @keyframes fade-animation {
      0% {
        fill: transparent;
        transform: scale(1);
      }
      13% {
        fill: lightpink;
        transform: scale(1.2);
        opacity: 1;
      }
      66% {
        opacity: 0.8;
      }
      100% {
        transform: scale(2);
        opacity: 0;
      }
    }
  }
}
.alt-lang {
  a {
    padding-right: 20px;
  }
  font-size: 1.15rem;
  text-transform: lowercase;
  font-weight: bolder;
  position: relative;
  top: -3px;
  font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
}

.tags {
  display: flex;
  gap: 10px;
  flex-flow: row-reverse;
  font-size: 0.8em;

  .tag {
    padding: 0px 8px;
    border-radius: 3px;

    // Theme style

    @mixin lightMode {
      background-color: #DDD;
      color: #333;
    }
    @mixin darkMode {
      background-color: #444;
      color: #eee;
    }

    @media (prefers-color-scheme: dark) { @include darkMode; }
    @media (prefers-color-scheme: light) { @include lightMode; }
    &.light{ @include lightMode; }
    &.dark { @include darkMode; }
  }
}

/* Used only on tag's pages */
.articleList {
    list-style-type: none;
    font-size: 1.2em;
    text-indent: -65px;

    font-family: palatino, Times, serif;

    position: relative;
    top: -3px;
    left: -60px;

    .pubYear {
      color: #777;
      margin: 0 10px;
    }
}


/* Used only on tag's pages */
.inline-tag {
  position: relative;
  top: -3px;
  font-size: 0.7em;
  background-color: #DDD;
  padding: 3px 8px;
  border-radius: 3px;
  margin: 0 5px;

  @mixin lightMode {
    background-color: #DDD;
    color: #333;
  }
  @mixin darkMode {
    background-color: #444;
    color: #eee;
  }

  @media (prefers-color-scheme: dark) { @include darkMode; }
  @media (prefers-color-scheme: light) { @include lightMode; }
  &.light{ @include lightMode; }
  &.dark { @include darkMode; }
}