/* 
Color variables

:root {
    --light: rgb(255, 255, 255);
    --bg:
    --primary: rgba(0,212,255,1)
}
*/
:root {
    --primary: rgb(0, 0, 255);
}


.scroller-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
}

.scroller {
    margin-left: 1rem;
    margin-right: 1rem;
}

.scroller__inner {
    padding-block: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.scroller[data-animated="true"] {
    overflow: hidden;
    -webkit-mask: linear-gradient(
      90deg,
      transparent,
      var(--light, rgb(255, 255, 255)) 20%,
      var(--light, rgb(255, 255, 255)) 80%,
      transparent
    );
    mask: linear-gradient(90deg, transparent, var(--light, rgb(255, 255, 255)) 20%, var(--light, rgb(255, 255, 255)) 80%, transparent);
}

.scroller[data-animated="true"] .scroller__inner {
    width: max-content;
    flex-wrap: nowrap;
    animation: scroll var(--_animation-duration, 40s)
      var(--_animation-direction, forwards) linear infinite;
}


.scroller-nav {
    text-align: left;
    font-size: rem;
    /* padding-left: 3rem;
    padding-left: 3rem; */
}
.scroller-nav li {
    margin-right: 1rem;
    display: inline;
}
.scroller-nav a {
    text-decoration: none;
    transition: opacity 0.3s ease;
    color: var(--light, rgb(255, 255, 255));
    opacity: .5;
}
.scroller-nav li a:hover {
    opacity: 1;
}


.scroller[data-animated="true"] .scroller__inner[paused] {
    animation-play-state: paused;
}

.scroller[data-direction="right"] {
    --_animation-direction: reverse;
}

.scroller[data-direction="left"] {
    --_animation-direction: forwards;
}

.scroller[data-speed="fast"] {
    --_animation-duration: 20s;
}

.scroller[data-speed="slow"] {
    --_animation-duration: 60s;
}


@keyframes scroll {
    to {
      transform: translate(calc(-50% - 0.5rem));
    }
}

a {
    text-decoration: none !important;
}

.card {
    width: 250px;
    height: 125px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.5rem;
    box-shadow: 0rem 0.25rem 1rem -0.25rem var(--light, rgb(255, 255, 255));
    text-align: center;
    color: var(--light, rgb(255, 255, 255));
    margin: .75rem;
    font-weight: bold;
}

/* Main content styles */
.card-title {
    font-size: 18px;
    margin-bottom: 1rem;
    color: var(--light, rgb(255, 255, 255));
}

/* Subtitle styles */
.card-subtitle {
    font-size: 14px;
    color: var(--light, rgba(255, 255, 255, 0.5));
    margin-top: 8px;
    font-weight: normal;
}

/* Subtitle styles */
.card-secondary {
    font-size: 10px;
    color: var(--light, rgba(255, 255, 255, 0.55));
    margin-top: 8px;
    font-weight: normal;
}
