@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* # Front-end Style Guide


#### Light Theme

- Toggle: hsl(230, 22%, 74%)

### Neutral

#### Dark Theme

- Very Dark Blue (BG): hsl(230, 17%, 14%)
- Very Dark Blue (Top BG Pattern): hsl(232, 19%, 15%)
- Dark Desaturated Blue (Card BG): hsl(228, 28%, 20%)
- Desaturated Blue (Text): hsl(228, 34%, 66%)
- White (Text): hsl(0, 0%, 100%)

#### Light Theme

- White (BG): hsl(0, 0%, 100%)
- Very Pale Blue (Top BG Pattern): hsl(225, 100%, 98%)
- Light Grayish Blue (Card BG): hsl(227, 47%, 96%)
- Dark Grayish Blue (Text): hsl(228, 12%, 44%)
- Very Dark Blue (Text): hsl(230, 17%, 14%)

 */


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.page {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  background-color: hsl(0, 0%, 100%);
}


/* DARK MODE */

.page--dark,
.page--dark .switch__button::before {
  background-color: hsl(230, 17%, 14%);
}

.page--dark .switch__button:hover::before {
  background-color: hsl(230, 17%, 30%);
}

/* white text */
.page--dark .header__title,
.page--dark .socials-today__title,
.page--dark .social-card__followers-no,
.page--dark .social-card-today__number {
  color: hsl(0, 0%, 100%);
}

/* blue text */
.page--dark .header__followers,
.page--dark .switch,
.page--dark .social-card__username,
.page--dark .social-card-today__type {
  color: hsl(228, 34%, 66%);
}

.page--dark .social-card,
.page--dark .social-card-today {
  background-color: hsl(228, 28%, 20%);
}

.page--dark .social-card:hover,
.page--dark .social-card-today:hover {
  background-color: hsl(228, 28%, 25%);
}



/* DARK MODE END */


.main {
  padding: 1.5em;
}

/* HEADER */

.header {
  margin: 1.5em 0;
  overflow: auto;
}

.header__title {
  font-size: 1.7em;
}

.header__followers {
  color: hsl(228, 12%, 44%);
  font-size: 1.2em;
  margin-top: .2em;
  margin-bottom: 1.5em;
}

.divider {
  border-color: hsl(230, 22%, 74%);
}

.switch {
  display: flex;
  color: hsl(228, 12%, 44%);
  font-size: 1.2em;
  font-weight: 700;
  margin: 1em 0;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.switch__button {
  cursor: pointer;
  position: relative;
  appearance: none;
  display: inline-block;
  background-color: hsl(230, 22%, 74%);
  width: 70px;
  height: 35px;
  border: none;
  border-radius: 50px;
}

.switch__button:before {
  position: absolute;
  content: "";
  display: inline-block;
  background-color: hsl(0, 0%, 100%);
  top: 3px;
  right: 5px;
  width: 28px;
  height: 28px;
  border-radius: 50px;
  transition: .1s ease-out;
}

.switch__button:checked {
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
}

.switch__button:not(:checked):hover {
  background: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));
}

.switch__button:checked:before {
  right: 37px;
}

/* SOCIAL MEDIA OVERALL */

.socials-overall {
  margin: 2em 0;
}

.social-card {
  position: relative;
  background-color: hsl(227, 47%, 96%);
  padding: 2.5em;
  margin-bottom: 2em;
  text-align: center;
  border-radius: .5em;
  border-top: 6px solid black;
}

.social-card:hover {
  background-color: hsl(229, 12%, 90%);
}

.social-card--fb {
  border-color: hsl(208, 92%, 53%);
}

.social-card--tw {
  border-color: hsl(203, 89%, 53%);
}

.social-card--in {
  border: none;
  overflow: hidden;
}

.social-card--in:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
}

.social-card--yt {
  border-color: hsl(348, 97%, 39%);
}

.social-card__account {
  display: flex;
  justify-content: center;
  align-items: center;
}

.social-card__username {
  font-size: .7em;
  color: hsl(228, 12%, 44%);
  margin-left: .5em;
}

.social-card__followers {
  margin: 1.8em 0;
}

.social-card__followers-no {
  display: block;
  font-size: 5em;
  font-weight: 700;
}

.social-card__followers-lbl {
  display: block;
  color: hsl(228, 12%, 44%);
  text-transform: uppercase;
  font-size: 1em;
  font-weight: 400;
  letter-spacing: .5em;
}

.social-card__varation {
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(163, 72%, 41%);
  font-size: 1em;
  font-weight: 700;
}

.social-card__varation--dec {
  color: hsl(356, 69%, 56%);
}

.social-card__varation-arrow {
  margin-right: .3em;
}

/* OVERVIEW TODAY */
.socials-today {
  margin-top: 5em;
}

.socials-today__title {
  color: hsl(228, 12%, 44%);
  margin-bottom: 2em;
}

.social-card-today {
  background-color: hsl(227, 47%, 96%);
  padding: 2.5em;
  margin-bottom: 2em;
  text-align: center;
  border-radius: .5em;
}

.social-card-today:hover {
  background-color: hsl(229, 12%, 90%);
}

.social-card-today__type {
  display: flex;
  justify-content: space-between;
  color: hsl(228, 12%, 44%);
}

.social-card-today__varation {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-top: 3em;
}

.social-card-today__number {
  font-size: 3em;
  font-weight: 700;
}

.social-card-today__percentages {
  display: flex;
  justify-content: center;
  align-items: center;
  color: hsl(163, 72%, 41%);
  font-size: 1em;
  font-weight: 700;
}

.social-card-today__percentages--dec {
  color: hsl(356, 69%, 56%);
}

.social-card-today__percentages-arrow {
  margin-right: .3em;
}


@media (min-width: 450px) {
  .switch {
    width: max-content;
    float: right;
  }

  .switch__button {
    margin-left: 1em;
  }
}

@media (min-width: 600px) {

  .page::before {
    content: "";
    z-index: -1;
    position: absolute;
    display: block;
    width: 100%;
    height: 17.8em;
    background: hsl(225, 100%, 98%);
  }

  .page--dark:before {
    background: hsl(232, 19%, 15%);
  }

  .main {
    max-width: 1440px;
    margin: 0 auto;
  }

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    vertical-align: middle;
  }

  .header__followers {
    margin: 0;
  }

  .divider {
    display: none;
  }

  .switch {
    margin: 0;
  }

  .socials-overall {
    display: grid;
    gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(21em, 1fr));
  }


  .socials-today {
    display: grid;
    margin-top: 2em;
    gap: 2em;
    grid-template-columns: repeat(auto-fill, minmax(21em, 1fr));
  }

  .socials-today__title {
    grid-column: 1 / -1;
    margin: 0;
  }

  .social-card-today {
    margin: 0;
  }
}