article {
  margin: auto 0 0 0;

  font-family: Nimbus sans, Fira Code, Helvetica, get a font bro, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  line-height: 1.5rem;
  font-size: 1rem;

  position: relative;
  max-width: 950px;

  .pubdate {
    text-align: right;
    line-height: 1.65;
  }
  ul {
    line-height: 1.6;
  }

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

  h1, h2, h3, h4 {
    margin: 2.5rem 0 1rem 0;
  }
  p {
    margin: 0.5rem 0;
  }

  h1 {
    font-size: 2rem;
    line-height: 3rem;
    margin: 0.5rem 0;
  }
  h2 {
    font-size: 1.6rem;
    line-height: 3rem;
  }
  h3 {
    font-size: 1.3rem;
    line-height: 3rem;
  }
  h4 {
    font-size: 1.1rem;
    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;
      }
      > img:not([src$="-inv.svg"]) {
        filter: revert;
      }
      > 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.5;
    }

    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.task-list-item {
      list-style-type: "- ";
      input[type='checkbox'] {
        width: 20px;
        height: 20px;
      }
  }
  li p {
    display: inline;
  }
  #sommaire + ol, #table-of-contents + ol {
    line-height: 1.6rem;
    @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;
    }
  }
  @media #{$big-laptop} {
    pre code {
      width: 110%;
      margin: 0 -10%;
    }
  }
  @mixin lightMode {
    .pubDate {
      color: #606060;
    }
    blockquote {
      color: #504d4d;
    }

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

    > p:first-of-type {
      > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] {
        filter: none;
      }
    }
  }

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

    h4, h5, h6 {
      color: #EFEFEF;
    }
    img:not(.no-dark) {
      filter: invert(1);
    }
    color: #EFEFEF;

    > p:first-of-type {
      > img[src$=".jpg"], > img[src$=".png"], > img[src$=".avif"] {
        filter: invert(0);
      }
    }
  }
  @media (prefers-color-scheme: dark) { @include darkMode; }
  @media (prefers-color-scheme: light) { @include lightMode; }
  &.light{ @include lightMode; }
  &.dark { @include darkMode; }

  iframe, img, div, video, svg, image {
    border: none;
    margin: 0 auto;

    @media #{$big-laptop} {
      &.big {
        width: 118%;
        max-width: 118%;
        margin: 0 -10%;
      }
    }
  }
}

.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 10%;
  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: 0.8rem;
  }
}

section.likes {
  display: flex;
  justify-content: center;
  margin: 3rem 0 1rem 0;

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


    .layout {
      display: flex;
      align-items: center;
      .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 1.5s 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);
      }
      30% {
        fill: pink;
        transform: scale(1.25);
      }
      50% {
        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;
  flex-wrap: wrap;
  font-size: 1rem;
  line-height: 1.65;

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


video::cue {
  background-position: top;
  background-origin: border-box;
  position: 90%;
}

video::cue(.back) {
  font-style: oblique;
  opacity: 0.85;
  font-size: 0.7em;
  line-height: 0.9;
  padding-bottom: 5em;
}

hr {
  margin: 2.5rem 0;
}