@import url("general-sans.css");

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700&display=swap");

:root {
  --primaryInigo: rgb(99 102 241);
  --primaryText: rgb(30 56 81);
  --secondaryTextLight: rgb(156 163 175);
  --secondayTextDark: rgb(16 45 68);
}

body {
  font-family: "GeneralSans-Medium", "Open Sans", sans-serif;
  font-size: 1.2rem;
}

.general-xlight {
  font-family: "GeneralSans-Extralight", "Open Sans", sans-serif;
}
.general-light {
  font-family: "GeneralSans-Light", "Open Sans", sans-serif;
}
.general-medium {
  font-family: "GeneralSans-Medium", "Open Sans", sans-serif;
}
.general-semiBold {
  font-family: "GeneralSans-Semibold", "Open Sans", sans-serif;
}
.general-bold {
  font-family: "GeneralSans-Bold", "Open Sans", sans-serif;
}

::selection {
  background-color: var(--primaryInigo);
  color: white;
}

.bgIndigo {
  background-color: var(--primaryInigo);
}

.navbar-nav .nav-link:hover,
.nav-title:hover {
  color: var(--primaryInigo);
}

.hero-title {
  color: var(--primaryText);

  text-transform: uppercase;
}

.hero-description {
  color: var(--secondaryTextLight);
}

.section-title {
  color: var(--primaryText);

  font-size: 4rem;
}

.technologies p {
  color: var(--secondaryTextLight);

  transition: 0.3s;
}

.technologies:hover p {
  color: var(--secondayTextDark);

  cursor: pointer;
}

.card {
  border-color: var(--primaryText);

  scale: 0.95;

  transition: 0.3s;

  overflow: hidden;
}

.card:hover .project-tile {
  border-color: var(--primaryInigo);

  scale: 1.1;

  transition: 0.3s;
}

.project-navigation .card-title {
  color: var(--secondayTextDark);
}

.footer-list {
  list-style-type: none;
}

.footer-list li {
  background-color: rgb(238, 238, 238);

  border-radius: 1rem;

  align-items: center;

  height: 70px;
  width: 75px;

  padding-top: 0.4rem;

  filter: grayscale(1) opacity(0.5);

  transition: 0.3s;
}

.footer-list li:hover {
  filter: grayscale(0) opacity(1);
}

a {
  text-decoration: none;
}

.tech-name {
  color: var(--primaryInigo);
}

.contact-form {
  box-shadow: 40px 0px 20px -35px rgba(39, 39, 39, 0.5),
    -40px 0px 20px -35px rgba(38, 38, 38, 0.5);
}

.contact-submit {
  background-color: var(--primaryInigo);
}

/* Styling for ScrollBar */

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

::-webkit-scrollbar-thumb {
  background-color: var(--primaryText);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primaryInigo);
}

::-webkit-scrollbar-track {
  background-color: var(--secondaryTextLight);
}

/* Selction Highlight */

.highlight-indigo {
  color: var(--primaryInigo);
}

.tech-stack-logo {
  height: 164px;
}

.tech-stack-logo > img {
  max-height: 164px;
  max-width: 164px;
  width: auto;
  height: auto;
}