/*
 * The media queries in this file are sorted, regardless of its changes, by
 * - ascending min-width
 * - ascending max-width
 */

@media screen and (min-width: 400px) {
  h1 {
    font-size: 1.75em;
  }

  h2 {
    font-size: 1.5em;
  }
  .skill-item,
  .interest-item {
    margin: 1.5em 3em;
  }
}

@media screen and (min-width: 700px) {
  body {
    grid-template-columns: repeat(4, 1fr);
  }

  h1 {
    font-size: 2em;
  }

  h2 {
    font-size: 1.75em;
  }

  .about-me {
    grid-column: 1 / 5;
    grid-template-rows: 5em 1fr;
  }

  .about-me-text {
    grid-row: 2 / 2;
    grid-column: 1 / 1;
    margin: 0 1vw 0 3vw;
    padding: 0 1em 0 0;
    font-size: 1.25em;
  }

  .about-me-text p {
    margin: 0 0 1.5em 0;
    text-align: left;
  }

  .about-me-pic-container {
    grid-row: 2 / 2;
    grid-column: 2 / 2;
    justify-content: flex-end;
    align-items: flex-start;
  }

  .project-item {
    margin: 1.5em 2em;
  }
}

@media screen and (min-width: 900px) {
  .about-me-text {
    font-size: 1.5em;
  }
}