@font-face {
  font-family: "sans-serif";
  src: url();
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

:root {
  --blue: #4fb3ff;
  --animation-duration: .2s;
  --animation-easing: ease-in-out;
  --text-color: #b1b1b1;
  --body-padding: 1.2em;
}



a {
  color: inherit;
  text-decoration: none;

  &:hover {
    color: var(--blue);
  }
}

h1,
em {
  font-family: "Irish Grover";
  font-size: 1.1em;
}


body {
  padding: var(--body-padding) !important;
  transition: background-color 0.3s ease-in-out;
  font-family: "Lexicon";
  color: var(--text-color);
  font-size: 14px;
  background-color: white;
}

#bg-overlay-1,
#bg-overlay-2 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: -1;
}


main {
  padding-top: 1.5em;
}



ul.index {
  display: block !important;
}

.selected {}

.matched .tags>.tag:first-of-type {
  color: var(--blue);
  animation: fade-in .5s ease-in-out forwards;
}

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

  to {
    opacity: 1;
  }

}

ul.index.projects li {
  transition-timing-function: ease-out;
  /* Tu peux changer par linear, ease, ease-in, ease-out, cubic-bezier, etc. */
}

ul.index.projects li a {
  display: grid !important;
  position: relative !important;
  grid-template-columns: repeat(16, 1fr);

}

ul.index.projects li a>span:nth-of-type(1) {
  grid-column: 1 / span 4;

  width: 25vw;

}

ul.index.projects li a>span:nth-of-type(2) {
  grid-column: 5 / span 1;

  width: 6.25vw;
}

ul.index.projects li a>span:nth-of-type(3) {
  grid-column: 7 / -1;
}

hr {
  margin: .2em 40em .2em 0;
  border: 0;
  border-top: 1px dotted var(--text-color);

}

main {
  padding-top: 1.5em
}

.tag:hover {
  color: var(--blue);
}

.tag.hovered {
  color: var(--blue);
}

span:hover:not(.tags) .tag {
  color: var(--blue);
}

.tags:has(.tag.hovered) {
  color: var(--text-color);
}

.tag:hover:not(.hovered) {
  color: var(--text-color);
}


@media (width < 960px) {

  nav.mobile {
    display: block !important;
    position: relative !important;
    bottom: 0 !important;

    a:nth-of-type(1) {
      display: none;
    }

  }

  nav:not(.mobile) {
    position: relative !important;


    a:nth-of-type(1n+2) {
      display: none;
    }
  }

  ul.index.projects li a {
    width: calc(100vw - var(--body-padding) * 2);
    gap: .5em;
  }

  /* li:nth-of-type(5n+1) {
    color: #FF0004
  }

  li:nth-of-type(5n+2) {
    color: #D688C9
  }

  li:nth-of-type(5n+4) {
    color: #717171
  }

  li:nth-of-type(5n+5) {
    color: #791E20
  } */

  ul.index.projects li a>span:nth-of-type(1) {
    grid-column: 1 / span 8;

  }

  ul.index.projects li a>span:nth-of-type(2) {
    grid-column: 13 / span 4;
    width: auto;
    display: none;
    text-align: right;


  }

  ul.index.projects li a>span:nth-of-type(3) {
    grid-column: 9 / -1;

  }

}