/* Import Roboto font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');

/* Moving News Bar */
.moving-bar {
    width: 100%;
    height: 35px;
    background-color: #000000;
    color: #ffffff;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    display: block;
}

    .moving-bar p {
        display: inline-block;
        white-space: nowrap;
        font-size: 16px;
        font-family: 'Roboto', sans-serif;
        line-height: 35px;
        padding-left: 0;
        animation-name: moveLeftToRight;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
        /* Duration will be set dynamically via JS */
    }

@keyframes moveLeftToRight {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-100%);
    }
}

body.with-news-bar {
    padding-top: 35px;
}