@import "_theme.scss";

BannerOverlay {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    z-index: 60;
    font-family: $font-display;

    .banner {
        margin-top: 220px;
        flex-direction: column;
        align-items: center;
        transition: transform 0.35s bounce-out, opacity 0.35s ease-out;
    }

        .banner:intro {
            opacity: 0;
            transform: translateY( -70px ) scale( 0.5 );
        }

        .banner:outro {
            opacity: 0;
            transform: scale( 1.35 );
            transition: transform 0.3s ease-in, opacity 0.3s ease-in;
        }

    .banner-title {
        font-weight: 800;
        font-size: 96px;
        color: $white;
        text-stroke: 20px $ink;
        text-shadow: 8px 8px 0 rgba( $ink, 0.35 );
    }

    .banner-sub {
        margin-top: 4px;
        font-weight: 800;
        font-size: 32px;
        letter-spacing: 8px;
        color: $ink;
    }
}