/**========================================================================
 * *               Arquivo CSS dedicado ao Escalonamento Mobile
 *   
 * Todas as configurações referentes a redimensionamento no mobile vão ficar aqui
 * Pelo bem da sanidade do Dev
 *========================================================================**/

 @media screen and (min-width: 968px) { 
    :root {
      --big-font-size: 3.5rem;
      --h2-font-size: 2rem;
      --normal-font-size: 1rem;
      --smaller-font-size: .875rem;
    }
  }

  @media screen and (max-width: 767px) { /* Referente ao Menu de Navegação Mobile */
    .nav__menu {
      position: fixed;
      top: var(--header-height);
      right: -100%;
      width: 40%;
      height: 100%;
      padding: 2rem;
      background-color:#ffffff;
      transition: 0.5s;
    }
  }

@media screen and (max-width: 320px) {
    .home {
      row-gap: 2rem;
    }
    .home__img {
      width: 200px;
    }
  }
  @media screen and (min-width: 576px) {
    .home {
      padding: 4rem 0 2rem;
    }
    .home__social {
      padding-top: 0;
      padding-bottom: 2.5rem;
      flex-direction: row;
      align-self: flex-end;
    }
    .home__social-icon {
      margin-bottom: 0;
      margin-right: var(--mb-4);
    }
    .home__img {
      width: 300px;
      bottom: 25%;
    }
    .about__container {
      grid-template-columns: repeat(2, 1fr);
      align-items: center;
      text-align: initial;
    }
    .skills__container {
      grid-template-columns: 0.7fr;
      justify-content: center;
      column-gap: 1rem;
    }
    .work__container {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
      padding-top: 2rem;
    }
    .contact__form {
      width: 360px;
      padding-top: 2rem;
    }
    .contact__container {
      justify-items: center;
    }
  }
  @media screen and (min-width: 768px) {
  
    body {
      margin: 0;
    }
    .section {
      padding-top: 4rem;
      padding-bottom: 3rem;
    }
    .section-title {
      margin-bottom: var(--mb-6);
    }
    .section-title::after {
      width: 80px;
      top: 3rem;
    }
    .nav {
      height: calc(var(--header-height) + 1.5rem);
    }
    .nav__list {
      display: flex;
      padding-top: 0;
    }
    .nav__item {
      margin-left: var(--mb-6);
      margin-bottom: 0;
    }
    .nav__toggle {
      display: none;
    }
    .nav__link {
      color: var(--second-color);
    }
    .home {
      padding: 8rem 0 2rem;
    }
    .home__img {
      width: 400px;
      bottom: 10%;
    }
    .about__container {
      padding-top: 2rem;
    }
    .about__img img {
      width: 300px;
    }
    .about__img2 img {
      width: 480px;
    }
  
    .about__img3 img {
      width: 512px;
    }
    .skills__container {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
      align-items: center;
      text-align: initial;
    }
    .work__container {
      grid-template-columns: repeat(2, 1fr);
      column-gap: 2rem;
    }
  }
  
  @media screen and (min-width: 992px) {
    .bd-grid {
      margin-left: auto;
      margin-right: auto;
    }
    .home {
      padding: 10rem 0 2rem;
    }
    .home__img {
      width: 450px;
    }
  
    .item_overloadTXT{
      grid-row: 4;
    }
  
    .item_overloadIMG{
      grid-row: 3;
    }
  }

  @media (max-width: 768px) { /* Ajuste do botão de Currículo */

    #texto_curriculo
    {
      display: none; /* Deleta o texto do botão de curriculo */
    }
  
    .button 
    {
      padding: 0.75rem 1.25rem;
    }
  
    #botao_curriculo
    {
      padding: 0.75rem 1.25rem;
      background-image: url("../img/icone_curriculo.png");
      background-size: 50%;
      background-repeat: no-repeat;
      background-position: center;
      width: 50px; /* Tamanho do botão reduzido */
      height: 50px;
      vertical-align: middle; /* Alinha verticalmente com o outro botão */
    } 
  
    .skills__img{
      display: none;
    }
  
    .about__container {
      flex-direction: column; /* Alinha os itens verticalmente */
    }
  
    .about__img {
      order: 0; /* Define a nova ordem para o elemento */
    }
  
    .about__subtitle {
      order: 1; /* Mantém os textos depois da imagem */
    }
  
    .about__img2 {
      order: 2;
    }
  
    .about__img3 {
      order: 4;
    }
  
    /* Ajustando os textos */
    .about__container > div:nth-child(3) {
      order: 3;
    }
  
    .about__container > div:nth-child(6) {
      order: 5;
    }
  
    .home__social-icon {
      width: max-content;
      margin-bottom: var(--mb-2);
      font-size: 0.9rem;
      color: var(--second-color);
    }
  
    .botao_darkmode{
      font-size: 1.5rem;
      margin-left: -64px;
    }
  
  }
  
  @media (max-width: 361px) { /* Ajuste fino para Samsumg Galaxy S8 */
    .home__social-icon {
      width: max-content;
      margin-bottom: var(--mb-2);
      font-size: 0.7rem;
      color: var(--second-color);
    }
  
    .botao_darkmode{
      font-size: 1.5rem;
      color: #ffffff;
      margin-left: auto;
    }
    .button 
    {
      padding: 0.75rem 0.5rem;
    }

    #botao_curriculo
    {
        width: 25px;
        height: 50px;
    }
  
  }