/* Colors */
:root {
  --blue: #2f80ed;
  --grey-1: #333333;
  --grey-2: #4f4f4f;
  --grey-3: #828282;
  --grey-4: #c4c4c4;
  --grey-5: whitesmoke;
  --grey-6: #e0e0e0;
}

body {
  background-color: var(--grey-5);
}

div {
  background-color: white;
}

/* Personal information */
.text-content .personal-information h1 {
  font-weight: 600;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--grey-2);
}

.text-content .personal-information h2 {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--grey-3);
}

.text-content .contact-information .contact span {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--grey-2);
}

.text-content .contact-information .contact .material-icons {
  margin-right: 1rem;
}

.text-content .personal-description p {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--grey-2);
}

/* Central section */
.central-section,
.central-section-column {
  background-color: var(--grey-5);
}

/* Tech stack */
.central-section .tech-stack h2 {
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 2.2rem;
  text-transform: uppercase;
  color: var(--grey-2);
}

.central-section .tech-stack span {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-2);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.central-section .tech-stack .tech .tech-bar {
  background-color: var(--grey-4);
}

.central-section .tech-stack .tech .tech-bar .tech-progress {
  background-color: var(--blue);
}

/* Hobbies */
.central-section .hobbies h2 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--grey-2);
}

.central-section .hobbies h3 {
  font-weight: 600;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--grey-1);
}

.central-section .hobbies p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-3);
}

/* Article */
.article h3 {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-6);
}

.article h2 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--grey-1);
}

.article p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-3);
}

.article a {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--blue);
  text-decoration: none;
}

/* Experiences */
.experiences h2 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--grey-2);
}

.experiences span {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  color: var(--grey-3);
}

.experiences h3 {
  font-weight: 600;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-1);
}

.experiences p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-3);
}

/* Projects */
.projects-section .projects-filters h2 {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--grey-2);
}

.filter {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-align: center;
  color: var(--grey-2);
}

.active {
  color: white;
}

.projects-section .projects-cards .project {
  background-color: white;
  padding: 40px;
  flex-basis: 30%;
  flex-grow: 1;

  display: flex;
  flex-direction: column;
  gap: 20px;
}

.projects-section .projects-cards .project .tags {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-2);
}

.projects-section .projects-cards .project h3 {
  font-weight: 500;
  font-size: 2.4rem;
  line-height: 2.9rem;
  color: var(--grey-1);
}

.projects-section .projects-cards .project p {
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 2rem;
  color: var(--grey-3);
}

.projects-section .projects-cards .project .project-links a {
  font-weight: 500;
  font-size: 1.8rem;
  line-height: 2.2rem;
  color: var(--blue);
  text-decoration: none;
}

.projects-section .projects-cards .project .project-links .active a {
  color: white;
}

.projects-navigator span {
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.4rem;
  color: var(--grey-2);
}

/* Footer */
footer {
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.7rem;
  text-align: center;
  color: var(--grey-3);
}

footer a {
  color: inherit;
}