/*
Breakpoints based on design (one card (media-today or media-total has the width of 255px on dsktp dsgn)
*/
/*
$breakpoint argument choices:
-mob-land
-desktop

*/
:root {
  --color-background: hsl(0, 0, 100%);
  --color-background--dark: hsl(230, 17%, 14%);
  --color-font: hsl(228, 12%, 44%);
  --color-font--dark: hsl(228, 34%, 66%);
  --color-font-secondary: hsl(230, 17%, 14%);
  --color-card-background: hsl(227, 47%, 96%);
  --color-card-background--dark: hsl(228, 28%, 20%);
  --color-card-background--hover: hsl(228, 33%, 91%);
  --color-card-background--hover--dark: hsl(228, 25%, 27%);
  --color-followers: hsl(228, 12%, 44%);
  --color-followers--dark: hsl(228, 34%, 66%);
  --color-toggle: hsl(230, 22%, 74%);
  --color-toggle-dark: linear-gradient(225deg, #40db82 0%, #388fe7 98.02%);
  --color-toggle-dark-circle: hsl(228, 25%, 27%);
  --color-white: hsl(0, 0%, 100%);
  --color-lime-green: hsl(163, 72%, 41%);
  --color-bright-red: hsl(356, 69%, 56%);
  --color-facebook: hsl(208, 92%, 53%);
  --color-twitter: hsl(203, 89%, 53%);
  --color-insta: linear-gradient(
    225deg,
    #df4896 0%,
    #ee877e 50.91%,
    #fdc366 100%
  );
  --color-youtube: hsl(348, 97%, 39%);
  --header-border-style: 1px solid hsl(230, 19%, 60%);
  --header-border-style--dark: 1px solid hsl(228, 25%, 27%); }

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

html {
  font-size: 62.5%; }

body {
  box-sizing: border-box; }

.main {
  padding: 3.6rem 2.4rem 4.5rem 2.5rem; }
  @media (min-width: 72.4375em) {
    .main {
      padding-right: 0;
      padding-left: 0;
      width: 111rem;
      margin: 0 auto;
      position: relative; } }

body.dark {
  background-color: var(--color-background--dark); }
  body.dark .main .heading-primary {
    color: var(--color-white); }
  body.dark .main .header {
    border-bottom: var(--header-border-style--dark); }
    @media (min-width: 72.4375em) {
      body.dark .main .header {
        border: none; } }
  body.dark .main .dark-mode__toggle-container:hover + .dark-mode__text {
    color: var(--color-white); }
  body.dark .main .total .media-total {
    background-color: var(--color-card-background--dark); }
    body.dark .main .total .media-total .followers__amount {
      color: var(--color-white); }
    body.dark .main .total .media-total .followers__label {
      color: var(--color-followers--dark); }
    body.dark .main .total .media-total:hover {
      background-color: var(--color-card-background--hover--dark); }
  body.dark .main .today .media-today {
    background-color: var(--color-card-background--dark); }
    body.dark .main .today .media-today__heading {
      color: inherit; }
    body.dark .main .today .media-today__amount {
      color: var(--color-white); }
    body.dark .main .today .media-today:hover {
      background-color: var(--color-card-background--hover--dark); }
  body.dark .main .heading-secondary--today {
    color: var(--color-white); }

body {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
  background-color: var(--color-background);
  color: var(--color-font); }
  body.dark {
    color: var(--color-font--dark); }

.heading-primary {
  font-size: 2.8rem;
  color: var(--color-font-secondary); }

.heading-secondary {
  color: inherit; }

.heading-secondary--total {
  font-size: 1.4rem; }

.heading-secondary--today {
  font-size: 2.4rem;
  margin-bottom: 2.7rem; }
  @media (min-width: 72.4375em) {
    .heading-secondary--today {
      margin-bottom: 2.4rem; } }

.dark-mode {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  margin-bottom: 4rem; }
  @media (min-width: 72.4375em) {
    .dark-mode {
      position: absolute;
      top: 4.5rem;
      right: 0;
      margin: 0; } }
  .dark-mode__text {
    font-weight: bold;
    color: inherit;
    margin-right: auto; }
    @media (min-width: 72.4375em) {
      .dark-mode__text {
        margin-right: 1.2rem; } }
  .dark-mode__toggle-container {
    position: relative;
    width: 4.8rem;
    height: 2.4rem; }
  .dark-mode__toggle-label {
    display: block;
    width: 100%;
    height: 100%;
    background: var(--color-toggle);
    border-radius: 1.2rem;
    cursor: pointer; }
    .dark-mode__toggle-label:before {
      position: absolute;
      float: right;
      top: 25%;
      right: 0;
      content: "";
      height: 5%;
      width: 0%;
      border-radius: 1.2rem;
      background: var(--color-toggle-dark); }
    .dark-mode__toggle-label:after {
      position: absolute;
      top: 0.3rem;
      right: 0.4rem;
      display: inline-block;
      content: "";
      height: 1.8rem;
      width: 1.8rem;
      border-radius: 50%;
      background: var(--color-white);
      transition: transform 0.3s; }
  .dark-mode__toggle-checkbox:checked + .dark-mode__toggle-label:after {
    transform: translateX(-2.2rem);
    background: var(--color-toggle-dark-circle); }
  .dark-mode__toggle-checkbox:checked + .dark-mode__toggle-label:before, .dark-mode__toggle-label:hover:before {
    top: 0;
    display: inline-block;
    content: "";
    height: 100%;
    width: 100%;
    background: linear-gradient(225deg, #40db82 0%, #388fe7 98.02%);
    animation: fill-mode-toggle-btn 0.1s ease-out; }
  .dark-mode__toggle-checkbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1; }

@keyframes fill-mode-toggle-btn {
  0% {
    height: 0;
    width: 0; }
  39% {
    height: 0;
    width: 0; }
  40% {
    height: 100%;
    width: 40%; }
  100% {
    height: 100%;
    width: 100%; } }

.followers {
  display: flex;
  flex-direction: column;
  align-items: center; }
  .followers__amount {
    font-size: 5.6rem;
    letter-spacing: -0.036em;
    line-height: 4.8rem;
    color: var(--color-font-secondary);
    margin-bottom: 0.9rem; }
  .followers__label {
    font-size: 1.2rem;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.4166em;
    margin-right: -0.4166em;
    color: var(--color-followers); }

.media-today {
  position: relative;
  background-color: #f0f2fa;
  height: 12.5rem;
  border-radius: 5px;
  margin-bottom: 1.6rem;
  cursor: pointer; }
  @media (min-width: 38.6875em) {
    .media-today {
      width: calc(50% - 1.5rem); }
      .media-today:nth-child(odd) {
        margin-right: 3rem; } }
  @media (min-width: 72.4375em) {
    .media-today {
      width: 25.5rem; }
      .media-today:not(:nth-child(4n)) {
        margin-right: 3rem; } }
  .media-today__heading {
    font-size: 1.4rem;
    color: inherit;
    position: absolute;
    top: 2.7rem;
    left: 2.4rem; }
  .media-today__amount {
    font-size: 3.2rem;
    color: var(--color-font-secondary);
    position: absolute;
    left: 2.4rem;
    bottom: 1.9rem; }
  .media-today .social-icon {
    position: absolute;
    top: 2.6rem;
    right: 3.1rem; }
  .media-today .trend {
    position: absolute;
    right: 3rem;
    bottom: 2.4rem; }
  .media-today:hover {
    background-color: var(--color-card-background--hover); }

.media-total {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 21.6rem;
  width: 100%;
  background-color: var(--color-card-background);
  border-radius: 5px;
  margin-bottom: 2.4rem;
  cursor: pointer; }
  @media (min-width: 38.6875em) {
    .media-total {
      width: calc(50% - 1.5rem); }
      .media-total:nth-child(odd) {
        margin-right: 3rem; } }
  @media (min-width: 72.4375em) {
    .media-total {
      width: 25.5rem;
      margin-bottom: 0; }
      .media-total:not(:last-child) {
        margin-right: 3rem; } }
  .media-total--facebook {
    border-top: 4px solid var(--color-facebook); }
  .media-total--twitter {
    border-top: 4px solid var(--color-twitter); }
  .media-total--instagram {
    position: relative; }
    .media-total--instagram:after {
      position: absolute;
      top: 0;
      content: "";
      display: inline-block;
      width: 100%;
      height: 4px;
      background-image: var(--color-insta);
      border-top-left-radius: 5px;
      border-top-right-radius: 5px; }
  .media-total--youtube {
    border-top: 4px solid var(--color-youtube); }
  .media-total__heading {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    color: inherit;
    margin-bottom: 2.8rem; }
  .media-total .social-icon {
    margin-right: 0.8rem; }
  .media-total .followers {
    margin-bottom: 2.5rem; }
  .media-total:hover {
    background-color: var(--color-card-background--hover); }

.social-icon {
  height: 2rem;
  width: 2rem; }

.trend {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold; }
  .trend--positive {
    color: var(--color-lime-green); }
  .trend--negative {
    color: var(--color-bright-red); }
  .trend__icon {
    height: 0.4rem;
    width: 0.8rem;
    margin-right: 0.4rem; }

.header {
  padding-bottom: 2.4rem;
  border-bottom: var(--header-border-style);
  margin-bottom: 1.6rem; }
  @media (min-width: 72.4375em) {
    .header {
      position: relative;
      padding: 0;
      border: none;
      margin-bottom: 4.6rem; } }

.total {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 4.6rem; }

@media (min-width: 38.6875em) {
  .today {
    display: flex;
    flex-wrap: wrap; }
    .today > * {
      margin-bottom: 2.4rem; } }