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

html {
  box-sizing: border-box;
}

*,
*::after, 
*::before {
  box-sizing: inherit;
}

/************************* VARIABLES *************************/

:root {
  --Very-dark-magenta: hsl(300, 43%, 22%);
  --Soft-pink: hsl(333, 80%, 67%);
  --Dark-grayish-magenta: hsl(303, 10%, 53%);
  --Light-grayish-magenta: hsl(300, 24%, 96%);
  --White: hsl(0, 0%, 100%);
}

body {
  background: url(../images/bg-pattern-top-mobile.svg), url(../images/bg-pattern-top-desktop.svg);
  background-repeat: no-repeat;
  background-position: top left, bottom right;
  font-family: 'League Spartan', sans-serif;
}

.container {
  margin: 80px auto;
  display: flex;
  flex-direction: column;
}

/************************* HEADER *************************/

header h1 {
  color: var(--Very-dark-magenta);
  font-size: 30px;
  font-weight: 700;
  line-height: 30px;
  text-align: center;
  margin: 0 64px 30px 64px;
}

header p {
  color: var(--Dark-grayish-magenta);
  text-align: center;
  line-height: 25px;
  font-size: 14px;
  font-weight: 50px;
  margin: 0 28px 0 28px;
}

/************************* STARS *************************/

.starscontainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 30px;
}

.stars {
  background-color: var(--Light-grayish-magenta);
  border-radius: 4px;
  margin: 8px 0;
  width: 330px;
  height: 80px;
  padding: 15px;
  font-weight: 700;
  color: var(--Very-dark-magenta);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.stars .fivestars {
  min-width: 110px;
}

.stars .text {
  min-width: 240px;
  text-align: center;
}

/************************* CARDS *************************/

.cardscontainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
}

.cards {
  background-color: var(--Very-dark-magenta);
  border-radius: 10px;
  max-width: 330px;
  height: 250px;
  padding: 37px;
  margin: 16px 24px 0px 24px;
  color: var(--White);
  font-size: 12px;
  display: grid;
  grid-template-columns: 1fr 10fr;
}

.cards img {
  border-radius: 50%;
  width: 50px;
  margin-right: 20px;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.cards .name {
  font-weight: 700;
  grid-column: 2 / 3;
}

.cards .status {
  color: var(--Soft-pink);
  grid-column: 2 / 3;
}

.cards p {
  font-weight: 500;
  line-height: 20px;
  grid-column: 1 / 3;
  margin-top: 30px;
}

/************************* FOOTER *************************/
.attribution {
  font-size: 11px;
  text-align: center;
}
.attribution a {
  color: hsl(228, 45%, 44%);
}
/************************* MEDIA QUERY *************************/

/************************* >375PX *************************/
@media only screen and (min-width:376px) {
  .stars1 {
    align-self: flex-start;
  }
  
  .stars3 {
    align-self: flex-end;
  }

  .starscontainer {
    padding: 0 25px;
  }

  .card1 {
    align-self: flex-start;
  }

  .card3 {
    align-self: flex-end;
  }

  .cardscontainer {
    padding: 0 25px;
  }

}

/************************* >768PX *************************/

@media only screen and (min-width: 768px) {
  body {
    background: url(../images/bg-pattern-top-desktop.svg), 
    url(../images/bg-pattern-bottom-desktop.svg);
    background-repeat: no-repeat;
    background-position: top left, bottom right;
  }

  .stars {
    flex-direction: row;
    width: 444px;
    height: 50px;
    justify-content: center;
  }

  .cardscontainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .card1 {
    grid-column: 1 / 2;
    justify-self: center;
  }

  .card2 {
    grid-column: 2 / 3;
    justify-self: center;
  }

  .card3 {
    grid-column: 1 / 3;
    grid-row: 2 / 3;
    justify-self: center;
  }

}

/************************* >894PX *************************/

@media only screen and (min-width: 894px) {
  .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: 25px;
  }

  header {
    grid-column: 1 / 6;
  }

  .starscontainer {
    grid-column: 6 / -1;
  }

  .cardscontainer {
    grid-column: 1 / -1;
  }

  footer {
    grid-column: 1 / -1;
  }

}

/************************* >1160PX *************************/

@media only screen and (min-width: 1160px) {
  body {
    background-size: 500px;
  }

  .container {
    margin: 125px auto;
    max-width: 1110px;
  }

  .cardscontainer {
    display: flex;
    flex-direction: row;
    padding: 0;
    height: 320px;
  }

  .cards {
    margin: 0;
  }

}

/************************* >1440PX *************************/

@media only screen and (min-width: 1440px) {
  header {
    max-width: 430px;
    margin: 0;
  }

  header h1 {
    font-size: 45px;
    text-align: left;
    margin: 0;
    line-height: 50px;
  }

  header p {
    text-align: left;
    margin: 15px 0 30px 0;
  }

  .starscontainer {
    grid-column: 7 / -1;
    padding: 0;
  }

}