/**
 * Above the fold
 */

@media (max-width: 1500px) {
    #fold {
        flex-direction: column;
    }
}

#fold {
    margin: 13vh var(--page-inline-margin);
    display: flex;
    justify-content: space-between;
}

#fold .title {
    max-width: 12ch;
}

#fold .secondary-title {
    max-width: 27ch;
    padding: 2rem 0;
    color: var(--color-medium);
}

#fold .secondary-title .bold {
    color: var(--color-dark);
}

/**
 * Projects
 */

#projects {
    margin: 0 var(--page-inline-margin);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 370px), 1fr));
    gap: clamp(3.5rem, 5vh, 5rem) min(3vw, 2.5rem);
}

.project {
    /* background-color: #dfdfdf; */
    /* border: 1px solid #ddd;
    border-radius: 10px;
    padding: 1.5rem; */
    color: var(--color-medium);
    cursor: pointer;
}

.project img {
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    aspect-ratio: 16/9;
    display: flex;
}

.project p {
    max-width: 80%;
}

.project .bold {
    font-size: 1.2rem;
    padding: 11px 0 4px 0;
    color: var(--color-dark);
}

/**
 * projects
 */

 body {
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif

}

h1 {
    border: 2px solid skyblue; 
    padding: 10px; 
    border-radius: 100px;
    color: navy;
    text-align: center;
    
}

h2, th {
    text-align: center;
    color: navy;
    
}

table {
    border-spacing: 0;

  }

td {
    padding: 10px;

}

h5, h6 {
    text-align: center;
}

.container {
    text-align: center; /* Center-align the child elements horizontally */
}

img {
    display: inline-block; /* Make the image behave like an inline-block element */
    max-width: 100%; /* Set the maximum width to 100% to ensure it doesn't exceed its container */
    height: auto; /* Maintain the image's aspect ratio */
    max-height: 30vh; /* Set the maximum height to 80% of the viewport height (adjust as needed) */
}