body {
    /* font-family: 'Inter', sans-serif; */
    font-family: sans-serif;
    line-height: 1.7;
    font-size: 18px;
    max-width: 800px;
    margin: 0 auto;
    padding: 16px;

    background-color: #ffffff;
    color: #444444;
}

a {
    color: #444444;
}

.home {
    max-width: 1200px;
}

.center {
    text-align: center;
}

.responsive-links {
    display: flex;
    flex-wrap: wrap;
    /* gap: 5px; /* Adjust the spacing as needed */
    justify-content: center;
    align-items: center;
}

.responsive-links span {
    white-space: nowrap; /* Prevent line breaks within each span */
}

.separator {
    display: inline-block;
}

@media (max-width: 770px) {
    .responsive-links {
        flex-direction: column;
        align-items: center; /* Center items in column layout */
    }

    .separator {
        display: none; /* Hide the separators on small screens */
    }
}

.no_under {
    text-decoration: none;
}

.img_center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    text-align: center;
}

.img_right {
    width: 100%;
    float: right;
    padding-left: 20px;
}

.img_left {
    width: 100%;
    float: left;
    padding-right: 20px;
}

.projects-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.project-item {
    flex: 1 1 calc(33.333% - 16px); /* Adjust for three items per row */
    box-sizing: border-box;
    max-width: calc(33.333% - 16px); /* Adjust for three items per row */
}

.project-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 1100px) {
    .project-item {
        flex: 1 1 calc(50% - 16px); /* Two items per row for medium screens */
        max-width: calc(50% - 16px);
    }
}

@media (max-width: 770px) {
    .project-item {
        flex: 1 1 100%; /* One item per row for small screens */
        max-width: 100%;
    }
}



/*
@font-face {
    font-family: 'Inter';
    src: url('../fonts/Inter-VariableFont_slnt,wght.ttf') format('truetype');
}

/*
@media (prefers-color-scheme: dark) {
    body {
        background-color: #1F1F1F;
        color: #FFFFFF;

        a {
            color: #FFFFFF;
        }
    }
}
*/