.welcome {
    font-family: Helvetica;
    height: 100%;
    overflow: auto;
    position: relative;

    .header {
        align-items: center;
        background: $welcomePageHeaderBackground;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        text-align: center;

        .header-text {
            display: flex;
            flex-direction: column;
            height: 286px;
            justify-content: space-around;
            margin-top: 120px;
            width: 645px;
        }

        .header-text-title {
            color: $welcomePageTitleColor;
            font-size: 48px;
            letter-spacing: -1px;
            line-height: 58px;
        }

        .header-text-description {
            color: $welcomePageDescriptionColor;
            font-size: 20px;
            line-height: 28px;
            opacity: 0.8;
        }

        .header-image {
            background-image: url(../images/welcome_page/curves.png);
            background-size: contain;
            height: 209px;
            position: absolute;
            width: 1070px;
        }

        #new_enter_room {
            align-items: center;
            display: flex;
            margin-top: 25px;
            position: relative;
            z-index: 2;

            .enter-room-input {
                display: inline-block;
                margin-right: 15px;
                width: 350px;
            }
        }
    }

    .welcome-page-button {
        font-size: 16px;
    }
}

.welcome.with-content {
    .header {
        height: 552px;
    }
    .header-image {
        left: -61px;
        top: 401px;
    }
}

.welcome.without-content {
    .header {
        height: 100%;
    }
    .header-image {
        bottom: -20px;
        left: 0;
    }
}