@import url('https://fonts.googleapis.com/css2?family=Luxurious+Script&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Quattrocento:wght@400;700&display=swap');


body {
    background: linear-gradient(135deg, #2e0d3c 0%, #684d7a 100%);
    margin: 0;
    padding: 0;

}

.background-div {
    position: relative;
    width: 100%;
    height: 95vh;
    padding: 0 0 1rem 0;
    background-image: url("./images/mb-father_hand.jpg");
    background-size: cover;
    background-position: center;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
}

.coming-soon-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    justify-items: center;
    align-items: center;
    margin: 2rem 0 0 0;
}

.coming-soon {
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    font-size: 6vw;
    color: white;
}

.line {
    content: '';
    display: flex;
    width: 85%;
    height: 1px;
    background: white;
    margin: .1rem 0 0 0;
}

.main-text {
    font-family: 'Luxurious Script', cursive;
    font-size: 22vw;
    color: white;

    margin: 0 0 0 -3rem;
    font-weight: normal;
}

.sub-text {
    font-family: 'Quattrocento', serif;
    font-size: 9.3vw;
    color: #cecece;

    margin: -1rem 0 1rem 1rem;
    font-weight: normal;
}

.purple-gradient {
    background: #270d34 0%;
    font-family: 'Montserrat', sans-serif;
    font-style: italic;
    font-size: 3.5vw;
    text-align: center;
    width: 90%;
    height: auto;
    opacity: 0.8;
    border-radius: .5rem;
}

.purple-gradient p {
    margin: 0;
    padding: 1rem;
    color: white;
}

@media screen and (min-width: 800px) {
    .background-div {
        height: 130vh;

    }

    .sub-text {
        margin: -3.8rem 0 1rem 1rem;
    }

    .purple-gradient {
        font-size: 1.9vw;
    }

}

@media screen and (min-width: 1024px) {

    .background-div {
        height: 100vh;
        background-image: url("./images/father_hand.jpg");

    }

}