/*Grid, flexbox, estructura principal*/
body {
  margin: var(--spacing-md);
}

header {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--text-color);
}

header>.navbar {
  display: flex;
  gap: var(--spacing-lg);
  padding: var(--spacing-md);
}

header>.themeToggle__btn {
  padding-left: var(--spacing-lg);
  border: none;
  background-color: transparent;
  color: var(--text-color);
  margin: var(--spacing-md);
}

main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

main>.hero,
main>.projects,
main>.about {
  max-width: 80%;
  margin: var(--spacing-xl);
  gap: var(--spacing-md);
  color: var(--text-color);
}

main>.hero {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-xl);
  margin: var(--spacing-xl);
}

main>.hero>.hero__profilePic {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

main>.hero>.hero__profilePic>.hero__profilePic__img {
  width: 600px;
  height: 250px;
  border-radius: 100%;
  box-shadow: var(--box-shadow);
}

main>.hero>.hero__container>.hero__description {
  width: 80%;
}

main>.hero>.hero__container>.hero__description>.hero__description--highlight {
  color: var(--text-color-secondary);
}

main>.hero>.hero__container>.hero__button {
  border: none;
  display: inline-flex;
  background-color: var(--button-color);
  color: var(--background-color);
  padding: var(--spacing-sm);
  border-radius: 12px;
}

main>.projects {
  width: 55%;
  display: inline-flex;
  justify-content: center;
  gap: var(--spacing-md);
}

main>.projects>.projects__container>.projects__items {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-md);
  margin: var(--spacing-md) auto;
}

main>.projects>.projects__container>.projects__items>.projects__items__img>img {
  width: 200px;
  height: 160px;
  border-radius: 5px;
}

main>.projects>.projects__container>.projects__items>.projects__items__details>.projects__items__skills {
  gap: var(--spacing-md);
}

main>.projects>.projects__container>.projects__items>.projects__items__details>.projects__items__skills>.items__skills {
  color: var(--secondary-color);
  font-weight: bold;
  font-size: var(--font-size-xs);
  padding: var(--spacing-xs);
  border-radius: 12px;
}

main>.projects>.projects__container>.projects__items>.projects__items__details>.projects__items__btn {
  border: none;
  background-color: var(--button-color);
  color: var(--background-color);
  padding: var(--spacing-sm);
  margin: var(--spacing-xs);
  border-radius: 12px;
}

main>.projects>.projects__container>.projects__allProjects {
  display: flex;
  justify-content: center;
  margin: var(--spacing-md);
}

main>.projects>.projects__container>.projects__allProjects>.projects__allProjects__btn {
  border: none;
  display: inline-flex;
  background-color: var(--button-color);
  color: var(--background-color);
  padding: var(--spacing-md);
  border-radius: 12px;
  margin: var(--spacing-lg);
  font-weight: bold;
}

main>.about {
  display: inline-flex;
  justify-content: center;
  margin: var(--spacing-xl);
  gap: var(--spacing-md);
}

main>.about>.about__container {
  width: 45%;
}

main>.about>.about__container>.about__skills {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--spacing-sm);
  margin: var(--spacing-md);
}

main>.about>.about__profilePic>.about__profilePic__img {
  border-radius: 20%;
  width: 200px;
  height: 180px;
  padding: var(--spacing-md);
  align-self: center;
}

footer {
  margin: var(--spacing-xl);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--spacing-md);
  color: var(--text-color);
}

footer>.footer__description>.footer__copyright>.footer__github__user {
  color: var(--text-color-secondary);
}

footer>.footer__container {
  display: flex;
  justify-content: cennter;
  margin: var(--spacing-xl);
  gap: var(--spacing-md);
}

footer>.footer__container>.footer__container__link {
  color: var(--text-color-secondary);
  padding: var(--spacing-xs);
  cursor: pointer;
}