/* color palette https://colorhunt.co/palette/041c3204293a064663ecb365 */

:root {
    --body-bg-color: #dadada;
    --main-bg-color: #dadada;

    --project-card-bg-color: #fafafa;
    --project-title-font-color: #101010;
    --project-description-font-color: #101010;
    --project-title-bg-color: #ababab;
    --font-family-main: 'Montserrat', sans-serif;
    --project-see-more-font-color: #101010;
}

/* body {
    background: var(--body-bg-color);
} */

main {
    margin-top: 5vh;
    width: 100%;
    display: flex;
    justify-content: center;
}

section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* grid-template-rows: repeat(4, 1fr); */
    row-gap: 20px;
    column-gap: 20px;

    width: 80vw;
    /* height: 90vh; */
    /* min-width: 250px; */
    /* min-height: 300px; */

    overflow: hidden;    
    box-sizing: border-box;

    font-family: var(--font-family-main);
    color: var(--font-color);
}

.project-card {
    display: grid;
    align-items: center;
    text-align: center;

    height: 250px;
    /* height: auto; */

    border-radius: 5px;
    overflow: hidden;

    /* grid-template-rows: 20% 60% 20% 20%; */
    background-color: var(--project-card-bg-color);
}

.project-title {
    /* background-color: var(--project-title-bg-color); */
    border-bottom: 1px solid #cccccc;
}

.project-title h2 {
    color: var(--project-title-font-color);
    font-size: 0.9rem;
}

.project-description {
    padding: 10px;

    color: var(--project-description-font-color);
    font-size: 0.85rem;
}

/* .project-see-more a {
    color: var(--project-see-more-font-color);
    font-size: 0.8rem;
}

.project-see-more a:hover {
    font-size: 0.95rem;
} */

.project-see-more{
    padding: 10px;
}

.project-see-more a{
    display: inline-block;
    margin-top: 10px;
    padding: 8px 14px;
    background: #2c7be5;
    color: white;
    text-decoration: none;
    border-radius: 6px;
    font-size: 14px;
}

.project-see-more a:hover{
    background: #1a5fd1;
}

.project-tech span{
    background:#f2f2f2;
    padding:4px 8px;
    border-radius:4px;
    font-size:12px;
    margin-right:5px;
}

@media (max-width: 640px) {
    section {
        grid-template-columns: 1fr;
        row-gap: 20px;
        width: 80vw;
        /* height: 90vh; */
        /* min-width: 250px; */
        /* min-height: 300px; */
    }
}