@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
html{
  box-sizing: border-box;
}
*,*:before,*:after{
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}
:root{
  --lime-green: hsl(163, 72%, 41%);
  --bright-red: hsl(356, 69%, 56%);
  --facebook: hsl(208, 92%, 53%);
  --twitter: hsl(203, 89%, 53%);
  --insta-gradient: linear-gradient(to right, hsl(37, 97%, 70%), hsl(329, 70%, 58%));
  --youtube: hsl(348, 97%, 39%);
  --border-radius: 6px;

  /* Light Mode  */
  --clr-primary-bg: hsl(0, 0%, 100%);
  --clr-primary-topBg: hsl(225, 100%, 98%);
  --clr-accent-card: hsl(227, 47%, 96%);
  --text-clr1: hsl(228, 12%, 44%);
  --text-clr2: hsl(230, 17%, 14%);
  --toggle: hsl(228, 12%, 44%);
  --hover: hsl(226, 37%, 88%);
}
body.dark{
  /* Dark Mode  */
  --clr-primary-bg: hsl(230, 17%, 14%);
  --clr-primary-topBg: hsl(232, 19%, 15%);
  --clr-accent-card: hsl(228, 28%, 20%);
  --text-clr1: hsl(228, 12%, 44%);
  --text-clr2: hsl(0, 0%, 100%);
  --toggle: linear-gradient(to right, hsl(210, 78%, 56%), hsl(146, 68%, 55%) 60%);
  --hover: hsl(227, 29%, 32%);
}
body{
  font-family: Inter, sans-serif;
  font-size: 14px;
  min-height: 100vh;
  background-color: var(--clr-primary-bg);
}
 /* Helper Classes  */
 .flex{
  display: flex;
 }
 .align-cn{
  align-items: center;
 }
 .jus-spb{
  justify-content: space-between;
 }
 .jus-cn{
  justify-content: center;
 }
h1,
h2,
h3,
h4{
  margin-top: 0;
}
.clr1{
  color: var(--text-clr1);
}
.clr2{
  color: var(--text-clr2);
}
.green{
  color: var(--lime-green);
}
.red{
  color: var(--bright-red);
}

.top{
  background-color: var(--clr-primary-topBg);
  height: 30vh;
  width: 100%;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}
.wrapper{
   width: 90%; 
  max-width: 1020px;
  margin: 0 auto;
}
.dashboard-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.5rem;
  padding-top: 1.5rem;
  margin-bottom: 2.5rem;
}
.theme-container{
  display: flex;
  align-items: center;
}
.switch{
  position: relative;
  height: 24px;
  width: 46px;
  display: inline-block;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.switch input{appearance: none;}
.slider{
  position: absolute;
  inset: 0;
  background: var(--toggle);
  border-radius: 35px;
}
.slider:before{
  position: absolute;
  content: '';
  height: 20px;
  width: 18px;
  top: 2px;
  left: 2px;
  border-radius: 50%;
  transition: transform 200ms ease-in-out;
  transform: translateX(23px);
  background-color: var(--clr-primary-bg);
}
.slider.active::before{
  transform: translateX(0);
}
.input:checked + .slider{
  background-color: hsl(228, 12%, 44%);
}
.input:checked + .slider:before{
  transform: translateX(50px);
}
.theme-name{
  margin-right: 10px;
  cursor: pointer;
  font-weight: 700;
}
.desc{
  font-weight: 700;
}
.card{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background-color: var(--clr-accent-card);
  color: var(--text-clr1);
  padding-inline: 1rem;
  padding-block: 1.2rem;
  border-radius: var(--border-radius);
}
.card:hover{
  background-color: var(--hover);
}
.user-info{
  gap: 6px;
  margin-bottom: 10px;
  padding-inline: 20px;
}
.user-info img{
  width: 18px;
  height: 18px;
}
.user-info .user{
  font-weight: 700;
  font-size: 14px;
}
.stats{
  margin-bottom: 21px;
}
.stats .num{
  font-size: 3.5rem;
  font-weight: 700;
  margin-bottom: 0;
}
.stats .followers-text{
  letter-spacing: 4px;
  text-transform: uppercase;
}
.tracker{
  display: flex;
  align-items: center;
  gap: 4px;
  padding-bottom: 10px;
}
.border-fb--tw{
  border-top: 4px solid var(--facebook);
}
.border-instagram{position: relative;}
.border-instagram .border{
  position: absolute;
  content: '';
  width: 100%;
  height: 4px;
  top: 0;
  background: var(--insta-gradient);
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
}
.border-youtube{
  border-top: 4px solid var(--youtube);
}
.grid{
  display: grid;
  gap: 15px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.overview{
  margin-top: 3.7rem;
  padding-bottom: 2.5rem;
}
.overview h2{
  margin-bottom: 21px;
}
.overview-cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}
.overview-card{
  background-color: var(--clr-accent-card);
  border-radius: var(--border-radius);
  padding: 1.5rem;
}
.overview-card:hover{
    background-color: var(--hover);
}
.overview-heading{
  margin-bottom: 2rem;
}
.overview-heading .label{
  font-weight: 700;
}
.overview-heading img{
  width: 18px;
  height: 18px;
}
.overview-body{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.number{
  font-size: 2em;
  font-weight: 700;
}
.tracker,
.track{
  font-weight: 700;
}
@media (max-width: 550px) {
  .dashboard-header{
    flex-direction: column;
  }
  .tittle{
    border-bottom: 1px solid var(--hover);
    width: 100%;
    padding-bottom: 1rem;
    margin-bottom: 1.5rem;
  }
  .theme-container{
    justify-content: space-between;
    width: 100%;
  }
}
.attribution{
  text-align: center;
  margin-block: 30px;
  color: var(--text-clr2);
}
.attribution a{
  color: var(--text-clr2);
  display: inline-block;
  padding-inline-end: 10px;
  padding-block: 16px;
  text-decoration: none;
}
.attribution a:hover{
  text-decoration: underline;
  cursor: pointer;
}