@media screen and (max-width: 1200px) {
  html {
    font-size: 55%;
  }
}

@media screen and (max-width: 992px) {
  header {
    padding: 2rem 4%;
  }

  section {
    padding: 10rem 4% 2rem;
  }
}

@media screen and (max-width: 810px) {
  .contact-box .field-box {
    grid-template-columns: 1fr;
  }
}

@media screen and (max-width: 768px) {
  #menu-icon {
    display: block;
  }

  nav {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--cor-de-fundo);
    border-bottom: 0.1rem solid rgba(0, 0, 0, 0.2);
    text-align: center;
    display: none;
  }

  nav.active {
    display: block;
  }

  nav a {
    display: block;
    margin: 4rem 0;
  }

  .home {
    flex-direction: column-reverse;
    gap: 2rem;
  }

  .home-img .img-box {
    width: 35rem;
    height: 35rem;
  }

  .resume-container,
  .projects-container,
  .contact-container {
    grid-template-columns: 1fr;
  }

  .resume-container {
    gap: 3rem;
  }

  .projects-container .projects-box:first-child {
    order: 1;
  }

  .contact-box .field-box {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 600px) {
  html {
    font-size: 50%;
  }

  section {
    padding: auto 5% 0;
    overflow-y: auto;
  }

  .home-img .img-box {
    width: 20rem;
    height: 20rem;
  }

  .home-detail,
  .resume-box h2,
  .resume-box .heading,
  .resume-box .desc,
  .resume-detail.about .resume-item {
    text-align: center;
  }

  .home-detail .btn-sci {
    flex-direction: column-reverse;
  }

  .home-detail .btn-sci .sci {
    margin-left: 0;
    margin-bottom: 2rem;
  }

  .projects .live-github {
    display: flex;
    justify-content: center;
  }

  .contact-box .field-box {
    grid-template-columns: 1fr;
  }

  .contact-box form {
    padding: 2.5rem 3rem 3.5rem;
  }

  .contact-box h2 {
    font-size: 3.5rem;
  }
}