/* import font-style from google*/
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&family=Roboto+Mono:wght@300;400;700&display=swap');

/* Styles are divided into following sections:
- containers 
- backgrounds
- borders
- logo
- navigation
- city section
- headers
- texts
*/

/* ------ containers ------ */
.container-width {
    max-width: 90rem;
    margin: auto;
}

.hero-container {
    display: flex;
}

/* ------ backgrounds ------ */
.dark-background {
    background-color: #ececec;
}

/* ------ borders ------ */
.white-border-top {
    border-top: 1px solid #ececec;
}

.white-border-bottom {
    border-bottom: 1px solid #ececec;
}

.red-border-top {
    border-top: 1px solid #791b1b;
}

.red-border-bottom {
    border-bottom: 1px solid #791b1b;
}

/* ------ logo ------ */
.logo {
    height: 4.5rem;
    margin: 0 2.5rem 0 2.5rem;
}

/* ----- navigation ------ */
.navigation {
    display: flex;
    align-items: center;
    height: 10rem;
}

.navigation-item {
    width: 10rem;
    border-left: 1px solid #ececec;
    text-align: center;
}

.navigation-item a {
    text-decoration: none;
}

.navigation-item-last {
    border-right: 1px solid #ececec;
    margin-right: 7.5rem;
}

/* ------ city section ------ */
.city-item {
    display: flex;
    flex-wrap: wrap;
    min-height: 12.5rem;
    padding-left: 5rem;
}

.city-item-text {
    flex: 0 1 50%;
    line-height: 12.5rem;
    padding-right: 1.5rem;
    word-break: break-all;
    font-size: 8vw !important;
}

.city-item-subtext {
    flex: 0 1 50%;
    padding: 2.5rem 2.5rem 2.5rem 0;
    max-width: 22rem;
}

/* ------ headers ------ */
.epic-thin-header {
    font-family: 'Roboto Mono', sans-serif;
    font-size: 7.5rem;
    font-weight: 300;
    color: #6c0000;
    margin: 0;
}

.epic-header {
    font-family: 'Roboto Mono', sans-serif;
    font-size: 2.5rem;
    color: #6c0000;
    margin: 0;
}

.epic-bold-header {
    font-family: 'Roboto Mono', sans-serif;
    font-size: 2.5rem;
    font-weight: bold;
    color: #6c0000;
    margin: 0;
}

/* ------ texts ------ */
.menu-text {
    color: #6C0000;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    line-height: 10rem;
    margin: 0;
}

.hero-text {
    margin: 5rem 0 6.25rem 5rem;
}

.regular-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #b58282;
    margin: 0;
}

.regular-link {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #6c0000;
    margin: 0;
}

.regular-link:hover {
    color: #000;
}

.dark-bold-text {
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #fff;
    margin: 0;
}

.dark-text {
    margin: 0;
    color: #888888;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
}