@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@200;400&display=swap');

:root, :root[data-theme='dark'] {
  --primary-color: #F0F0F0;

  --primary-bg-color: #111217;
  --secondary-bg-color: #28292E;
  --primary-border-color: #28292E;
	--secondary-border-color: #56575A;

  --title-color: #F0F0F0;
  --text-color: #9A9A9C;
  --link-color: #9A9A9C;
  --icon-color: #C7C8C9;
}

:root[data-theme='light'] {
  --primary-color: #0B0B0F;

	--primary-bg-color: #E9E9E9;
	--secondary-bg-color: #C7C8C9;
	--primary-border-color: #C7C8C9;
	--secondary-border-color: #9A9A9C;

	--title-color: #0B0B0F;
	--text-color: #28292E;
	--link-color: #28292E;
	--icon-color: #56575A;
}

html[data-theme='dark'] .technologies__logo, 
html[data-theme='dark'] .tech-img,
html[data-theme='light'] .scrollTop img {
  filter: invert(1);
}

body {
  background: var(--primary-bg-color);
  font-family:'Inter', Tahoma, Geneva, Verdana, sans-serif;
  color: var(--text-color);
}

::-webkit-scrollbar {
  width: 0.5rem;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--secondary-bg-color);
  border-radius: 50rem;
}

a {
  text-decoration: none;
  color: var(--text-color);
}

a:hover {
  color: var(--primary-color);
}

i {
  color: var(--icon-color);
}

b {
  font-weight: 400;
}

h1 {
  font-size: 2.5rem;
  font-weight: 200;
}

h2 {
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.4rem;
}

h3 {
  font-size: 1.55rem;
  text-align: left;
}

h4 {
  color: var(--primary-color);
  font-weight: 400;
  font-size: 1.15rem;
  text-align: left;
}

h1, h2, h3 {
  font-family: 'League Spartan', Tahoma, Geneva, Verdana, sans-serif;
  text-transform: uppercase;
  color: var(--title-color);
  font-weight: 200;
}

p, span, li {
  font-size: 1rem;
}

p {
  text-align: justify;
}