body {
  font-size: 15px;
  font-family: 'Spartan', sans-serif;
  margin: 0;
}



.attribution {
  font-size: 11px;
  text-align: center;


}
.attribution a {
  color: hsl(228, 45%, 44%);
}

.stars {
  background-color: hsl(300, 24%, 96%);
  border-radius: 10px;
  padding: 15px;
  margin: 10px;
  max-width: 70%;
}
.stars p {
  display: inline-block;
  color: hsl(300, 43%, 22%);
  padding: 0 20px;
  margin: 0;
  font-weight: 700;
}



.name {
  margin-bottom: 0;
  color: hsl(0, 0%, 100%);

}

.verified {
  margin-top: 2px;
  color: hsl(303, 10%, 53%);
}



.profile {
  display: grid;
  padding: 30px;
  background: hsl(300, 43%, 22%);
  border-radius: 10px;
  color: hsl(300, 24%, 96%);
  margin: 20px;

}



.profile-img {
  border-radius: 100%;
  float: left;
  margin-right: 30px;
  max-width: 80px;

}

.wrapper-up {
  display: flex;
  justify-content: space-between;

}

.wrapper-bottom {
  display: flex;
}


.wrapper-ratings {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 50%;
}

.wrapper-info {
  width: 45%;
}

.wrapper-main {
  display: flex;
  flex-direction: column;
}


.main-container {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  width: 80%;
  height: 100%;
  margin: auto;
}

.center::before {
  content: "";
  background-image: url(../images/bg-pattern-top-desktop.svg);
  height: 362px;
  width: 584px;
  position: absolute;
  left: 0;
  top: 0;
  background-size: 100% 100%;
}

.center::after {
  /* width="1085" height="673" */
  content: "";
  background-image: url(../images/bg-pattern-bottom-desktop.svg);
  height: 673px;
  width: 1085px;
  right: 0;
  bottom: 0;
  position: absolute;

}

h1 {
  font-weight: 700;
  color: hsl(300, 43%, 22%);
  font-size: 4vw;
}

h3 {
  font-weight: 300;
  color: hsl(303, 10%, 53%);

}

#colton-profile {
  margin-left: 0;
}
#irene-profile {
  position: relative;
  top: 20px;
}

#anne-profile {
  position: relative;
  top: 40px;
  margin-right: 0;
}


#guru-rating {
  margin-left: 50px;

}

#best-tech-rating {
  margin-left: 100px;
}


.bkg-img {
position: absolute;
}

.center {
  height: 100%;
  width:100%;
  display: fixed;
  position: absolute;

}


@media only screen and (max-width: 600px) {

  .main-container {
    justify-content: normal;
    text-align: center;
  }

  .wrapper-ratings {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
  }

  .wrapper-info {
    text-align: center;
    width: 100%;
  }
  .wrapper-bottom{
    flex-direction: column;
    margin: auto;
    width: 100%;
    justify-content: space-between;

  }
  .wrapper-up {
    flex-direction: column;
  }

  #guru-rating {
    margin-left: auto;

  }

  #best-tech-rating {
    margin-left: auto;
  }

  .stars {
    margin: 10px auto;
    max-width: 100%;
  }

  .stars p {
    display: inline-block;
  }

  .profile {
    display: grid;
    padding: 30px;
    margin:  10px 0px;

  }


  #irene-profile {
    position: relative;
    top: 0px;
  }

  #anne-profile {
    position: relative;
    top: 0px;
    margin-right: 0;
  }

  .center {
    position: relative;
  }

  .center::before {
    width: 100vw;

  }
  .center::after {
    content: none;
  }

  h1 {
    font-size: 9vw;
    padding: 50px 10px 30px;
  }

}