img{
    
    height: auto;
    object-fit: cover;
    display: block;
    border-radius: 15%;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    margin-bottom: 1.25rem;
}


@media (max-width: 768px) {
  img {
    width: 50%;   
  }

  body{
        gap: 0.4rem;
  }
  
  main{
   
    grid-template-rows: 1fr 1fr  0.2fr;

    padding: 0.5%;
    margin: 0.5%;
    gap: 4rem;
  }

  .projectTitle  {
        font-weight: bold;
        
        
        gap: 10rem;
        padding-left : 1.7rem;
        margin: 0.8rem;
        
       
        
        
    }






  
  #info{
    margin-top: 0rem;
  }

    .AboutMe{
        
        
        flex-direction: column;
        
       
        
    }

 
  section{
    display: flex;
    flex-direction: column;
  }

  form div {
    flex-direction: column;
  }

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

    
    
}

p{
    margin: 0.5rem 0;
    font-size: 1.5rem;
    
    
}


em{
    margin: 0.5rem 0;
    font-weight: bold;
    font-size: 1.0rem;
}

  

}

@media (min-width: 769px) and (max-width: 1200px) {
  img {
    width: 50%;   /* on tablets */
  }
  
  main{
    
    grid-template-rows: 1fr 1fr  0.3fr;

    padding: 1%;
    margin: 1%;
    gap: 2rem;
  }

   body{
        gap: 0.004rem;
  }

  .projectTitle  {
        
        
        
        gap: 8rem;
        padding-left : 1.7rem;
        margin: 0.4rem;
         
    }

  #info{
    margin-top: 7%;
  }

    .AboutMe{
        
        
        flex-direction: column;
       
       
        
    }


  section{
    
    flex-direction: column;
  }
  form div {
    flex-direction: column;
  }

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

p  {
    margin: 0.5rem 0;
    font-size: 1.5rem;
    
   
}


em{
    
    margin: 0.5rem 0;
    font-size: 1.5rem;
}

  
}


@media (min-width: 1201px) and (max-width: 3000px) {
  img {
    width: 65%;   /* on desktops */
  }
  main{
    
    grid-template-rows: 1fr ;
    gap:10rem;
    margin: 4%;
    padding: 4%;
    
  }

   body{
        gap: 0.004rem;
  }

  .projectTitle  {
        
        
        grid-template-columns: 2fr 2fr;
        gap: 12rem;
        padding-left : 1.7rem;
        margin: 0.8rem;
         
    }

   #info{
    
    margin-top: 8%;
  }

  .AboutMe{
        
        
        flex-direction: row;
       
       
        
    }

   section{
    
    flex-direction: row;
  }

  form div {
    flex-direction: row;
  }

  h1{
    margin: 0.5rem 0;
    font-size: 2.5rem;
    
}
h3{
    margin: 0.5rem 0;
    font-size: 2.0rem;
    
}

p  {
    margin: 0.5rem 0;
    font-size: 1.5rem;
    
    
}


em{
    margin: 0.5rem 0; 
    font-size: 1.5rem;
}
  
}



h1{
    
    
    text-align: center;
}
h3{
    
    
    text-align: center;
}




em{
    
    font-weight: bold;
    
}

a{
  color:inherit;
  font: inherit;
  text-decoration: none;
}

body{
        display: grid;
        grid-template-columns: 1fr ;
        background-color: #EAE0D5;
        color: #22333B;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0%;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
        
        
        
    }

    .dark-mode{
        background-color: #22333B;
        color: #EAE0D5;
        
    }
    .dark-mode button:before{
        border: #EAE0D5 solid 0.1rem;
        
    }

    .dark-mode button:active{
        border: #22333B solid 0.1rem;
    }

    


main {
        display: grid;
        
       
        
        
        
        text-align: center;
        font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, Arial, sans-serif;
        
        
        
        

        
    }

   main .section{
        opacity: 1;
        transition: opacity 0.3s ease, transform 0.3s ease;
   }

   
   
   main .section:hover{
        opacity:1;
        transform: scale(1.05);
   }

  


    .AboutMe{
        
        display: flex;
        
        justify-content: center;
        scroll-margin-top: 80px;
        
       /* border: #22333B solid 0.1rem;
        border-radius: 3rem;
        */
    }

    .AboutMe:hover {
        transform: scale(1.05);
        box-shadow: 0 8px 16px #22333B(0, 0, 0, 0.2);
        
    }




#intro {
    /*
        display: flex;
        flex-direction: column;
        text-align: center;
        font-size: 24px;
        justify-content: center;
        align-items: center;
        */
      
        padding: 1rem 1.25rem;
        
        
        scroll-margin-top: 80px;
        
        flex-direction: column;
        
        align-items: center;
        height: 100%;
        display: flex;
        position: relative;
        
        
    }

  


#header {
        
        
        padding: 1% 0%;
        
        
        text-align: center;
        
        
    }

#navbar {
        display: inline-block;
        text-align: center;
        
        
        
        
       /*
        border: #22333B solid 0.1rem;
        border-radius: 3rem; */
       
        
    }
    
 #navbar ul {
        display: flex;
        justify-content: center;
        flex-direction: row;
        list-style-type: none;
        padding: 0%;
    }

#navbar ul li {
        
        
        margin:  0 0.8rem 0 0.8rem;
    }   

    #navbar ul li a {
        text-decoration: none;
        
        font-weight: bold;
    }


#info {
        display: inline-block;
        
        
        
        scroll-margin-top: 80px;
        
        
        
        
    }






#projects {
        
        padding: 2rem;
        
       /* 
       border: #22333B solid 0.1rem;
        border-radius: 3rem;
        */
        
        scroll-margin-top: 80px;
        
    }

#projects:hover {
         box-shadow: 0 8px 16px #22333B(0, 0, 0, 0.2);
         transform: scale(1.05);
}
   


#projects li {
        
        padding: 3%;
        
        width: 100%;
        text-align: left;
        
        justify-content: center;
        align-items: center;
        
       
    }



#contact {
        display: inline-block;
       
        
        
        
        padding: 1% 1%;   
        
        text-align: center;

      /* border: #22333B solid 0.1rem;
        border-radius: 3rem;*/
    }

.messageDiv{
        display:flex;
        flex-direction:row;
        justify-content: center;
        gap: 1rem;
}


    section{
        display: flex;
        
        gap: 1rem;
        justify-content: space-around;
        align-items: center;
        font-size: 1.6rem;
    }

form div {
    display: flex;
    
    gap: 1rem;
    justify-content: center;
}
 




button {
  
  background-color: inherit;
  color: inherit;
  
  
  border-radius: 3rem;
  
  box-sizing: border-box;
  
  cursor: pointer;
 
  font-size: 1rem;
  font-weight: bold;
  
  
  
  padding: 0.5rem 0.5rem ;
  position: relative;
  
  
  
 
  
}

button:hover {
  background-color: #669BBC;
  text-decoration: none;
  color:#EAE0D5;
  transition-duration: 0.1s;
}









.Description {
        list-style-type: none;
        font-weight: normal; 
        word-spacing: 0.2rem;
    }

.projectTitle  {
        font-weight: bold;
        display: grid;
       
        
        text-align: center;
        justify-content: center;
        align-items: center;
        
        font-size: 1.3rem;
        
    }