.jhonlink-marquee {
  box-sizing: border-box;
  container-type: inline-size;
  width: 100%;
  max-width: none;
  overflow: hidden;
  background: #143d34;
  color: #fff;
  padding: .55rem 0;
  font: 500 1rem/1.5 system-ui, sans-serif;
}
.jhonlink-marquee > marquee {
  display: block;
  width: 100%;
  white-space: normal;
}
.jhonlink-marquee .jhonlink-marquee-track {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 2.5rem;
  margin: 0;
  padding: .15rem 1.15rem;
  width: max-content;
  max-width: none;
  animation: jhonlink-slide 40s linear infinite alternate;
}
.jhonlink-marquee .jhonlink-marquee-track a { flex: none; white-space: nowrap; color: #fff; text-decoration: underline; text-underline-offset: .18em; }
.jhonlink-marquee a:focus-visible { outline: 2px solid #ffdd88; outline-offset: 2px; }
@keyframes jhonlink-slide { from { transform: translateX(0); } to { transform: translateX(calc(100cqw - 100%)); } }
.jhonlink-marquee:hover .jhonlink-marquee-track, .jhonlink-marquee:focus-within .jhonlink-marquee-track { animation-play-state: paused; }
.jhonlink-marquee > marquee:focus-within { overflow-x: auto; }
@media (prefers-reduced-motion: reduce) {
  .jhonlink-marquee .jhonlink-marquee-track { animation: none; flex-wrap: wrap; width: 100%; gap: .4rem 1.5rem; }
  .jhonlink-marquee .jhonlink-marquee-track a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
}