/* ***** VARIABLES ***** */
:root {
  --font-sans-serif: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
  --font-serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
  --font-monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
}


@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap');
/* #333 */





:root {
  --color-background: white;
  --color-background-secondary: hsla(0, 0%, 9%, 0.4);
  /* Code blocks */
  --color-code-bg: hsla(0, 0%, 9%, 0.4);
  --color-code-fg: white;
  /* Default text */
  --color-text: #333;
  --color-text2: #89949D;
  --color-placeholder: #89949D;
  --color-text2-underline: #e5e5e5;
  --color-accent: #e7874c;

  /* Extra */
  --color-hr: #555D66;
  --color-footer-hr: #555D66;
  --color-border: #555D66;
  /* Important underline */
  --color-sticky-title-underline: #e5e5e5;

  /* quick links */
  --color-quick-bg: #fafafa;

  /* <code> als article text */
  --color-tag: #333;
  --bg-color-tag: #e5e5e5;

  /* <em> tag */
  --em-color: #89949D;
  --em-bg-color: #fafafa;

  /* Accordion */
  --accordion-bg: white;

  transition: .1s;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #18191A;
    --color-background-secondary: hsla(0, 0%, 9%, 0.4);
    /* Code blocks */
    --color-code-bg: hsla(0, 0%, 9%, 0.4);
    --color-code-fg: hsla(0, 0%, 9%, 0.4);
    /* Default text */
    --color-text: #D0D7DE;
    --color-text2: #89949D;
    --color-placeholder: #89949D;
    --color-text2-underline: #89949DDD;
    --color-accent: #E4A781;

    /* Extra */
    --color-hr: #555D66;
    --color-footer-hr: #555D66;
    --color-border: #555D66;
    /* Important underline */
    --color-sticky-title-underline: #555D6699;

    /* quick links */
    --color-quick-bg: #212121;


    /* <code> als article text */
    --color-tag: #D0D7DE;
    --bg-color-tag:
      color-mix(in srgb, var(--color-background) 75%, var(--color-accent));

    /* <em> tag */
    --em-color: #89949D;
    --em-bg-color: #2a2a2a;

    /* Accordion */
    --accordion-bg: hsla(0, 0%, 9%, 0.4);

    transition: .1s;
  }
}


body.light article a {
  font-weight: 500;
}

/* general focus color (ONOLY KEYBOARD FOCUS NOT PRESSING) */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}




/*
    CSS text-wrap: balance property
    Allows multiple lines of text to have their lines broken in such a way that each line is roughly the same width, often used to make headlines more readable and visually appealing.

    https://caniuse.com/css-text-wrap-balance
 */
h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}


/*
     CSS max-width property
     In this case, we are setting the maximum width of the text to 65 characters, which is a good practice to make the text more readable and visually appealing.

     CSS property: text-wrap: pretty
     This property is used to break lines of text in a way that is visually appealing, often used to make paragraphs more readable and visually appealing.

     https://caniuse.com/mdn-css_properties_text-wrap_pretty
  */
p,
li,
figcaption {
  text-wrap: pretty;
  max-width: 65ch;
}

/*
     CSS property: container-type: inline-size
     This property is used to set the width of an element to the width of the containing block, often used to make elements fill the width of the container.

     https://caniuse.com/mdn-css_properties_container-type_inline-size
  */
body> :is(header, footer),
main,
section,
article {
  container-type: inline-size;
}


/* ***** LOWERCASE ***** */
h1,
h2,
h3,
h4,
h5,
.navbar-item,
#tags-list li,
.posts-list li,
.pages-list li a,
.post-info {
  text-transform: math-auto;
}




/* ***** MAIN ***** */
*,
*:before,
*:after {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased
}

html {
  height: 100%;
  font-size: 62.5%;
  font-family: var(--font-sans-serif);
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scroll-padding: 10rem;
}

@media screen and (max-width:770px) {
  html {
    scroll-padding: 2rem;
  }
}



/* Disable smooth scrolling if reduced motion is active */
@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-size: 1.8rem;
  color: var(--color-text);
  background-color: var(--color-background);

  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  padding: 0 3rem;
}

@media screen and (min-width:770px) {

  body footer,
  body header {
    margin: 0 auto;
    min-width: 70rem;
  }

  body main {
    margin: 0 auto;
    min-width: 70rem;
  }
}





h1,
.text_large {
  font-size: clamp(2.25rem, 1.5rem + 2.5vw, 4rem);
  line-height: 1.2;
}

h2,
.text_regular {
  font-size: clamp(2rem, 1.5714rem + 1.4286vw, 3rem);
  line-height: 1.2;
}

h3,
.text_normal {
  font-size: clamp(1.75rem, 1.4286rem + 1.0714vw, 2.5rem);
  line-height: 1.2;
}

h4,
.text_small {
  font-size: clamp(1.5rem, 1.2857rem + 0.7143vw, 2rem);
  color: var(--color-accent);
  font-weight: 400;
}

h5,
.text-extra-small,
footer>p,
.header p {
  color: var(--color-text2);
  font-size: clamp(1.375rem, 1.2143rem + 0.5357vw, 1.75rem);
  font-weight: 400;
  margin: 0;
}

p {
  font-size: clamp(1.3rem, 1.2857rem + 0.7143vw, 1.8rem);
  font-weight: 400;
  margin-top: 0;
}

article p>code,
article a>code,
article li>code,
article p>em>code {
  font-size: 0.9em;
  padding-inline: 0.4em;
  padding-block: 0.2em;
  background: var(--bg-color-tag);
  color: var(--color-tag);
  /* color: inherit; */
  border-radius: 8px;

}


article a,
footer a,
.accordion-css a {
  text-decoration: none;
}


article a:hover,
article a:focus,
.accordion-css a:hover,
.accordion-css a:focus {
  text-decoration: underline;
  text-decoration-thickness: 1px;
}





.text_large.underline,
.text_regular.underline,
.text_normal.underline,
.text_small.underline,
.text_extra-small.underline {
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-sticky-title-underline);
}


em {
  /* color: var(--color-text2); */
  font-style: italic;
  font-size: 0.9em;
  font-weight: 500;
  padding: 4px 8px;
  color: var(--em-color);
  background: var(--em-bg-color);
  border-radius: 8px;

}

a {
  cursor: pointer;
  color: var(--text-color);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  color: var(--color-accent);

  &.link-external {
    /* Not in use */
  }
}

.button {
  text-decoration: none !important;
  width: fit-content;
  font-size: clamp(1.3rem, 1.2857rem + 0.7143vw, 1.8rem);
  /* padding: 1rem 1.5rem; */
  border-radius: .5em;
  padding: 8px 16px;
  border: 1px solid transparent;
  background-color: var(--color-quick-bg);
  outline: none;
  transition: border 0.3s;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  font-size: clamp(1.1rem, 1.2857rem + 0.7143vw, 1.6rem);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  color: var(--color-text2);

  & svg {
    display: none;
  }


  &:hover,
  &:focus {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }

  &:hover.right-arrow-icon svg {
    rotate: 135deg;
    transition: rotate 0.3s;
  }

  &:hover.left-arrow-icon svg {
    rotate: 45deg;
    transition: rotate 0.3s;
  }

  svg {
    transition: rotate 0.3s;

    & path {
      stroke: var(--color-accent);
    }
  }

}



/* Optional: Style for links opening in new tabs */
a[target="_blank"]::after {

  content: " ↪︎";
  white-space: pre;
  display: inline-block;
  margin-right: 0.2em;
}

blockquote {
  margin: 2.4rem;
  font-style: italic;
  padding-left: 0.8em;
  border-left: 2px solid var(--color-accent);
  background-color: color-mix(in srgb, var(--color-background) 70%, var(--color-sticky-title-underline));

  @media screen and (max-width: 40rem) {
    margin: 0;
  }
}

em code {
  font-size: 0.9em;
  font-style: italic;
}


img,
video {
  width: 100%;
  object-fit: cover;
  border-radius: 0.75rem;
}

img,
video {
  min-height: 15rem;
}

/* picture:not(:has(+em)) img {
  margin-bottom: 2.4rem;
} */

picture:has(+em)~em {
  margin-bottom: 1.2rem;
}


picture+em {
  text-align: center;
  display: block;


}

.skip-to-content {
  left: 50%;
  transform: translateX(-50%);
  position: absolute;
  background: red;
  top: -200%;
  container-type: scroll-state;
  margin-block-start: 1em;
  margin-block-end: 1em;
  padding-top: 2rem;
  z-index: 9999;
  flex-direction: column;
  display: flex;
  gap: .8rem;
  background: var(--color-background);
  --color: var(--color-sticky-title-underline);
  --opacity: 1;
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 2.4rem;
  border-radius: 8px;
  border: 1px solid rgb(from var(--color) r g b / var(--opacity));
  transition: top .3s;
}


.skip-to-content:focus {
  top: calc(68px + 4rem);
  transition: top .3s;
}



/* -webkit-scrollbar */

/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */

::-webkit-scrollbar-track {
  background: var(--color-background);
}

/* Handle */

::-webkit-scrollbar-thumb {
  background: var(--color-accent);
  border-radius: 10px;
}

/* Handle on hover */

::-webkit-scrollbar-thumb:active {
  background: var(--color-accent);
}




::-webkit-scrollbar {
  width: 20px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--color-quick-bg);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--color-sticky-title-underline);
  border-radius: 0;
  border: 1px solid transparent;
  view-transition-name: thumb;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  /* background: var(--color-background); */

}




/* ***** HEADER ***** */
header#banner {
  container-type: scroll-state;
  margin-block-start: 1em;
  margin-block-end: 1em;
  position: sticky;
  top: 0;
  padding-top: 2rem;
  z-index: 9999;
  flex-direction: column;
  display: flex;
  gap: .8rem;

  /* ✅ important to isolate stacking context */

  @supports (container-type: scroll-state) {
    >nav {
      @container scroll-state(stuck: top) {
        background: red;
        color: blue;
      }
    }
  }





  &::after {
    background: var(--color-background);
    content: "";
    position: fixed;
    top: -2.5rem;
    left: -1px;
    height: 5rem;
    z-index: -2;
    width: calc(100% + 2px);
    transform: rotate(180deg);
  }

  & svg.noice {
    background-color: var(--color-background) !important;
    position: fixed !important;
    top: -2.5rem;
    z-index: -1;
    left: -1px;
    height: 5rem;
    opacity: .1;
    width: calc(100% + 2px);
    background: blue;


  }




}

header .container {
  position: relative;
  background: var(--color-quick-bg);
  --color: var(--color-quick-bg);
  --opacity: 1;
  display: flex;
  justify-content: space-between;
  padding: 1.2rem 2.4rem;
  border-radius: .5rem;
  /* shadow */
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);


}



header#banner h1 {
  z-index: 1;
  font-size: 1.4em;
  margin: 0;
}

header#banner .title {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  position: relative;

  & span {
    display: none;
    font-size: clamp(2rem, 1.5714rem + 1.4286vw, 3rem);
    line-height: 1.2;
    font-weight: 600;
  }


  &::after {
    width: 0;
    content: "";
    display: block;
    height: 2px;
    background: var(--color-accent);
    border-radius: 40px;
    top: calc(40px + 1rem);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 1;
    transition: width .3s;
  }

  &:hover::after,
  &:focus::after {
    width: 100%;
    color: var(--color-text);
    transition: width 0.3 ease-in-out;
  }

  &#navbar-curr-page {
    &:after {
      opacity: 1;
      width: 100%;
      background: var(--color-accent);
      view-transition-name: line;
    }
  }
}

header#banner .title svg {
  width: 100%;
  max-width: 40px;
  height: 40px;
}

header#banner .title svg path {
  fill: var(--color-accent);
}

header#banner nav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;

}

header#banner nav a {
  color: var(--color-text2);
  text-decoration: none;
  text-decoration-color: var(--color-text2-underline);
  text-decoration-thickness: 0.1rem;
  margin: 0;
  position: relative;

  &::after {
    width: 0;
    content: "";
    display: block;
    height: 2px;
    background: var(--color-text2);
    border-radius: 40px;
    top: calc(35px + 1rem);
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: .5;
    transition: width .3s;

    @media screen and (max-width: 30rem) {
      top: calc(30px + 1rem);
    }
  }

  &:hover::after,
  &:focus::after {
    width: 100%;
    color: var(--color-text);
    transition: width 0.3 ease-in-out;
  }
}



header#banner nav a#navbar-curr-page {
  text-decoration: none;
  cursor: default;

  color: var(--color-accent);



  &:after {
    opacity: 1;
    width: 100%;
    background: var(--color-accent);
    view-transition-name: line;

    @media screen and (max-width: 30rem) {
      /* stop view-transition */
      animation-duration: 0s !important;
      view-transition-name: none;
    }
  }
}

header .mobile-menu {
  display: none;
}

header .mobile-menu button {
  height: 40px;
  width: 40px;
  border: none;
  background: transparent;
  color: var(--color-text2);
  cursor: pointer;

  & path {
    stroke: var(--color-accent);
  }
}

header .mobile.container {
  display: none;
}


@media (max-width: 30rem) {
  header .mobile-menu {
    display: flex;
  }

  header#banner .container:first-child nav {
    display: none;
  }

  header#banner:has(.mobile.container) svg.closed {
    display: flex;
  }

  header#banner:has(.mobile.container.active) svg.closed {
    display: none;
  }

  header#banner:has(.mobile.container) svg.open {
    display: none;
  }

  header#banner:has(.mobile.container.active) svg.open {
    display: flex;
  }


  header#banner .mobile.container {
    width: 100%;
    position: absolute;
    top: -50%;
    display: flex;
    z-index: -2;
    /* transition: top .3s; */

    &.active {
      transition: top .3s;
      top: calc(68px + 2rem + .8rem);
    }
  }

  header#banner .title span {
    display: flex;
  }
}













/* List of posts */
.posts-list {
  padding-left: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}


.posts-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-gap: 2.4rem;
}

.posts-list li time {
  width: 12rem;
  font-weight: 500;
  color: var(--color-accent);
  margin: auto;
}

.posts-list li a {
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-sticky-title-underline);
  color: var(--color-text);
  z-index: 0;

  &:hover {
    text-decoration: underline;
  }

  @media screen and (max-width:40rem) {
    white-space: wrap;
  }
}





@media screen and (max-width:40rem) {
  .posts-list li {
    grid-template-columns: auto;
    gap: 0;
  }

  .posts-list li time {
    width: 100%;
  }
}
}

article:has(posts-list) .text_regular {
  margin-top: 5.4rem;
}

/* Previous & Next Links */
.prevnext {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  display: grid;
  margin: 1.2rem 0;
}

.prevnext-next {
  text-align: right;
}

.prevnext p {
  text-align: unset;
  font-size: 0.9em;
}

.prevnext a {
  color: var(--color-accent);
  text-decoration: none;
  text-decoration-color: var(--color-accent);
  text-underline-offset: 3px;
}



.prevnext a:visited {
  text-decoration: none;
  text-decoration-thickness: 1px;
}



/* Header */
.header {
  padding: 1.2rem 0 1.2rem;
  border-bottom: 0.2rem solid var(--color-sticky-title-underline);
  margin-block-start: 0.83em;
  margin-block-end: 0.83em;
  position: relative;
}

.header a {
  display: flex;
  align-items: center;
  gap: 0.8rem;

  & svg path {
    stroke: var(--color-accent);
  }
}

}

.header .text_large {
  margin: 0;
}

.header .text_large,
.header .text_small {
  margin-bottom: 0;
}

.header .text_small {
  margin-top: 0.8rem;
}




.blog-rate {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  margin-top: 1.6rem;
  gap: 1.6rem;
}

.upvote-button {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.6rem;
  border-radius: 4px;
  background-color: var(--color-code-bg);
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 1.6rem;
  position: relative;
}

.upvote-button:hover {
  background-color: #1f1f21;
  transition: background-color 0.2s;
}

.upvote-button .locked {
  display: none;
  position: absolute;
  top: -8px;
  right: -8px;
  background-color: #DF9568;
  color: #161618;
  font-size: 1.2rem;
  color: #ebebf5;
  padding: 0.4rem;
  border-radius: 50%;
}

.upvote-button .locked path {
  stroke: #161618;
}



footer .footer-content {
  justify-content: space-between;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.6rem;
  padding: 1.2rem 0;
  color: var(--color-text2);
}

footer ul {
  margin: 0;
  padding-left: 0;
  list-style-type: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8rem;
}

footer ul a {
  color: inherit;
  text-transform: lowercase;
  text-decoration: underline;
}

footer span a:hover {
  text-decoration: underline;
}

footer ul hr {
  width: 2rem;
  rotate: 90deg;
}

footer hr {
  border-width: 1px;
  border-style: solid;
  border-color: var(--color-sticky-title-underline);
  ;
}


.primary {
  cursor: pointer;
  font-family: var(--font-sans-serif);
  color: var(--color-text);
  background-color: transparent;
  border: none;
}


.primary {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 2.4rem;
  border-radius: 4px;
  background-color: var(--color-code-bg);
  color: var(--color-accent);
  font-size: 1.6rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
  margin-top: 1.6rem;
  position: relative;
  width: fit-content;
}



.primary:hover,
.primary:focus {
  background-color: #1f1f21;
  transition: background-color 0.2s;
}


@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-right {
  from {
    transform: translateX(30px);
  }
}

@keyframes slide-to-left {
  to {
    transform: translateX(-30px);
  }
}

:root::view-transition-old(root) {
  animation: 5000ms cubic-bezier(0.4, 0, 1, 1) both fade-out 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-left;
}

:root::view-transition-new(root) {
  animation: 5000ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in 300ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-right;
}

@media (prefers-reduced-motion) {

  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}




/*
 * == Show header on scroll up, hide on scroll down ==
 * == Author: Fabrizio Calderan
 * == https://www.linkedin.com/in/fabriziocalderan/
 * == https://fabrizio.dev/
 *
 * It requires scroll-animations, @property support
 * (now in baseline) and style queries: as of today
 * (2024.11.04) it works on latest Chrome, Edge and
 * Opera.
 *
 * Work based on this article by @bramus
 * https://www.bram.us/2023/10/23/css-scroll-detection/
 */

@property --scroll {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll-delayed {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

@property --scroll-direction {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}


@keyframes setScrollProps {
  to {
    --scroll: 1000;
    --scroll-delayed: 1000;
  }
}

:root {
  animation: setScrollProps linear both;
  animation-timeline: scroll(root);
  --header-effect-duration: .5s;
}

body {
  transition: --scroll-delayed calc(var(--header-effect-duration) + .1s);
  /* the transition of the header should last a
    * bit less than this transition otherwise, for
    * extremely small scroll movements, the header
    * won't be fully revealed or hidden (that's
    * the reason for a + .1 sec. here)
    */

  --scroll-velocity: calc(var(--scroll) - var(--scroll-delayed));
  --scroll-speed: max(var(--scroll-velocity), -1 * var(--scroll-velocity));
  --scroll-direction: calc(var(--scroll-velocity) / var(--scroll-speed));
}

header#banner {
  will-change: transform;
  transition: transform var(--header-effect-duration) 0s;
  transform: translateY(var(--translate));

  @container style(--scroll-direction: 0) {
    /* Scroll is idle, so we keep the current header
       * position by setting an extremely high
       * transition delay. ~2 billion seconds should
       * be enough even for the most patient user ;)
       */
    transition-delay: calc(infinity * .4s);
  }


  /*
   * Note: you could avoid the subsequent style
   * queries if you set the --translate property
   * like so:
   *
   *   @container style(not (--scroll-direction: 0)) {
   *     --translate: calc((var(--scroll-direction) + 1) * -50%);
   *   }
   *
   * but it would only work for this specific use
   * case and values, so I keep them for clarity.
   */

  @container style(--scroll-direction: -1) {
    /* Scrolling up, so we must reveal the header */
    --translate: calc((var(--scroll-direction) + 1) * -50%);
  }

  @container style(--scroll-direction: 1) {

    /* Scrolling down, so we must hide the header
       *
       * Assign a lower value if you want to also hide
       * the box-shadow below the header
       * (e.g. --translate: calc(-100% - 15px))
       */
    --translate: -100%;

  }
}



@media (prefers-reduced-motion: no-preference) {
  main {

    &>article>* {
      /* --_animation: slidein;
      animation: var(--_animation) linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 50%; */
    }
  }
}

@keyframes slidein {
  from {
    /* background: red; */
    transform: translatey(20%);
  }
}



/* Table of contents */

.block-items {}


.toc-container {
  display: none;
  display: none !important;
  /* this one left side of all the grid items */
  grid-column: 1 / 2;
}

.toc-container:has(ol > li) {
  display: grid
}

.sidebar {
  height: 100%;
  height: -webkit-fill-available;
  --width: 40rem;
  right: calc(-40rem - 2rem);
  width: var(--width);
  max-width: var(--width);
  align-self: flex-start;
  position: absolute;
  top: 2rem;
  margin-top: 23rem;
  gap: 2rem;
  display: flex;
  flex-direction: column;
}

.sidebar>.toc-container {
  top: 2rem;
  position: sticky;
  padding-top: 2rem;
  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
  border-radius: .375rem;
  background: var(--color-background);
  border: 1px solid var(--color-sticky-title-underline);

  padding: .5rem 2.2rem;
}

.toc ol {
  list-style: none;
  padding: 0;
}

.toc a {
  color: var(--color-text2);
}

.toc a.active {
  color: var(--color-accent);
}


.table-of-contents li a {
  text-decoration: none;
  color: var(--color-text);
  transition: color 0.2s;
}

.table-of-contents li a:hover {
  color: var(--color-primary);
}

.block-items {
  flex: 3;
  max-width: 800px;
}

/* .share {
  display: none;
} */

.share h4 {
  margin: 0;
  margin-bottom: 1.6rem;
}

.share ul {
  display: flex;
  gap: 1.6rem;
  padding: 0;
  margin: 0;
  list-style-type: none;
  margin-bottom: 1.6rem;

}


.share li a {
  display: grid;
  place-items: center;
  border: 1px solid var(--color-sticky-title-underline);
  height: 50px;
  width: 50px;
  border-radius: 9999px;
}

/* Responsive Adjustments */
@media screen and (max-width: 1574px) {
  .content {
    flex-direction: column;
  }

  /* content set display grid */
  main:has(.sidebar) .sidebar {
    display: none !important;

  }


  /* share */

}