/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.4.14,
* Autoprefixer: v10.4.7
* Browsers: last 4 version
*/

@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@400;500;700&display=swap");

*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

:root {
  --very-dark-magenta: hsl(300, 43%, 22%);
  --soft-pink: hsl(333, 80%, 67%);
  --dark-grayish-magent: hsl(303, 10%, 53%);
  --light-grayish-magenta: hsl(300, 24%, 96%);
  --white: hsl(0, 0%, 100%);
}

html {
  font-size: 10px;
}

body {
  margin: 20px 0;
  font-size: 1.5rem;
  font-family: "League Spartan", sans-serif;
  background-image: url("./images/bg-pattern-top-mobile.svg"),
    url("/images/bg-pattern-bottom-mobile.svg");
  background-repeat: no-repeat, no-repeat;
}

h1 {
  font-size: clamp(2.5rem, 4vw, 4rem);
  text-align: center;
  color: var(--very-dark-magenta);
}

article p {
  text-align: center;
  color: var(--dark-grayish-magent);
}

main {
  max-width: 100rem;
  padding: 0 1rem;
}

.review__card {
  border: 1px solid black;
  padding: 1.5rem 1.5rem;
  margin-top: 2rem;
  background-color: var(--very-dark-magenta);
  color: var(--white);
}

.review__details {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  gap: 2.5rem;
}

.review__comment {
  line-height: 1.4;
}

.buyer__info p {
  margin: 0;
}

.name {
  font-weight: 500;
}

.status {
  color: var(--soft-pink);
}

.img {
  border-radius: 50%;
  width: 4rem;
}

.ratings > div {
  text-align: center;
  margin-bottom: 1.5rem;
  padding: 1rem;
  background-color: var(--light-grayish-magenta);
  color: var(--very-dark-magenta);
  font-weight: 700;
}

.review__card,
.ratings > div {
  border-radius: 0.5rem;
}

.ratings p {
  margin: 0.5rem 0 0;
}

@media only screen and (min-width: 600px) {
  body {
    min-height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-image: url("./images/bg-pattern-top-desktop.svg"),
      url("images//bg-pattern-bottom-desktop.svg");
    background-position: top left, bottom right;
  }

  .top__section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: baseline;
    -ms-flex-align: baseline;
    align-items: baseline;
    gap: 5rem;
  }

  .ratings > div {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  article p,
  h1 {
    text-align: left;
    padding-right: 5rem;
  }

  article,
  .ratings {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }

  .star__container {
    padding: 0 20px;
  }

  .ratings__second {
    margin-left: 3rem;
  }

  .ratings__third {
    margin-left: 6rem;
  }

  .reviews {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 2rem;
  }

  .review__second {
    margin-top: 6rem;
  }

  .review__third {
    margin-top: 10rem;
  }
}