:root {
    --color-a: #9C0D38;
    --color-b: #F7ACCF;
    --color-c: #FBFFF1;
    --color-d: #FA9F42;
    --color-e: #0D1B1E;
}

/* Borrowed the responsive container sizes from Bootstrap */
@media (min-width: 576px) {
    main {
        width: 540px;
    }
}

@media (min-width: 768px) {
    main {
        width: 720px;
    }
}

@media (min-width: 1024px) {
    main {
        width: 960px;
    }
}

@media (min-width: 1280px) {
    main {
        width: 1140px;
    }
}

@media (min-width: 1536px) {
    main {
        width: 1440px;
    }
}

@keyframes marquee {
    0% {
        transform: translate(calc(50vw + 50%));
    }
    100% {
        transform: translate(calc(-50vw - 50%));
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    overflow-x: hidden;
    background-color: #f7accf;
    background-image: urL("img/bg.jpg");
    background-size: cover;
    background-blend-mode: darken;
    background-attachment: fixed;
    backdrop-filter: blur(0.5vh);
    display: flex;
    flex-direction: column;
    font-family: "Roboto Slab", serif;
    font-optical-sizing: auto;
    font-style: normal;
}

header {
    position: sticky;
    background-color: var(--color-a);
    background-image: radial-gradient(rgb(0, 0, 0) 14%, transparent 22%), radial-gradient(rgb(0, 0, 0) 14%, transparent 22%);
    background-position: 0 0, 4px 4px;
    background-size: 8px 8px;
    border-bottom: solid black 2px;
    height: 7.25em;
    width: 100%;
    display: flex;
    align-items: center;
    padding-right: 1em;
    z-index: 99;
}

#wordmark {
    position: absolute;
    width: 11em;
}

@media (prefers-reduced-motion: no-preference) {
    body:not(.no-animate) aside span {
        animation: marquee 15s infinite linear;
    }
}

.flex-spacer {
    flex-grow: 1;
}

.navbar-link {
    color: var(--color-c);
    height: 100%;
    text-decoration: none;
    font-size: 1.25em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
    margin-right: 1.5em;
}

.navbar-link:hover, .navbar-link.active {
    border-bottom: solid white 2px;
}

.navbar-link.active {
    color: var(--color-b);
}

.navbar-sm {
    color: var(--color-c);
    margin-right: 0.75em;
    transition: color 0.25s;
}

.navbar-sm:hover, footer a:hover {
    color: var(--color-b);
}

aside {
    background-color: var(--color-d);
    padding: 2em;
    text-align: center;
    font-size: 1.25em;
}

aside span {
    display: inline-block;
    white-space: nowrap;
}

main {
    background-color: var(--color-c);
    padding: 3em 5em;
    align-self: center;
    margin-bottom: 10em;
}

main h1 {
    margin-top: 0;
}

footer {
    background-color: var(--color-e);
    color: var(--color-c);
    padding: 3em;
    display: flex;
    box-shadow: 0 50vh 0 50vh var(--color-e);
}

.img-container {
    display: flex;
    justify-content: center;
    margin-top: 2em;
}

hr {
    margin-top: 3em;
}

#footer-links {
    text-align: right;
}

footer h1, footer h2, footer h3 {
    margin: 0;
}

footer a {
    color: var(--color-c);
    transition: color 0.25s;
}

.title, .subtitle {
    text-align: center;
}

.title {
    font-size: 2.5em;
}

.title > span {
    font-size: 0.8em;
}

.subtitle {
    font-size: 1.5em;
}

.heading-text {
    font-family: "Bebas Neue", sans-serif;
    text-transform: uppercase;
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 1em 0;
    font-size: 5em;
    color: var(--color-c);
    -webkit-text-stroke: 1.5px black;
    letter-spacing: 0.1rem;
}

#map {
    border: none;
    border-top: solid black 2px;
    display: block;
    height: 30em;
}