:root {
    --advert-background: #fff9f5;
    --advert-font: #414042;
    --advert-height: 60px;
    --advert-padding: 10px 30px;
}

.advert_bar {
    display: flex;
    justify-content: center; /* center the content horizontally */
    align-items: center;
    background-color: var( --advert-background);
    color: var( --advert-font);
    padding: var( --advert-padding);
    position: relative; /* Needed for positioning the close button */
    width: 100%;
    max-height: var(--advert-height);
    transition: opacity 0.5s ease-out;
    svg * {
        fill: var( --advert-font);
    }
}

/* Wrap the message in a flex container that grows */
.advert_mesg {
    margin: 0;
    font-size: 14px;
    /*text-align: center;*/
    flex: 1; /* take all space except the button */

    p {
        display: inline-block;
        margin: 0;
        a {
            color: #6c6b6e;
            &:hover {
                text-decoration: none;
                color: grey;
            }
        }
    }
}

@media only screen and (max-width: 1023px) {
    .advert_mesg {
        text-align: center;
    }
}