* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.fallowers-text-footer {
  justify-content: space-between;
  display: flex;
  width: 100%;
  bottom: 0px;
  color: var(--text-secondary);
  margin-bottom: -9px;
}
.fallowers-text-footer p {
  font-weight: 600;
}

.loading {
  --bg: hsl(0, 0%, 100%);
  --bg-top: hsl(225, 100%, 98%);
  --bg-card: hsl(227, 47%, 96%);

  --input-bg: hsl(230, 22%, 74%);

  --text: hsl(228, 12%, 44%);
  --text-secondary: hsl(230, 17%, 14%);
}

.light {
  --bg: hsl(0, 0%, 100%);
  --bg-top: hsl(225, 100%, 98%);
  --bg-card: hsl(227, 47%, 96%);

  --input-bg: hsl(230, 22%, 74%);

  --text: hsl(228, 12%, 44%);
  --text-secondary: hsl(230, 17%, 14%);
}

.dark {
  --bg: hsl(230, 17%, 14%);
  --bg-top: hsl(232, 19%, 15%);
  --bg-card: hsl(228, 28%, 20%);

  --text: hsl(228, 34%, 66%);
  --text-secondary: hsl(0, 0%, 100%);
}

:root {
  --input-bg: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%));

  --font-weight-normal: 400;
  --font-weight-bold: 700;

  --border-top-card: hsl(228, 34%, 66%);

  --lime-green: hsl(163, 72%, 41%);
  --bright-red: hsl(356, 69%, 56%);

  font-size: 14px;
  font-family: "Inter", sans-serif;
}

.mb-4 {
  margin-bottom: 12px !important;
}
.align-center {
  text-align: center;
}
.align-right {
  text-align: right;
}
.text-light {
  color: var(--text-secondary);
}

.facebook {
  --border-top-card: hsl(195, 100%, 50%);
}

.twitter {
  --border-top-card: hsl(203, 89%, 53%);
}

.youtube {
  --border-top-card: hsl(348, 97%, 39%);
}

.instagram {
  --border-top-card: linear-gradient(
    to right,
    hsl(37, 97%, 70%),
    hsl(329, 70%, 58%)
  );
}

.blue-headline {
  --border-top-card: linear-gradient(
    to right,
    hsl(188.31deg 100% 40.23%)
  );
}

.green-headline {
  --border-top-card: linear-gradient(
    to right,
    hsl(127.9deg 100% 31.57%),
    hsl(163.9deg 98.13% 43.79%)
  );
}
.yellow-headline {
  --border-top-card: linear-gradient(
    to right,
    hsl(78, 100%, 32%),
    hsl(163.9deg 98.13% 43.79%)
  );
}

.positive {
  color: var(--lime-green);
}

.negative {
  color: var(--bright-red);
}

html,
body,
header,
main,
.followers,
.followers-card,
.followers-card_border {
  width: 100%;
}

html,
body,
.toggle-container,
.followers,
.followers-card,
.followers-card_user,
.fallowers-today-number,
.overview-today_card_header,
.overview-today,
.overview-today_card_main {
  display: flex;
}

html,
body,
.toggle-container,
.followers-card,
.fallowers-today-number,
.overview-today_card_header {
  align-items: center;
}

html,
body,
.followers-card {
  flex-direction: column;
}

html,
body {
  min-height: 100vh;
  background-color: var(--bg);
}

body {
  padding: 2rem;
}

h3 {
  font-size: 1.5rem;
}

h1,
h2,
.followers-number_value,
.overview-today_card_main_number {
  color: var(--text-secondary);
  font-weight: var(--font-weight-bold);
}

h1 {
  font-size: 1.7rem;
}

h2 {
  font-size: 2rem;
}

p,
label {
  color: var(--text);
  font-weight: var(--font-weight-bold);
}

main,
header {
  max-width: 1200px;
}

header {
  margin-bottom: 3rem;
}

main {
  margin: 1.5rem;
}

.title-container {
  padding-bottom: 2rem;
  margin-bottom: 1rem;
  border-bottom: 2px solid var(--bg-card);
}

.toggle-container,
.overview-today_card_header,
.overview-today_card_main {
  justify-content: space-between;
}

.toggle-container {
  gap: 12px;
}

#dark {
  appearance: none;
  position: relative;
  padding: 2.5px;

  width: 50px;
  height: 25px;

  background: var(--input-bg);
  border-radius: 1000px;
  transition: 0.3s ease-in-out;
}

#dark::before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: var(--bg-card);
  border-radius: 50%;
  transition: 0.3s;
}

#dark:checked::before {
  transform: translateX(25px);
}

.followers {
  margin-bottom: 2rem;
  gap: 24px;
  flex-wrap: wrap;
}

.followers-card {
  padding: 2rem;

  background-color: var(--bg-card);
  border-radius: 15px;

  flex: 1 1 282px;
  gap: 1rem;

  overflow: hidden;
  position: relative;
}

.followers-card_border {
  position: absolute;
  top: 0;
  left: 0;
  height: 6px;
  background: var(--border-top-card);
}
.followers-kapasitas {
  position: absolute;
  bottom: 0;
  left: 0;
}

.followers-card_user {
  gap: 8px;
}

.followers-number {
  text-align: center;
}

.followers-number_text {
  text-transform: uppercase;
  letter-spacing: 0.5rem;
}

.fallowers-today-number {
  gap: 6px;
}

.followers-number_value {
  font-size: 5rem;
}

.followers-today-number_text {
  font-weight: var(--font-weight-bold);
}

.overview-today {
  margin-top: 1.5rem;
  flex-wrap: wrap;
  gap: 24px;
}

.overview-today_card {
  padding: 2rem;
  background-color: var(--bg-card);
  border-radius: 15px;
  flex: 1 1 282px;
}

.overview-today_card_header {
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
}

.overview-today_card_main_number {
  font-size: 2.5rem;
}

.overview-today_card_main {
  align-items: flex-end;
}

@media (min-width: 875px) {
  header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .title-container {
    border: none;
    padding: 0;
    margin: 0;
  }
}