@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap');

:root {
    /* Primary */
    --Very-Dark-Magenta: #511F50;
    --Soft-Pink: hsl(333, 80%, 67%);
    /* Neutral */
    --Dark-Grayish-Magenta: hsl(303, 10%, 53%);
    --Light-Grayish-Magenta: hsl(300, 24%, 96%);
    --White: hsl(0, 0%, 100%);
}

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

body {
    font-family: "League Spartan", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;

    background-image: url("./assets/images/bg-pattern-top-mobile.svg");
    background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}

main {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100dvh;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 6rem 1.5rem;
}

    /* TITLE */

.title {
    display: flex;
    flex-direction: column;
}

.title h1 {
    font-size: 3rem;

    color: var(--Very-Dark-Magenta);
    text-align: center;
}

.title p {
    color: var(--Dark-Grayish-Magenta);

    padding: 1.5rem 0;
    text-align: center;
    
    font-size: 1.2rem;
    font-weight: 500;
}


    /* REVIEWS */

.review {
    padding: 0.5rem;
    margin: 1rem 0;
    width: 87vw;
    height: 8vh;
    border-radius: 0.5rem;

    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;

    color: var(--Very-Dark-Magenta);
    background-color: var(--Light-Grayish-Magenta);
}

.review h3 {
    font-size: 1.1rem;
    font-weight: 800;
}

.stars-rate {
    display: flex;
    gap: 0.5rem;
}

    /* COMMENTS */

.comments {
    margin-top: 2rem;

    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.comment {
    border-radius: 0.5rem;
    padding: 2rem;
    min-width: 87vw;
    min-height: 29vh;

    display: flex;
    flex-direction: column;
    justify-content: space-around;

    background-color: var(--Very-Dark-Magenta);
}

.user-info {
    display: flex;
    align-items: center;
}

.user-info img {
    margin-right: 1rem;
    border-radius: 100%;
    width: 15%;
}

.user-details {
    display: flex;
    flex-direction: column;
    row-gap: 0.5rem;
}

.name {
    color: var(--White);
    font-weight: 700;
}

.verified {
    color: var(--Soft-Pink);
    font-weight: 400;
    font-size: 1.1rem;
}

.testimony {
    margin-top: 1rem;

    color: var(--White);
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.5rem;
    
}

    /* FOOTERS  */

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

footer p {
    text-align: center;
}


    /* PC DESINGN */

@media (min-width: 900px) {
    body {
        background-image: url("./assets/images/bg-pattern-top-desktop.svg"), url("./assets/images/bg-pattern-bottom-desktop.svg");
        background-repeat: no-repeat;
        background-position: top left, bottom right;
        background-size: 45%, 70%;
    }

    main {
        min-height: 95vh;
    }

    .container {
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-rows: 50% 50%;
    }

    /* TITLE */
    
    .title {
        max-width: 25vw;
        min-height: 28vh;
    }

    .title h1 {
        text-align: left;
        font-size: 3.5rem;
    }

    .title p {
        padding: 1.5rem 0 0 0;
        text-align: left;
        line-height: 1.5rem;
    }


    /* REVIEW */

    .review {
        padding: 1.5rem;
        max-width: 28rem;
        max-height: 3.5rem;

        flex-direction: row;
        justify-content: flex-start;
        gap: 2rem;
    }

    .review h3 {
        font-size: 1.1rem;
        font-weight: 700;
    }

    .review:nth-child(2) {
        transform: translateX(2.5rem);
    }

    .review:nth-child(3) {
        transform: translateX(4.5rem);
    }


    /* COMMENTS */

    .comments {
        flex-direction: row;
        justify-content: space-evenly;
        grid-column: span 2;
        gap: 1.5rem
    }

    .comment {
        min-width: 0;

        max-width: 25rem;
        min-height: 16rem;

        padding: 2.5rem;
    }

    .comment:nth-child(2) {
        transform: translateY(1rem);
    }

    .comment:nth-child(3) {
        transform: translateY(2rem);
    }


    /* user */

    .user-info img {
        width: 15%;
    
    }
}