/* -------media queries for responsive design------ */

@media (max-width: 420px) {
  html,body{
    width: 100%;
    overflow-x:hidden
  }
  main{
    padding: 1rem 2rem;
    /* width: ; */ 
    /* margin: 0rem; */
  }


  h1 {
    font-size: 2rem;
  }
  h2 {
    font-size: 1.3rem;
  }
  h3 {
    font-size: 1rem;
  }
  button {
    font-size: 0.4rem;
  }
  /* body{
      background-color: blue;
    } */
     .navbar{
      width: 100%;
      display: flex;
      gap: 0rem;
      align-items: center;
     }
  .navbar .logo img {
    /* display: none;   */
    position: relative;
    right: 2rem;
    height: 5rem;
    width: 5rem;
  }

  .navbar .factAboutMe .quote {
    /* display: none; */
    font-size: 10px;
    height: 1px;
  }
 
  /* introduction section texts */
  .first-section {
    padding-top: 5rem;
    display: flex;
    flex-direction: column-reverse;
    gap: 0rem;
    /* margin-left: 2rem; */
  }
  .first-section h1{
    font-size: 2.5rem;
  }
.first-section h2{
  font-size: 1.8rem;
}

  .introduction-section {
    width: 100%;
  }
  .first-section .image-section img {
    margin-top: 1rem;
    width: 240px;
    aspect-ratio: 1/1;
    background-size: cover;
    border-radius: 50%;
  }

  .introduction-section p {
    display: none;
  }
  .introduction-section .action-buttons{
   margin-top: 1rem;
  }
  .introduction-section .action-buttons #info-btn{
    font-size: 0.9rem;
    height: 2.7rem;
    padding: 0.6rem;

  }
  .introduction-section .action-buttons #resume-btn{
    font-size: 0.9rem;
    height: 2.7rem;
    padding: 0.5rem;
  }

  .project-container {
    /* display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 2fr 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
    grid-template-areas:
     "project1"
     "project2"
     "project3"
     "project4"
      */
      
      display: flex;
      flex-direction: column;
      padding: 0rem;
  }
  
  .project-container .project{
    width: 100vw;
    max-width:100%;
    /* overflow-x:hidden */
    padding: 0.5rem;
    background-color: transparent;
    margin-top: 0rem;
  }
  
  .project-container .project p{
    font-size: 0.8rem;
  }
  .project-container .project button{
    font-size: 0.7rem;
  }

  .project-container .project img{
    max-height: 250px;
    width:280px;
  }

.team-project{
  width: 100vw;
    max-width:100%;
    /* overflow-x:hidden */
    padding: 0.5rem;
    background-color: transparent;
    margin-top: 0rem;
}
  .team-project  p{
    font-size: 0.8rem;
  }
  .team-project  button{
    font-size: 0.7rem;
  }

  .team-project img{
    height: 250px;
    max-width:100vw;
  }

  .navbar-items{
    width:fit-content;
    gap:1rem;
    padding: 0.5rem 1rem;
    height: 4rem;
  }


  
    }