* { 
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
li {
    list-style: none;
}
a {
    text-decoration: none;
}
body,html{
    font-family: "Poppins", sans-serif;
    margin:0; 
    padding:0; 
    height: 100%; 
    scroll-behavior: smooth;
}
/* ------------------------------------------------------ NAVBAR------------------------------------------------------------- */
   
/* the navbar*/
.navbar{
    display:flex;
    align-items:flex-end;
    justify-content: space-between;
    padding: 20px;
    background-color: teal;
    color: #fff;
}
/* nav bar menu items */
.navbar li{
    display: inline-block;
    margin-left:25px;
    
    
}
/*links on nav bar */
.navbar a{
    color:#fff;
    padding:20px;
   
}
/* hover property for each menu option */
.navbar li:hover {
    background-color: #4c9e9e;
   
  }
  /* my name logo at the top */
.logo{

    font-size: 32px;
}
/* the hero image under the nav */
.hero{
    height:900px;
    
    background-image: url("../images/jeremy-bishop-G9i_plbfDgk-unsplash-2.jpg");
    background-size: cover;
    background-position: center;
    position: relative;
  

}
/* hero Text container */
.hero-text{
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
}
/* hello its nelly */
.hero-title{
    font-size: 3.5rem;   
}
/* summary paragraph */
.hero-sum{
    font-size: 15px; 
    font-weight: 600px;
} 
/* ---------------------------------------------- ABOUT SECTION------------------------------------ */

.about-title{
    padding-top:25px;
    text-align: center;
    /* margin:10rem; */
    /* background-color:aqua; */
    
}
.about-container{
    background-color:  rgb(144, 210, 210);
    height:100%;
    width: 100%;
    
}
.about-details-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    margin: 10rem 10rem;
    margin-bottom:20rem;
    background-color: rgb(144, 210, 210);
   
}
.about-details-container h2{
    
    font-family: 'Courier New', monospace;
    text-align: left; 
    
}

/* this will make the image of me stay to the left */
.myface {
    width:200px;
    margin-right:30px;
}
/* ---------------------------------------------- PROJECT SECTION------------------------------------ */
.project-main-title {
    margin-top: 25px;
    text-align: center;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;

}
/* this holds all three cards */
.project-section-main {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top:4rem;
    margin-bottom:10rem;
    padding:40px; 
    /* background-color: #3e5858; */
}
.project-section{
    margin-top:50px;
    display: flex;
    flex-direction: row;
}
.project1-container{
    height:30rem;
}

.project1-title, .project-sub-title, .project-sub-titles{
    text-align: left;
    font-size: 32px;
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}
.proj1-img{
    border-radius: 3rem;
    width:100%;
    height:90%;

}
.proj-img{
    border-radius: 2rem;
    width:90%;
    height:90%;

}

.proj-img:hover, .proj1-img:hover{
    opacity: 0.3;
    background-color: aquamarine;
    
}
/* ---------------------------------------------- CONTACT SECTION------------------------------------ */

.contact-container{
    display: flex; 
    flex-direction: row;
    justify-content: space-evenly;
    background-color: teal;
    width: 100%; /* Adjust the width as needed */
    /* Center the container horizontally */
    padding: 5%; 

}
/* this is the title  */
.contact-title
{
    margin-top:25px; 
    text-align: center;
    background-color: teal;
    color: #fff;
   
}
.contact-container h2{
    border: solid rgba(29, 19, 97, 0.343);
    border-radius: 5px; 
    
}
.links-container a, .phone-number{
    color: #fff;
    text-decoration:underline;
}

.links-container a:hover{
    background-color: #4c9e9e;
   
}
/* --------------------------------- Responsive Layout-------------------------------------------------- */
@media screen and (max-width:992px){
    .about-details-container h2{
        font-size: 16px;
        align-items:start;
    }
    .about-details-container{
        margin-top: 20px;
      flex-direction: column;
      
  }
  .myface{
    margin-bottom:20px;
  }

}
@media screen and (max-width: 768px) {
    .navbar {
      flex-direction: column;
      align-items: center;
  
    }
    .about-details-container h2{
        font-size: 16px;
        align-items:start;
    }
    .about-details-container{
        margin-top: 20px;
      flex-direction: column;
      
  }
  .myface{
    margin-bottom:20px;
  }
  .logo{
    margin-bottom:20px;
  }
    
  }
@media screen and (max-width:680px) {
    
    .navbar {
        flex-direction:column;
        align-items: center;
    
      }
      .about-details-container h2{
          font-size:15px;
          align-items:start;
      }
      .about-details-container{
        margin-top:10px;
        flex-direction: column;
        
    }
    .myface{
      margin-bottom:20px;
    }
    
}


/* resizing page on a mobile device */
@media screen and (max-width:480px) {
    
    .navbar {
        flex-direction:column;
        align-items: center;
        /* height:50%;
        width:100%; */
     }
     .navbar a{
        flex-direction:row;
        align-items: center;
        font-size: 15px;
     }
     .navbar li{
         margin-left:0px;
            
    }
     .logo{
        font-size: 30px; 
     }
      .about-details-container h2{
          font-size:14px;
          white-space: normal;
          margin-bottom: 10px;

      }
      .about-details-container{
        display: flex;
        flex-direction: column;
        align-items: start;
        padding: 20px;
        margin: 10px;
        /* margin-top:20px; */
        
       
        
    }
    .myface{
      margin-bottom:20px;
        width:100px;
        
    }
    
    .about-container{
        height: 70%;
    }
    .project1-container{
        height:20rem;
    }
    .project-details-container{
        height:10rem;
        width:10rem;
        
    }
    .project-sub-titles{
        font-size: 16px;
        font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    }
    .project-section-main {
     
        margin-top:2rem;
        margin-bottom:5rem;
        padding:40px; 
        /* background-color: #3e5858; */
    }
   

}