#navigation {
  background-color: var(--pico-background-color);
}

.tech-marquee{
  --speed: 40s;
  --gap: .9rem;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: row;
  mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);

}

.tech-row{
  display: inline-flex;
  align-items: center;
  gap: var(--gap);
  white-space: nowrap;
  padding: 0;
  margin: 0;
  list-style: none;
  animation: marquee-slide var(--speed) linear infinite;
}

.tech-row li{
  display: inline;
  opacity: 0.9;
}

.tech-row li::before{
  content: "·";
  opacity: .5;
  margin: 0 var(--gap);
}

.tech-row:nth-child(2){
  animation-name: marquee-slide-2;
}

.tech-marquee:hover .tech-row,
.tech-marquee:focus-within .tech-row{
  animation-play-state: paused;
}

@keyframes marquee-slide{
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}
@keyframes marquee-slide-2{
  from { transform: translateX(0%); }
  to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce){
  .tech-row{ animation: none; }
}


#brand { display: inline-block; min-width: 12ch; }
#brandText { transition: opacity .25s ease; opacity: 1; }
#brandText.is-fading { opacity: 0; }

#projects article {
  display: flex;
  flex-direction: column;
}

#projects article header {
  display: flex;
  flex-direction: column;
  flex: 1;
}

#projects h3 {
  line-height: 1.25;
  min-height: 2lh;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: .5rem;
}

#projects footer {
  line-height: 1.25;
  min-height: 3lh;
}

#projects img {
  width: 100%;
  height: auto;
  margin-top: 0.5em;
  margin-bottom: 1em;
  display: block;
}