:root {
  --first-action-dark-background: #353535;
  --first-action-light-background: var(--black);
  --second-action-dark-background: #f3f3f3;
  --second-action-light-background: #ececec;
}

main h1 {
  font-size: 4rem;
  text-transform: capitalize;
  margin-bottom: 1rem;
}

main h1 span,
main h1 a {
  color: var(--crimson);
}

main h1 a {
  text-decoration: none;
}

main #intro {
  display: flex;
  column-gap: 1rem;
}

main #intro img {
  width: 19.6875rem;
  height: 19.6875rem;
}

main #intro #action-buttons {
  display: flex;
  column-gap: 1rem;
}

main #intro #action-buttons a {
  text-decoration: none;
  border-radius: 0.5625rem;
  padding: 1rem 2rem;
}

main #intro #action-buttons a:first-of-type {
  background-color: var(--first-action-background);
  color: var(--white);
}

main #intro #action-buttons a:last-of-type {
  background-color: var(--second-action-background);
  color: var(--black);
}

main h2 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

main p {
  margin-bottom: 3rem;
}

section {
  margin-bottom: 5rem;
}

main #projects > div:first-of-type,
main #blog > div:first-of-type {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media only screen and (max-width: 1024px) {
  main h1 {
    font-size: 2rem;
  }

  main h2 {
    font-size: 1.75rem;
  }

  main p {
    margin-bottom: 1rem;
  }

  section {
    margin-bottom: 2rem;
  }

  main #intro #action-buttons {
    margin-top: 1.5rem;
  }

  main #intro img {
    display: none;
  }
}
