*{
    margin:0;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
body{
    font-size: 16px;
    line-height: 1.5;
}
.nav{
    background-color: #1f2937;
    color:white;   
    height: 100%;
}
.container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 30px;
  font-size: 25px;
}

.header{
   background-color:rgb(247, 247, 247);
   color:rgb(112, 75, 75);
   min-height: 400px;
}
.header .container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap:wrap;
    padding:30px;
}
.header img{
    max-width: 400px;
   
}
.header #about{
    max-width:600px;
}
.nav .container {
  display: flex;
  justify-content:space-between;
  align-items: center;
}
.nav-logo {
  width:100px;
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:10px;
}
.nav-logo span{
  font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
.nav-links ul {
  list-style: none;
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
  width: 100%; /* This is important */
}

.nav a {
  font-size:1rem;
  color: white;
  text-decoration: none;
  padding: 0 20px; /* Adds spacing between nav items */
}

.nav a:hover {
  text-decoration: underline;
}
button{
    width: 120px;
    height:45px;
    border-radius: 15px;
    background-color: rgb(167, 168, 168);
    border:none;
    margin-top:20px;
    color:rgb(134, 62, 62);
    font-weight: 600;
    font-size: 15px;
}
.main{
  background-color: #273547;
  height: 100%;
  color:white;
  padding:40px;
  text-align: center;
}
#projects{
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  align-items: center; 
  flex-wrap:wrap;
  gap:30px;
}
.item{
  max-width: 300px;
  flex:1 1 auto;
}
.item a{
  color:white;
  text-decoration: none;
}
.item a:visited{
  color: #c4cddb;
}
.item a:hover{
  color:rgb(203, 243, 230)
}
.main img{
  width:200px;
  height: 200px;
  border-radius: 10px;
}
.main h2{
  margin-bottom: 20px;
}
.dream{
  background-color: rgb(247, 247, 247);;
  text-align: center;
  padding:26px;
}
.dream p{
  max-width:400px;
  font-size:1.5rem;
  font-weight: 500;
  margin:0 auto;
}
footer{
  background-color: #273547;
  color: #c4cddb;
  display: flex;
  flex-direction: column;
  text-align: center;
}
.main .item:nth-child(2),
.item:nth-child(3),
.item:nth-child(4){
  opacity:0.4;
}
#about h1{
  font-size:40px;
}