@import url("../_css_variables.scss");
@import url("../fonts.css");

.WelcomeScreenSlide {
    display: flex;
    flex: 1;
    flex-flow: column;
    justify-content: flex-end;

    .WelcomeScreenSlide__image {
        align-self: center;
    }

    .WelcomeScreenSlide__title {
        color: var(--center-channel-color);
        font-family: 'Metropolis';
        font-size: 64px;
        font-weight: 600;
        letter-spacing: -1.6px;
        line-height: 88px;
        text-align: center;
        margin: 16px 0;
    }

    .WelcomeScreenSlide__subtitle {
        color: rgba(var(--center-channel-text-rgb), 0.72);
        font-family: Open Sans;
        font-size: 16px;
        font-weight: 400;
        line-height: 24px;
        text-align: center;
        max-width: 628px;
        margin: auto;
    }

    &.WelcomeScreenSlide--main {

        max-width: 582px;
        .WelcomeScreenSlide__title {
            font-size: 93px;
        }
    }

    &.WelcomeScreenSlide--darkMode {
        .WelcomeScreenSlide__title {
            color: var(--button-color);
        }

        .WelcomeScreenSlide__subtitle {
            color: rgba(var(--button-color-rgb), 0.72);
        }
    }
}