.menu-bar {
  padding: 1rem 2rem;
}

.menu-list {
  list-style: none;
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.menu-list a {
  color: #002855;
  text-decoration: none;
  font-family: sans-serif;
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  padding-bottom: 0.5rem;
}

.menu-list a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #002855;
  transition: width 0.3s ease;
}

.menu-list a:hover::after {
  width: 100%;
}

@media (max-width: 600px) {
  .menu-bar {
    padding: 0.75rem 1rem;
  }
  .menu-list{
    gap: 1rem;
  }
  .menu-list a{
    font-size: 0.85rem;
  }
}

@media (max-width: 400px) {
   .menu-list{
    gap: 0.75rem;
  }
  .menu-list a{
    font-size: 0.75rem;
}
}

<nav class="menu-bar">
  <ul class="menu-list">
    <li><a href="https://give.wvu.edu/campaign/830698/donate">HOME</a></li>
    <li><a href="https://give.wvu.edu/campaign/834600/donate">EVENT INFO</a></li>
    <li><a href="https://give.wvu.edu/campaign/834968/donate">ABOUT BETTY</a></li>
  </ul>
</nav>

.carousel-container{
    position:relative;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

input[name="carousel-control"] {
    display: none;
}

.carousel-track {
    display: flex;
    width: 400%;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1)
}

.carousel-slide {
    width: 25%;
    box-sizing: border-box;
}

.carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

#slide-1:checked ~ .carousel-track {transform: translateX(0%);}
#slide-2:checked ~ .carousel-track {transform: translateX(-25%);}
#slide-3:checked ~ .carousel-track {transform: translateX(-50%);}
#slide-4:checked ~ .carousel-track {transform: translateX(-75%);}

.arrow-set {
    display: none;
    position: absolute;
    top: 50%;
    width: 100%;
    transform: translateY(-50%);
    justify-content: space-between;
    padding: 0 15px;
    box-sizing: border-box;
    pointer-events: none;
}

.arrow-set label {
    background: rgba(255, 255, 255, 0.7);
    color: #333;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s ease, transform 0.1s ease;
    user-select: none;
}

.arrow-set label:hover{
    background: rgba(255, 255, 255, 0.95);
    transform: scale(1.05);
}

#slide-1:checked ~ .carousel-arrows .arrow-set-1,
#slide-2:checked ~ .carousel-arrows .arrow-set-2,
#slide-3:checked ~ .carousel-arrows .arrow-set-3,
#slide-4:checked ~ .carousel-arrows .arrow-set-4 {
    display: flex;
}

.carousel-dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.dot-indicator {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.2s ease;
}

.dot-indicator:hover {
    background: rgba(255, 255, 255, 0.8);
}

#slide-1:checked ~ .carousel-dots .dot-1,
#slide-2:checked ~ .carousel-dots .dot-2,
#slide-3:checked ~ .carousel-dots .dot-3,
#slide-4:checked ~ .carousel-dots .dot-4 {
    background: #ffffff;
    transform: scale(1.2);
}

@media (max width: 480px) {
    .arrow-set label {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .carousel-dots {
        bottom: 10px;
    }
}

.scroll-container {
  width:100%;
  overflow: hidden;/*hides overflow text*/
  white-space:nowrap;/*won't wrap to new line*/
  background:#FFABD1;
  color:#ffffff;
  padding: 15px 0;
  font-family: sans-serif;
  font-size: 1.2rem;
  box-sizing: border-box;
}

.scroll-text{
display: inline-flex;
white-space: nowrap; 
animation:scroll-left 30s linear infinite;
}

/*should now pause on hover*/
.scroll-text:hover {
  animation-play-state: paused;
}
/* ani logic*/
@keyframes scroll-left {
  0% {
    transform:translateX(0%);
  }
100% {transform: translateX(-50%);/* moves half the width */
  }
}

  <div class="scroll-container">
<div class="scroll-text">
<span> • SATURDAY, OCTOBER 31st, 2026   • MOUNTAINEER FIELD AT MILAN PUSKAR STADIUM</span>
<span> • SATURDAY, OCTOBER 31st, 2026   • MOUNTAINEER FIELD AT MILAN PUSKAR STADIUM</span>  
<span> • SATURDAY, OCTOBER 31st, 2026   • MOUNTAINEER FIELD AT MILAN PUSKAR STADIUM</span>  
<span> • SATURDAY, OCTOBER 31st, 2026   • MOUNTAINEER FIELD AT MILAN PUSKAR STADIUM</span>  
</div>
  </div>

<p><span style="font-size: 20px">The Betty Puskar Breast Cancer Walk, a FREE community event, returns to Mountaineer Field at Milan Puskar Stadium October 31! Together, we will honor our breast cancer survivors, grow hope for those in treatment, recognize their supporters, and provide valuable resources, all while we celebrate the legacy of Betty Puskar, a titan of cancer philanthropy and awareness in West Virginia. WVU Cancer welcomes all in the community to attend, regardless of where an individual may have received their diagnosis or treatment.</span></p>

<h1><span style="color: rgb(240, 103, 166)">PRESENTED BY:</span></h1>

<p><span style="font-size: 24px">Diagnosed with breast cancer in 1985, Betty Puskar sought treatment in Houston, Texas. She fought through the disease and was determined to build a breast care treatment facility in Morgantown so that others would not have to leave home to get exceptional care. In 1994, she contributed the initial donation to establish the Betty Puskar Breast Care Center. <br /><br />Part of the </span><span style="color: rgb(0, 40, 85); font-size: 24px"><u>WVU Cancer Institute</u></span><span style="font-size: 24px">, the Center provides comprehensive, all-encompassing breast care for women in West Virginia and the surrounding region.</span></p>

<h2><span style="color: rgb(240, 103, 166); font-family: var(--theme-font__font-family--heading); font-size: var(--theme-font__heading-md--font-size); font-weight: var(--theme-font__heading-md--font-weight); line-height: var(--theme-font__heading-md--line-height)">PRESENTING SPONSORS</span></h2>

<h1><span style="color: rgb(0, 40, 85); font-size: 32px; font-weight: 700">CAN&#039;T ATTEND?</span></h1>