body{
    background-color: #0f1617;
    color: aliceblue;
}
.container{
max-width :1000px;

background-color: #11191a;
margin: 10px auto;
padding: 30px;
font-size: 25px;
line-height: 45px;
box-shadow: -12px -8px 40px rgba(22,41,43)inset;


}

.about{
    display: flex;
  
    justify-items: center;
align-items: center ;
max-width: 100%;
gap: 34px;
}

@media (max-width: 1200px) {
  .about {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 900px) {
  .about {
    grid-template-columns: repeat(2, 1fr); 
  }
}

@media (max-width: 600px) {
  .about {
    grid-template-columns: 1fr; 
  }
}

.profile-picture{
    max-width: 220px;
    height: 250px;
    border-radius: 50% ;
    object-fit: fill;
    background-color: #283739;
    
    
}

.profile-about{
    max-width: 600px;
    margin: 5px;
    padding: 20px;
    flex-wrap: wrap;

}

p3{
    color: #788a8b;
   
}
       




.skills-gallery{
    display: grid;
    grid-template-columns:  repeat( 4, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
  max-width: 60%;
  margin: auto;

 
}

#icons{
    width: 100%;
    box-shadow: rgba(22, 41,24) 0px 3px 8px;
    padding: 20px;
    min-width: 50px;
    
}

@media (max-width: 1200px) {
    .skills-gallery {
      grid-template-columns: repeat(3, 1fr); 
    }
  }
  
  @media (max-width: 900px) {
    .skills-gallery {
      grid-template-columns: repeat(2, 1fr); 
    }
  }
  
  @media (max-width: 600px) {
    .skills-gallery {
      grid-template-columns: 1fr; 
    }
  }


.heading{
  font-size: 30px;
  text-align: center;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-weight: 200;
}

h1{
font-size: 35px;
font-weight: 900;


}
h2{font-size: 35px;
  font-weight: 500;}

h4{
    padding: 20px;
    
}


.portfolio-projects{
    display: flex;
    max-width: 90%;
    justify-content: center;
    align-content: center;
    gap: 10px;
    margin: auto;
    flex-wrap: wrap;
    
}

@media (max-width: 1250px){
  .figure{
    flex-direction: column;
    height: 100%;
  }
}

#project{
  flex: 1;
  align-items: center;
}

#project:hover{
transition: all 200ms ease-in-out ; 
opacity: 0.8;

}


figcaption{
    text-align: center;
    font-size: 20px;
    color: #65858a;
    line-height: 35px;
    font-size: 20px;
}

.project{
    max-width: 350px;
    border-radius: 3px
    
  
}


p{
    font-family:'Courier New', Courier, monospace;
    font-weight: 60;
    color: aliceblue;
    

}

footer{
    text-align: center;
    font-size: 20px;
    padding: 20px;
    color: #233335;
    background-color: #ffffff;
    line-height: 40px;
    font-family:'Times New Roman', Times, serif;
    margin-top: 30px;
}

.contact-icon{
  width: 25px;
  height: 25px;
}