/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
                                                                
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
                                                                   
                                                                                                  
body{
          line-height: 1.6;
          font-family: 'Nunito';
          background-color: #F2F5EA;
}
                                                                                                                                                         
    header {
          background-color: #2C363F;
          color: #f2f5ea;
          text-align: center;
          padding:30px 10%;
     }
           
     header h1 {
            font-size:3rem;
            margin-bottom:15px;
      }

     header p{  
                margin-bottom:10px;
     }

                                                                                                                                                                                                                              
#about{
            background-color:#F2F5EA;
            padding:5px 10%;
            font-family: 'Nunito';
}

    #about h2{
            font-size: 40px;
            margin-top:30px;
            color: #E75A7C;
            text-align:center;
            padding:20px;
     }

    .about-container{
           max-width:1200px;
           margin:auto;
           text-align:center;
     }

   .about-image{
          margin-bottom:30px;
    }

     #about img{
    width:100%;
    max-width:600px;
    height:auto;
}

     #about p{
               line-height:1.9;
               color:#2C363F;
               font-family:'Nunito';
               font-size:20px;  
               text-align:center; 
               max-width:900px;
               margin: auto;  
               padding:20px;
               
     }


#projects {
               background-color:#F2F5EA;
               padding:5px 10%;
}

     #projects h2 {
               font-size: 40px;
               font-family:'Nunito';
               margin-top:5px;
               color: #E75A7C;
               text-align:center;
     }
 
    .project-grid {
                 display:grid;
                  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
                 gap:40px;
                 text-align: center;
                 align-items: start;
     } 

     .project-card {
                 background-color:#F2F5EA;
                 padding: 30px;
                 border-radius: 15px;
                 text-align: center;
                  min-width:0;
     }

    .project-card i{
                  font-size:60px;
                  color:#E75A7C;            
                  margin-bottom:20px;
    }

    .project-card h3{
                     margin-bottom:15px;  
                     font-family:'Nunito';
                     color:#2C363F;
     }

    .project-card p{
                     line-height:1.8;
                     padding:5px;
                     color:#2C363F;
                     font-family:'Nunito';
                     font-size:18px;      
     }                                                                                                                                                                

                                                                  
#contact {
                     padding:10px 10%;
                     text-align:center;
                     margin:auto;
}


#contact h2 {
                      font-size: 40px;
                      font-family:'Nunito';             
                      color: #E75A7C;                     
}
    

.email-box{
                     display:flex;
                     justify-content:center;
                     align-items:center;
                     gap:10px;
                     color:#2C363F;
                     font-family:'Nunito';
                     font-size:20px;
}
 
                                                                                          /* ===============================
                                                                                        ============================== */

footer p{
                     background-color: #2C363F;
                     color: #f2f5ea; 
                     font-family: 'Nunito';
                     display:flex;
                     justify-content:center;
                     padding:40px 10%;
}

      @media screen and (max-width:768px){

header{
    padding:50px 5%;
}

header h1{
    font-size:40px;
}

#about{
    padding:50px 5%;
}

#about img{
    width:100%;
    height:auto;
}

#about p{
    max-width:100%;
    font-size:18px;
}

#projects{
    padding:50px 5%;
}

.project-grid{
    grid-template-columns:1fr;
    gap:30px;
}

.project-card p{
    font-size:18px;
}

#contact{
    padding:50px 5%;
}

.email-box{
    flex-direction:column;
    gap:5px;
}

footer p{
    padding:20px;
}
}