@import '../styles.css';

.home #page-main {
    background: url('../../img/bg-dots.svg') no-repeat -15rem -30rem;
}

.home-hero {
    text-align: center;
    max-width: 60rem;
    margin-top: 2rem;
}

.home-hero__secondary-title {
    font-size: 2.8rem;
    font-family: var(--font-home-hero);
    line-height: 1.8;
    margin: 2rem auto;
    font-weight: 300;
}

.home-hero__buttons-section {
    display: flex;
    justify-content: center;
}

.home-hero__buttons-section .btn + .btn {
    margin-left: 4rem;
}

/* SVG styles */
.home-hero__buble {
    animation: scale 1s ease-in-out 100ms forwards;
    position: relative;
    margin-bottom: 4rem;
    transform: scale(0);
}
.home-hero__title {
    position: absolute;
    font-size: 3.4rem;
    top: 58%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: hsla(0, 100%,100%,0.85);
    line-height: 1.2;
    text-align: center;
    text-shadow: 1px 1px 2px hsla(0, 0%,0%,0.5);
}
.home-hero__buttons-section {
    margin: 4rem 0;
}
.home-hero__title mark {
    color: hsla(0, 0%,100%, 0.95);
}
/* desktop only viewport */
@media (min-width: 48.0625rem) {
    .home #page-main {
        background-position: -2rem -20rem;
        background-size: cover;
    }

    .home-hero__title {
        font-size: 5rem;
        top: 56%;
    }

    .home-hero__secondary-title {
        font-size: 3rem;
    }
}