#content {
    background-image: url(../img/dalle-macro.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: var(--clr-primary);
    background-attachment: fixed;
}

#description {
    padding: 2em 4em;
    text-align: center;
    margin: 6em 15% 3em;
}


#project-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.project {
    position: relative;
    width: 75%;
    margin: 2em 0;
    padding-bottom: 3em;

    opacity: 0;
    transition: opacity 250ms ease-in-out, transform 500ms ease-in-out;
}

.project:nth-of-type(odd) {
    transform: translateX(-50%);
}

.project:nth-of-type(even) {
    transform: translateX(50%);
}

.project.appear {
    opacity: 1;
    transform: translateX(0);
}

.project:nth-child(even) {
    align-self: flex-end; 
    text-align: right;
}

.project-title {
    --spacer: 2em;
    position: relative;
    color: var(--clr-accent);
}

.project:nth-child(even) .project-title {
    text-align: left;
    margin-left: var(--spacer);
}

.project:nth-child(odd) .project-title {
    text-align: right;
    margin-right: var(--spacer);
}

.project-title::after {
    content: '';
    height: 4px;
    width: calc(100% + var(--spacer));
    background: var(--clr-accent);
    display: block;
    position: absolute;
    left: calc(-1 * var(--spacer));
}

.project:nth-child(odd) .project-title::after {
    left: 0;
}

.project-description {
    text-align: center;
    padding: 3em 25% 1em;
}

.img-row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-around;
}

.img-row > .project-img {
    padding: 0;
    margin: 0;
    margin-bottom: 20px;
    max-width: 200px;
}

.project-img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding: 0 2em;
}