/* small reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* global settings */

:root {
    
    --violet: hsl(257, 40%, 49%);
    --soft-magenta: hsl(300, 69%, 71%);
}

.wrapper {
    margin: auto;
    display: flex;
    flex-direction: column;
    gap: 8rem;
    padding: 3rem 3rem;
    max-width: 87rem;
}

body {
    background-color: var(--violet);
    background-image: url(../img/bg-mobile.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center top;
    font-family: "Open Sans";
    font-weight: 400;
}

main {
    display: flex;
    flex-direction: column;
    gap: 8rem;
}

nav {
    width: 70%;
    max-width: 25rem;
}

footer {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
}

img {
    display: inline-block;
    width: 100%;
    height: auto;
}

/* navbar */
nav img {
    width: 55%;
}


/* main */
.card-two {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
}

h1 {
    font-size: 3rem;
    text-align: center;
    color: #FFF;
    font-family: Poppins;
    font-weight: 600;
}

p {
    color: #FFF8FF;
    text-align: center;
    font-size: 2rem;

}

button {
    color:  hsla(257, 40%, 49%,50%);
    background-color: #FFF;
    padding: 1.2rem 8.8rem;
    border-radius: 2rem;
    font-size: 2rem;
    cursor: pointer;
    border: none;
}

button:hover {
    background-color: var(--soft-magenta);
    color: hsl(300, 100%, 98%);
}

/* footer */

svg {
    width: 3rem; 
    fill: white;
    cursor: pointer;
}

svg:hover {
    fill: var(--soft-magenta); 
}


@media (min-width: 75em) {

    body {
        background-image: url("../img/bg-desktop.svg");
        background-size: cover;
        background-position: center;
    }

    .wrapper {
        gap: 3rem;
    }

    main {
        flex-direction: row;
    }

    .card-one {
        flex: 1.2;
    }

    .card-two {
        gap: 1rem;
        align-self: center;
        flex: 1;
    }

    footer {
        justify-content: flex-end;
    }

    main {
        gap: 2rem;
    }

    h1,p {
        text-align: left;
        line-height: 1.3;
    }

    p {
        font-size: 1.35rem;
    }
    
    button {
        align-self:flex-start;
        padding: 1rem 4rem;

    }

}