*, *::before, *::after {
    -moz-osx-font-smoothing : grayscale;
    -webkit-font-smoothing  : antialiased;
    box-sizing              : border-box;
}

:root {
    --now-bp-sm                : 576px;
    --now-bp-lg                : 1200px;
    --now-color-black          : #1a1519;
    --now-color-white          : #f3f1ee;
    --now-gutter               : 6rem;
    --now-marquee-move-initial : -25%;
    --now-marquee-move-final   : -50%;
}

html, body {
    height : 100%;
}

body {
    background     : var(--now-color-black) url(background.jpg) repeat;
    color          : var(--now-color-white);
    display        : flex;
    flex-direction : column;
    font-family    : 'Syne', sans-serif;
    font-size      : 13px;
    letter-spacing : 0.2em;
    line-height    : 1.5;
    text-align     : center;
}

@media only screen and (min-width : var(--now-bp-sm)) {
    body {
        font-size : 20px;
    }
}

a {
    color           : inherit;
    text-decoration : none;
    text-transform  : uppercase;
}

a:active,
a:focus,
a:hover {
    text-decoration : underline;
}

img {
    max-width : 100%;
    height    : auto;
}

.container {
    margin        : 0 auto;
    padding-left  : calc(var(--now-gutter) / 2);
    padding-right : calc(var(--now-gutter) / 2);
}

@media only screen and (min-width : 576px) {
    .container {
        max-width : 90%;
    }
}

.mb-4 {
    margin-bottom : 1.5rem !important;
}

.mb-5 {
    margin-bottom : 3rem !important;
}

.marquee {
    align-items    : center;
    border-bottom  : 1px solid #58595b;
    color          : rgba(243, 241, 238, 0.6);
    display        : flex;
    flex           : 0 0 6.25vh;
    font-size      : 14px;
    overflow       : hidden;
    text-align     : left;
    text-transform : uppercase;
}

.marquee__inner {
    animation : now-marquee 20s linear infinite;
    display   : flex;
    transform : translate(var(--now-marquee-move-initial), 0);
    width     : fit-content;
}

.marquee__inner span {
    padding     : 0 10px;
    white-space : nowrap;
}

.main {
    align-items : center;
    display     : flex;
    flex-grow   : 1;
}

.main__inner {
    position  : absolute;
    left      : 50%;
    top       : 50%;
    transform : translate(-50%, -50%);
    width     : 100%;
}

@media only screen and (min-width : 1200px) {
    .main__inner img {
        transform : scale(0.85);
    }
}

.colophon {
    flex : 0 0 15vh;
}

@keyframes now-marquee {
    0% {
        transform : translate(var(--now-marquee-move-initial), 0);
    }

    100% {
        transform : translate(var(--now-marquee-move-final), 0);
    }
}