/* the project.css file contains all styles for the projects section */
main { /* main container - projects */
    height: auto; /* project section takes up screen */
    display: flex; /* next four center the contents */
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    background-color: var(--background);
}

/* card container styles */
.grid-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    max-width: 950px; /* maximum width of the grid */
    margin: 1rem;
    padding: 1rem;
    transition: box-shadow ease-in 200ms 2ms;
}

article { /* project card */
    background-color: var(--mainBackground);
    border: solid .2rem var(--border);
    border-radius: 2rem;
    height: auto; /* maximum height of the card */
    width: 20rem; /* maximum height of the card */
    display: flex;
    flex-direction: column;
    margin: 1rem;
}

article:hover {
    box-shadow: 0 0 5rem rgba(238, 187, 195, 1);
}

p { /* project descriptions */
    padding: 0 1rem;
}

.label { /* project label container */
    display: flex;
    padding: .5rem .5rem;
    justify-content: space-evenly;
}

.label i { /* project labels */
    color: var(--background);
    justify-content: space-evenly;
    font-size: 2rem;
    padding: 0.25rem;
    display: inline-block;
}

.project-links { /* container for project icons */
    /*padding: 1rem;*/
    display: flex;
    justify-content: center;
    transition: all 1s ease;
}

button {
    font-size: 1rem;
    color: var(--button);
    background-color: var(--background);
    border: .1rem solid var(--label);
    border-radius: 4rem;
    margin: 1rem;
    padding: .5rem;
}

button:hover {
    cursor: pointer;
    color: var(--background);
    background-color: var(--button);
    border: .1rem dashed var(--background);
}