@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    --magenta: hsl(300, 43%, 22%);
    --softPink: hsl(333, 80%, 67%);
    --darkMagenta: hsl(303, 10%, 53%);
    --lightMagenta: hsl(300, 23.80%, 95.90%);
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: "League Spartan";
}

body {
    font-size: 15px;
    background-image: url(./images/bg-pattern-top-desktop.svg), url(./images/bg-pattern-bottom-desktop.svg);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-wrap: wrap;
    padding: 50px;
}

.header {
    width: 30%;
    padding: 20px 0;
}

h1 {
    font-size: 3rem;
    color: var(--magenta);
    padding: 20px 0;
}

.header p {
    color: var(--darkMagenta);
    line-height: 1.2rem;
}

.ratings {
    width: 70%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.ratings > div {
    background-color: var(--lightMagenta);
    padding: 10px 40px;
    border-radius: 5px;
    color: var(--magenta);
    font-weight: 700;
    margin: 10px;
}

.stars, .rating {
    display: inline-block;
}

.rating {
    text-align: center;
    width: 200px;
}

.rating1 {
    position: relative;
    right: 2rem
}

.rating3 {
    position: relative;
    left: 2rem
}


.reviews {
    display: flex;
    color: white;
    margin-top: 50px;
}

.card {
    position: relative;
    background-color: var(--magenta);
    margin: 1rem;
    padding: 2rem;
    border-radius: 5px;
}

.card1 {
    bottom: 1rem
}

.card3 {
    top: 1rem
}

.profile {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.profile img {
    width: 50px;
    border-radius: 50%;
}

.info {
    margin: 0 20px;
}

.info h3 {
    color: var(--softPink)
}

@media screen and (max-width: 800px) {
    body {
        text-align: center;
        background-image: url(./images/bg-pattern-top-mobile.svg), url(./images/bg-pattern-bottom-mobile.svg);
        background-repeat: no-repeat;
        background-size: cover;
        display:block;
        padding: 20px;
    }

    .header {
        width: 100%
    }

    .stars, .rating {
        display: block;
        margin: 5px auto;
    }
    
    .ratings {
        display: inline-block;
        width: 100%
    }

    .rating1, .rating3 {
        position: static;
    }

    .reviews {
        flex-direction: column;
    }

    .card {
        position: static;
        text-align: left;
    }
}