/* ticker.css */
* {
    box-sizing: border-box;
}

:root {
    --ticker-cycle-time: 30s; /* Default cycle time */
    --ticker-bg-color:  #ab4d24;
    --ticker-text-color: white;
}

.ticker-wrap {
    bottom: 0;
    width: 100%;
    overflow: hidden;
    height: 4rem;
    background-color: var(--ticker-bg-color);
    box-sizing: border-box;
    display: flex;
    align-items: center;
}

.ticker-wrap .ticker {
    display: flex;
    white-space: nowrap;
    will-change: transform;
    flex-wrap: nowrap; /* Prevent items from wrapping to the next line */
}

.ticker-wrap .ticker__item {
    padding: 0 2rem;
    font-size: 2rem;
    color: var(--ticker-text-color);
    flex-shrink: 0; /* Prevent items from shrinking */
}

body {
    padding-bottom: 5rem;
}

h1, h2, p {
    padding: 0 5%;
}

/* Optional: Styling for control buttons */
.ticker-controls {
    margin: 20px;
    text-align: center;
}

.ticker-controls button {
    padding: 10px 20px;
    margin: 0 10px;
    font-size: 1rem;
    cursor: pointer;
}