@media only screen and (max-width:468px) {

  #flores {
    top: 123%;
    width: 100%
  }

  section,
  article,
  footer {
    margin: 3rem auto;
    padding-inline: 1rem
  }

  h1 {
    font-size: 1.5rem;
    margin: 0.5rem
  }

  #titulo {
    font-size: 2rem;
    -webkit-text-stroke: 1px var(--purple)
  }

  .about_grid h2 {
    font-size: 1rem
  }

  .about_grid p {
    font-size: 0.6rem
  }

  nav {
    width: 80%
  }

  nav a {
    font-size: 0.6rem
  }

  .projects_container .grid-project {
    display: grid;
    gap: 2rem
  }

  .projects_container .grid-project .card-project .category span {
    font-size: 0.6rem
  }

  .projects_container .grid-project .card-project h3 {
    font-size: 1rem
  }

  .projects_container .grid-project .card-project p {
    font-size: 0.8rem
  }

  .line_main {
    font-size: 1.5rem;
    display: flex;
    justify-content: center;
    margin: 0
  }

  .line_emphasis {
    font-size: 1rem;
    -webkit-text-stroke: 0.5px var(--blue);
    display: flex;
    justify-content: center;
    margin: 0.5rem 0
  }

  .line_description {
    font-size: 0.8rem;
    margin: 0
  }

  #olho {
    width: 74%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 28%;
    left: auto;
    right: auto
  }

  .about_grid .about_links .links h3 {
    font-size: 0.8rem
  }

  .about_grid .about_links .links img {
    height: 3rem;
    width: 3rem
  }

  .about_grid .about_education h3 {
    font-size: 0.8rem
  }

  .about_grid .about_education h4 {
    font-size: 0.9rem;
    width: 30%
  }

  .contact_container .content_contact {
    margin: 4rem 0
  }

  .contact_container .content_contact p {
    font-size: 0.7rem;
    text-align: center;
    margin: 1rem
  }

  .contact_container .content_contact .title_contact {
    font-size: 1rem;
    width: max-content
  }

  .contact_container .content_contact button {
    padding: 0.8rem
  }

  .contact_container .content_contact a {
    font-size: 0.8rem
  }

  .modal-content {
    max-width: 500px;
    width: 80%;
    height: 70%;
    overflow-y: scroll;
    position: relative;
  }

  .modal {
    width: 90%;
  }

  .modal-body {
    flex-direction: column;
  }

  .modal-imgs.small-images {
    height: 100px;
  }

  .modal-imgs.large-images {
    height: 150px
  }

  .modal-imgs.x-large-images {
    height: 150px
  }

  .modal-body {
    flex-direction: column-reverse;
    align-items: center;
  }

  .modal-text p {
    padding: 1rem;
    font-size: 0.9rem;
  }

  .modal-text.small-size {
    align-items: center;
  }

  .modal-text h2 {
    font-size: 1.8rem;
  }

  .modal-body img {
    width: 90%;
  }
}