:root{
      --clr-dark: #070a13;
      --clr-light: #f1f5f9;
      --clr-slate400: #94a3b8;
      --clr-slate600: #475569;
      --clr-slate800: #1e293b;
      --clr-rose: #e11d48;
      --clr-indigo: #4f46e5;
      /* rgb rose = 	rgb(225, 29, 72) */
      /* rgb indigo = rgb(79, 70, 229) */

      /* SIZES */
      --size-xxs: 0.5rem ;
      --size-xs: 0.75rem;
      --size-sm: 0.875rem;
      --size-base: 1rem;
      --size-lg: 1.125rem;
      --size-xl: 1.25rem;
      --size-2xl: 1.5rem;
      --size-3xl: 1.875rem;
      --size-4xl: 2.25rem;
      --size-5xl: 3rem;
      --size-6xl: 3.75rem;
      --size-7xl: 6rem;
      --size-8xl: 6rem;
      --size-9xl: 8rem;
      --size-10xl: 10rem;
}


*{
      margin: 0;
      line-height: calc(1em + 0.5rem);
      padding: 0;
}

html{
      scroll-behavior: smooth;
}
body{
      transition: all 0.9s ease-in-out !important;
      background-color: var(--clr-dark);
      font-family: 'General Sans', sans-serif;
      color: var(--clr-light)
}
.light-mode{
      --clr-light: #070a13;
      --clr-dark: #f1f5f9;
      --clr-slate400: #1e293b;
      --clr-slate600: #1e293b;
      --clr-slate800: #1e293b;
}
img, picture, video, canvas, svg{
      display: block;
      max-width: 100%;
      user-select: none;
}
button{
      display: inline-block;
      padding: 0;
      border:none;
      background: none;
      cursor: pointer;
      color: var(--clr-light);

}
a{
      color:var(--clr-rose)
}
strong{
      color:var(--clr-indigo)
}


/* Custom Scrollbar */
body::-webkit-scrollbar {
      width: 8px;
}
 
body::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px rgba(0, 0, 0, 0);
}
 
body::-webkit-scrollbar-thumb {
  background-color: var(--clr-rose);
  outline: 1px solid var(--clr-rose);
}