@import 'variables';
@import 'animations';

.header {
    background: $brand-black
        url('@oceanprotocol/art/mantaray/mantaray-back.svg') no-repeat center
        4rem;
    background-size: cover;
    width: 100%;
    padding: $spacer * 2 0;
    min-height: 30rem;
    color: $brand-white;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.headerLogo,
.headerTitle,
.headerDescription {
    animation: fadeInUp .6s ease-out backwards;
}

.headerLogo {
    width: 5rem;
    height: 5rem;
}

.headerTitle {
    margin-bottom: $spacer;
    font-size: $font-size-h2;
    animation-delay: .2s;

    @media (min-width: $break-point--small) {
        font-size: $font-size-h1;
    }
}

.headerDescription {
    margin-bottom: $spacer * 4;
    max-width: $break-point--small;
    margin-left: auto;
    margin-right: auto;
    animation-delay: .4s;

    @media (min-width: $break-point--small) {
        font-size: $font-size-large;
    }
}
