:root {
  color: rgb(25, 25, 25);
  background: rgb(238, 244, 255);
  --light: rgba(255, 255, 255, 1);
  --light-8: rgba(255, 255, 255, 0.8);
  --light-4: rgba(255, 255, 255, 0.4);
  --light-2: rgba(255, 255, 255, 0.2);
  --dark: #111;
  --dark-2: rgba(10, 10, 10, 0.2);
  --dark-8: rgba(10, 10, 10, 0.8);
  --light-element: rgba(255, 255, 255, 1);
  --light-2-element: rgba(0, 0, 255, 0.05);
  --d-gradient: linear-gradient(#fff 40%, rgba(#fff, 0));
  --gray-0-5: rgb(0, 0, 0, 0.05);
}

html {
  transition: color 300ms, background-color 300ms;
}

html[theme='dark-mode'] {
  color: rgb(220, 220, 220);
  background: linear-gradient(45deg, hsl(221deg 78% 6%), hsl(221deg 84% 12%));
  --light: rgba(10, 10, 10, 1);
  --light-8: rgba(10, 10, 10, 0.8);
  --light-4: rgba(10, 10, 10, 0.4);
  --light-2: rgba(10, 10, 10, 0.2);
  --dark: #fff;
  --dark-2: rgba(255, 255, 255, 0.2);
  --dark-8: rgba(255, 255, 255, 0.8);
  --light-element: rgb(9, 23, 49);
  --light-2-element: rgb(11, 36, 82);
  --d-gradient: linear-gradient(rgb(9, 23, 49) 40%, rgba(9, 23, 49, 0));
  --gray-0-5: rgba(255, 255, 255, 0.05);
}

html[theme='dark-mode'] input {
  color: #fff;
}

body {
  margin: 0;
  overflow: hidden;
}

*,
*:before,
*:after {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
    sans-serif;
  box-sizing: border-box;
}