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

.aboutme__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    width: 80%;
    padding: var(--spacing-l);
    margin: auto;
    background: var(--yellow-primary);
    border: 3px solid var(--color-ink);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-cards);
  }

@media (min-width: 1024px) {
    .aboutme__card {
      flex-direction: row;
    }
  }

.aboutme__portrait {
    width: 200px;
    height: 200px;
    -o-object-fit: cover;
       object-fit: cover;
    border-radius: var(--border-radius-circle);
    border: 3px solid var(--color-ink);
    flex-shrink: 0;
  }

.aboutme__title {
    margin: 0 0 var(--spacing-s);
  }

.aboutme__text {
    margin: 0;
    font-size: var(--font-size-m);
    text-align: start;
  }

.gitshowcase {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: var(--spacing-s);
}

@media (min-width: 1440px) {

.gitshowcase {
    display: block
}
  }

.gitshowcase__wrapper {
    min-width: 250px;
  }

.gitshowcase__list:has(li) {
    display: flex;
    padding: var(--spacing-l);
    gap: var(--spacing-xl);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    position: relative;

    anchor-name: --gitrepos;
    position: relative;
    scroll-marker-group: after;
  }

.gitshowcase__list:has(li)::after {
      content: "";
      min-width: calc(100% - 25em);
      flex-shrink: 0;
      scroll-snap-align: none;
    }

.gitshowcase__list:has(li)::scroll-marker-group {
      display: flex;
      gap: 10px;
      justify-content: center;
      position-anchor: --gitrepos;
      justify-self: anchor-center;
    }

.gitshowcase__list:has(li)::-webkit-scrollbar {
      opacity: 0;
    }

@supports selector(::scroll-button(*)) {
      .gitshowcase__list:has(li)::scroll-button(*) {
        position: absolute;
        content: "<";
        border: none;
        background: var(--text-primary);
        -webkit-background-clip: text;
                background-clip: text;
        font-size: 2rem;
        height: 30px;
        width: 30px;
        cursor: pointer;
        z-index: 999;
        position-area: left center;
        position-anchor: --gitrepos;
      }

      .gitshowcase__list:has(li)::scroll-button(right) {
        content: ">";
        position-area: right center;
      }

      .gitshowcase__list:has(li)::scroll-button(*):disabled {
        opacity: 0.2;
        cursor: auto;
      }

      .gitshowcase__list:has(li)::scroll-button(block-start),
      .gitshowcase__list:has(li)::scroll-button(block-end),
      .gitshowcase__list:has(li)__buttons {
        display: none;
      }
    }

.gitshowcase__buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-s);
    margin-top: var(--spacing-s);
  }

.gitshowcase__item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 20em;
    flex: 0 0 100%;
    padding: var(--spacing-s);

    --item-color: var(--yellow-primary);
    /* transform: rotate(calc(sibling-count() * 1deg)); */
  }

.gitshowcase__item:nth-child(3n + 2) {
      --item-color: var(--green-primary);
    }

.gitshowcase__item:nth-child(3n + 3) {
      --item-color: var(--blue-primary);
    }

.gitshowcase__item {
    background: var(--item-color);

    border: 3px solid var(--color-ink);
    border-radius: var(--border-radius-main);
    box-shadow: var(--box-shadow-cards);
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

@media (min-width: 1024px) {

.gitshowcase__item {
      height: 30em;
      flex: 0 0 30em
  }
    }

.gitshowcase__item::scroll-marker {
      content: "";
      width: 20px;
      height: 20px;
      background: var(--text-primary);
      opacity: 0.8;
      border-radius: var(--border-radius-circle);

      transition: all 0.3s;
    }

.gitshowcase__item::scroll-marker:target-current {
      opacity: 1;
      width: calc(20px * 1.5);
      border-radius: var(--border-radius-main);
      background-color: var(--item-color);
    }

.gitshowcase__item:nth-child(odd) {
    rotate: -1deg;
  }

.gitshowcase__item:nth-child(even) {
    rotate: 1deg;
  }

.gitshowcase__icons {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
  }

.gitshowcase__content h3 {
    font-size: var(--font-size-xl);
  }

@media (min-width: 1024px) {

.gitshowcase__content h3 {
      max-width: 70%
  }
    }

.wikis__filters {
    display: flex;
    flex-flow: row wrap;
    gap: 1em;
    margin-bottom: 1em;
  }

.wikis__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-template-rows: repeat(, auto);
    grid-auto-flow: dense;
    gap: var(--spacing-l);

    /* styling of actual image */
  }

.wikis__list__item {
      padding: var(--spacing-s);
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
      border: 3px solid var(--color-ink);
      border-radius: var(--border-radius-main);
      box-shadow: var(--box-shadow-cards);
    }

.wikis__list__item--fade-in {
        animation: fade-in 0.5s ease-in-out;
      }

.wikis__list__item--hidden {
        /* important to overwrite the supported grid lanes display */
        display: none !important;
      }

.wikis__list__item--with-image {
      position: relative;
      overflow: hidden;
      background-color: var(--card-color);
    }

.wikis__list__item--with-image > * {
      position: relative;
      z-index: 3;
    }

.wikis__list__item--with-image::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--wiki-image);
      background-size: cover;
      background-position: 0% 0%;
      background-repeat: no-repeat;
      filter: blur(4px);
      border-radius: var(--border-radius-main);
      z-index: 1;
    }

.wikis__list__item--with-image::after {
      content: "";
      position: absolute;
      inset: 0;
      background: var(--card-color);
      opacity: 0.8;
      border-radius: var(--border-radius-main);
      pointer-events: none;
      z-index: 2;
    }

.wikis__list__item:nth-child(3n + 1) {
      --card-color: var(--yellow-primary);
      background-color: var(--yellow-primary);
    }

.wikis__list__item:nth-child(3n + 2) {
      --card-color: var(--green-primary);
      background-color: var(--green-primary);
    }

.wikis__list__item:nth-child(3n + 3) {
      --card-color: var(--blue-primary);
      background-color: var(--blue-primary);
    }

@supports (display: grid-lanes) {
    .wikis__list {
      display: grid-lanes;
      grid-template-columns: 1fr 1fr 1fr;
      margin: 0 var(--spacing-l);
    }

      .wikis__list__item {
        display: grid;
        grid-template-rows: 2fr 3fr 1fr;
      }
  }

@supports (padding: random(10px, 40px)) {
    .wikis__list {

      /* TODO: find a way to use random to switch the colours */
      /* &__item:nth-child(3n + 1) {
        background-color: hsl(random(0, 360) 50% 50%);
      }

      &__item:nth-child(3n + 2) {
        background-color: hsl(random(0, 360) 50% 50%);
      }

      &__item:nth-child(3n + 3) {
        background-color: hsl(random(0, 360) 50% 50%);
      } */
    }
      .wikis__list__item {
        --item-height: random(10em, 20em);
        height: var(--item-height);
        padding: calc(var(--item-height) * 0.2);
      }

        .wikis__list__item h3 {
          margin: 0;
        }
  }