body {
    background-color: #f0f0f0;
}

.content-banner {
    width: 100%;
    display: flex;
    justify-content: center;
    background: #14437b;
}

.content-banner__image {
    display: block;
    width: 80%;
    height: auto;
}

@media (min-width: 1000px) {
    .content-banner__image {
        width: 800px;
        max-width: 100%;
    }
}


/* ========================================
   Navbar
   ======================================== */

.content-navbar {
    background-color: #fffffff8;
    border-bottom: 1px solid #e5e5e5;
    z-index: 1020;
}


/* ========================================
   Full-width navbar container
   ======================================== */

.content-navbar__inner {
    width: 100%;
    min-height: 56px;

    display: flex;
    align-items: center;

    padding-left: 16px;
    padding-right: 16px;
}


/* ========================================
   Desktop navigation group
   ======================================== */

.content-navbar__desktop-nav {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
}


/* ========================================
   Brand
   ======================================== */

.navbar-brand {
    display: none;
}

.navbar-brand__image {
    display: none;
}


/* ========================================
   Navigation links
   ======================================== */

.content-navbar .navbar-collapse {
    flex-grow: 0;
}

.content-navbar .navbar-nav {
    display: flex;
    align-items: center;

    gap: 12px;
}

.content-navbar .nav-link {
    font-size: 1rem;
    font-weight: 500;
    color: #1f1f1f;
    white-space: nowrap;

    padding: 8px 0;
}


/* ========================================
   Hamburger
   ======================================== */

.content-navbar .navbar-toggler {
    border: none;

    padding: 4px 8px;

    margin-left: auto;

    flex-shrink: 0;
}

.content-navbar .navbar-toggler:focus {
    box-shadow: none;
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 991.98px) {

    .content-navbar .navbar-brand {
        display: block;
        font-weight: 600;
        white-space: nowrap;

        margin: 0 12px 0 0;
        padding: 8px 0;
    }

    .navbar-brand__image {
        display: block;

        width: auto;
        max-width: 100%;
        height: 50px;

        object-fit: contain;

        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }

    /*
     * Brand stays on the left.
     * Hamburger stays on the right.
     */

    .content-navbar__desktop-nav {
        width: auto;
        justify-content: flex-start;
    }

    .content-navbar .navbar-brand {
        margin-right: 0;
    }


    /*
     * The collapsed menu becomes a full-width
     * dropdown underneath the navbar.
     */

    .content-navbar .navbar-collapse {
        position: absolute;

        top: 100%;
        left: 0;

        width: 100%;

        background-color: #ffffff;

        border-bottom: 1px solid #e5e5e5;

        padding: 12px 16px;
    }

    .content-navbar .navbar-nav {
        flex-direction: column;
        align-items: flex-start;

        gap: 0;

        width: 100%;
    }

    .content-navbar .nav-link {
        padding: 8px 0;
    }

}

.welcome {
    display: flex;
    justify-content: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.welcome h1 {
    font-size: large;
    font-weight: bold;
    font-family: Georgia, 'Times New Roman', Times, serif;
    text-align: center;
}

.content-poster {
    width: 100%;
    display: flex;
    justify-content: center;
}

.content-poster__image {
    display: block;
    width: 80%;
    height: auto;
}

@media (min-width: 800px) {
    .content-poster__image {
        width: 800px;
        max-width: 70%;
    }
}


.tournament-information, .content-greeting {
    width: 100%;
    padding: 2rem;

    display: flex;
    flex-direction: column;
    align-items: center;

}

.tournament-information__image, .content-greeting__image {
    display: block;

    width: 100%;
    max-width: 900px;
    height: auto;
}


/* ========================================
   Registration CTA
   ======================================== */

.registration-cta {
    width: 100%;

    padding: 5rem 1.5rem;

    background-color: #14437b;

    text-align: center;

    margin-top: 2rem;
}


.registration-cta__container {
    max-width: 800px;

    margin: 0 auto;
}


.registration-cta__title {
    margin: 0 0 1rem;

    font-size: 2.25rem;
    font-weight: 600;

    color: #ffffff;
}


.registration-cta__text {
    margin: 0 0 2rem;

    font-size: 1.1rem;
    line-height: 1.6;

    color: #ffffff;
}


.registration-cta__button {
    display: inline-block;

    padding: 0.8rem 2rem;

    border: 2px solid #ff363d;
    border-radius: 4px;

    background-color: #ed1c24;
    color: #ffffff;

    text-decoration: none;

    font-size: 1rem;
    font-weight: 600;

    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}


.registration-cta__button:hover {
    background-color: #ff0000;
    color: #ffffff;

    transform: scale3d(1.1,1.1,1.1);
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 575.98px) {

    .registration-cta {
        padding: 4rem 1.25rem;
    }

    .registration-cta__title {
        font-size: 1.9rem;
    }

    .registration-cta__text {
        font-size: 1rem;
    }

    .registration-cta__button {
        width: 100%;
        max-width: 300px;
    }

}