@media  screen and (min-width: 480px) and (max-width: 1150px) {
 #divhabilidades{
  grid-template-columns: 2;
 
 }
 #html{
  grid-column: 1;
  grid-row: 1;
}
#css{
  grid-column: 2;
  grid-row: 1;
}
#js{
  grid-column: 1;
  grid-row: 2;
}
#react{
  grid-column: 2;
  grid-row: 2;
}
.skills{
  margin-bottom: 20px;
}
}
@media screen and (max-width: 1000px) {
  #morcego{
    display: none;
   } 
  #curriculo{
   display: none;
  }
  
  
}
@media screen and (max-width: 970px) {
 
  #projetos{
    gap: 20px;
    align-items: center;
    justify-items: center;
  }
  
  #card1{
    grid-column: 1;
    grid-row: 1;
  }
  #card2{
    grid-column: 1;
    grid-row: 2;
  }
  #card3{
    grid-column: 1;
    grid-row: 3;
  }
  #card4{
    grid-column: 1;
    grid-row: 4;
  }
 
  
}
@media  screen and (max-width: 830px) {
    #perfil > p{
      display: none;
     
    }  
    #mainctt{
      display: grid;
      grid-template-columns: 1;
      grid-template-rows: 2;
      row-gap: 0.5rem;
      gap: 0.5rem;
      
    }
   
    #ctt{
      display: grid;
      grid-template-rows: 2;
      justify-items: center;
      grid-row: 1;
     }
     #articlectt{
       gap: 10px;
     }
     .msg{
       grid-row: 2;
       padding: 30px;
     }
     .msg > .prede2{
       display: none;
 
     }
     .imgseta{
       margin: 0;
       
     }
     #ctt2{
      grid-row: 2;
      grid-column: 1;
     }
   
    
}
@media  screen and (max-width: 660px) {
    #perfil > #imgperfil{
      display: none;
     
    }  
}
@media  screen and (max-width: 580px) {
  #home{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    width: 100vw;
    padding: 10px;
  }
  #home > li > a >img{
    display: none;
  }
  #home > li {
    padding: 0;
     
    } 
  #mainpj{
    padding: 0;
  }   
    
    
}
@media  screen and (max-width: 670px) {
  #divhabilidades{
      grid-template-columns: 1;
     
     }
     #html{
      grid-column: 1;
      grid-row: 1;
    }
    #css{
      grid-column: 1;
      grid-row: 2;
    }
    #js{
      grid-column: 1;
      grid-row: 3;
    }
    #react{
      grid-column: 1;
      grid-row: 4;
    }
    .skills{
      margin-bottom: 20px;
    }
    .social-card{
    display: grid;
    justify-content: center;
    justify-items: center;
    border: 1px solid #892be294;
    font-family: Arial, Helvetica, sans-serif;
    color: #b4b4b4;
    font-size: 13px;

    padding: 5px;
    border-radius: 10px;
    width: 100%;
   

    
}
.social-items{
    display: flex;
    flex-direction: column;
    width: 100%;
}

#sobre{
   padding: 0px 10px 0px 10px;
   

    
}
 
}