html {
    font-family: "IBM Plex Mono", "Courier New", monospace;
    font-style: normal;
    /*background-color: #E9E1DB;*/
    background-color: #F0E0CC;
}

.container {
    max-width: 800px;
    margin: 40px auto;
    padding: 20px;
    line-height: 1.6;
}

body {
    /*-webkit-font-smoothing: antialiased;*/
    font-size: 14px;
    /*color: #241c19;*/
    color: #7E5625;

}

h1 {
    font-weight: 900;
}

.general {
    margin-top: 50px;
}

.navbar a {
    text-align: center;
    text-decoration: none;
    color: #5B3E1A;
}

.navbar a.active {
    color: #372610; /* highlight color */
    font-weight: bold; /* maybe bold it */
    /*border-bottom: 2px solid #5B3E1A;  underline effect */
}

.navbar ul {
    list-style: none;
    text-align: center;
}
.navbar ul li {
    display: inline-block;
    padding: 10px
}

.about-me {
    padding-left: 2em;
}

.projects-section {
    margin-top: 60px;
}

.projects-section h2 {
    text-align: center;
    color: #5B3E1A;
    font-weight: 700;
}

.projects {
    display: flex;
    flex-direction: column;
    /*grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));*/
    /*gap: 20px;
    margin-top: 20px;*/
    gap: 30px;
    /*max-width: 700px;*/
    margin: 0 auto;
    padding: 20px;
}

.project-card {
    background-color: #f8ecdb;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(91, 62, 26, 0.1);
    transition: transform 0.2s ease;
}

.project-card:hover {
    transform: translateY(-4px);
}

.project-title {
    text-decoration: none;
    font-weight: bold;
    color: #372610;
}

.project-title:hover {
    text-decoration: underline;
}

.project-desc {
    margin: 10px 0;
    font-size: 13px;
    color: #6b4a1f;
}

.project-meta {
    font-size: 12px;
    color: #9b7a52;
}


.project-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 10px;
  margin-bottom: 10px;
}









/* Inter,system-ui,-apple-system,sans-serif;*/

/*
.navbar a { 
    text-align: center;
    text-decoration: none;
    color: gray;
}

.navbar a:hover {
    background-color: #C7C7CC;
    border-radius: 10px;
    padding: 7px;
}

.navbar ul {
    list-style: none; 
    text-align: center;
}

.navbar ul li {
    display:inline-block; 
    padding:0 7px; 
    position:relative;
}

ul li:not(:last-child)::after{
  content:""; 
  border:1px solid #e2e2e2;
  border-width: 1px 1px 0 0;
  position:absolute; 
  right:-3px; 
  top:0; 
  height:100%;
}

*/