html {
  font-size: 62.5%;
}

:root {
  --clr-pri: hsl(0, 0%, 100%);
  --clr-pri-spt: hsl(300, 24%, 96%);
  --clr-sec: hsl(300, 43%, 22%);
  --clr-sec-spt: hsl(333, 80%, 67%);
  --clr-txt: hsl(303, 10%, 53%);
}

body {
  font-size: 1.6rem;
  font-family: "League Spartan", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  width: 100vw;
  min-height: 100vh;
  background-color: var(--clr-pri);
  color: var(--clr-txt);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


  background-image: url('images/bg-pattern-top-mobile.svg'), url('images/bg-pattern-bottom-mobile.svg');
  background-position: top left, bottom right;
  background-size: contain;
  background-repeat: no-repeat;
}

/*-------MAIN STYLING FOR CONTAINER------*/
.container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: 50rem;
  min-height: 100%;
  padding: 4rem 2rem;
  gap: 3rem;
}

.top-flex {
  display: flex;
  text-align: center;
  flex-direction: column;
  gap: 3rem;
}

.left-top-flex h1 {
  margin-top: 0;
  color: var(--clr-sec);
  font-size: 3.5rem;
  line-height: .8;
}

p {
  line-height: 1.4;
}

/*Rating*/
.rating-flex {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rating-flex .box {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
  border-radius: .7rem;
  background-color: var(--clr-pri-spt);
}

.rating-star {
  display: flex;
  justify-content: center;
  gap: .8rem;
}

.rating-txt {
  font-weight: 600;
  font-size: 1.5rem;
  color: var(--clr-sec);
}


/*Review*/
.review-flex {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.review-flex .box {
  border-radius: .7rem;
  background-color: var(--clr-sec);
  color: var(--clr-pri);
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.review-flex .profile-container {
  display: flex;
  gap: 1.5rem;
  height: 3.5rem;
  align-items: flex-start;
}

.review-flex p {
  font-size: 1.4rem;
}

.profile-container .profile-img {
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
}

.profile-container .name-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: .3rem;
  gap: .2rem;
}

.profile-container {
  color: var(--clr-pri);
}

.name {
  font-weight: 550;
  font-size: 1.4rem;
}

.status {
  font-size: 1.4rem;
  color: var(--clr-sec-spt);
}

/*---------COMPONENTS-----------*/
svg {
  width: 1.5rem;
  height: 1.5rem;
}

/*---------RESPONSIVE DESIGN-----------*/
@media (min-width: 380px) {
  .left-top-flex h1 {
    margin: 0 4rem 2rem;
  }
}

@media (min-width: 768px) {
  body {
    background-image: url('images/bg-pattern-top-desktop.svg'), url('images/bg-pattern-bottom-desktop.svg');
    background-position: top left, bottom right;
    background-size: 35%, 75%;
    background-repeat: no-repeat;
  }

 .container {
    display: flex;
    max-width: 98%;
    padding: 4rem 2rem;
    gap: 3rem;   
  }

  .top-flex {
    text-align: left;
    flex-direction: row;
    /*gap: 3rem;*/
  }

  .left-top-flex {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    padding-right: 5rem;
  }

  .left-top-flex h1 {
    margin-right: 6rem !important;
  }

  .left-top-flex, .rating-flex {
    width: 100%;
  }

  .rating-flex {
    margin-top: 2rem;
  }

  .rating-flex .box {
    text-align: center;
  }

  .review-flex {
    flex-direction: row;
  }

  .review-flex .box {
    padding: 3.3rem 3rem;
  }

  .review-flex .profile-container {
    gap: 2rem;
  }

  .review-flex .box p {
    line-height: 1.6;
    font-size: 1.3rem;
  }

  .name, .status {
    font-size: 1.3rem;
  }


  .left-top-flex h1 {
    margin: 0;
    font-size: 4rem;
    line-height: 0.9;
    font-weight: 700;
    letter-spacing: -.2rem;
  }

  p {
    font-size: 1.4rem;
  }
}

@media (min-width: 900px) {
  .container {
    gap: 7rem;
  }

  .left-top-flex {
    padding-right: 14rem;
  }

  .rating-flex {
    gap: 1.5rem;
  }

  .rating-flex .box {
    flex-direction: row;
    padding: 1.5rem 2rem;
    max-width: 36rem;
    gap: 2rem;
  }

  .rating-flex .box-2 {
    align-self: center;
  }

  .rating-flex .box-3 {
    align-self: flex-end;
  }

  .rating-star {
    gap: .5rem;
  }

  .rating-txt {
    font-size: 1.4rem;
  }

  /*Review*/
  .review-flex {
    gap: 2.5rem;
    height: 23rem;
    align-items: flex-start;
  }

  .review-flex .box-2 {
    align-self: center;
  }

  .review-flex .box-3 {
    align-self: flex-end;
  }
}

@media (min-width: 1000px) {
  .container {
    max-width: 100rem;
  }

  .left-top-flex {
    padding-right: 10rem;
  }

  .left-top-flex h1 {
    margin-right: 8rem;
    font-size: 5rem;
  }

  p, .rating-txt {
    font-size: 1.6rem;
  }

  .review-flex .box p. {
    font-size: 1.4rem;
  }
}

.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: var(--clr-sec-spt);
}