:root {
    --accent: #d11b41;
    --white: #ffffff;
}

.projects h2, #projects-title {
    color: var(--accent);
}

.filter {
    background: transparent;
    color: var(--accent);
    border: 4px solid var(--accent);
}

.filter:hover {
    background: var(--accent);
    color: var(--white);
    cursor: pointer;
}

.filter.active {
    background: var(--accent);
    color: var(--white);
}

/* hide filtered items */
.project-card.hidden {
    display: none;
}

.project-card:hover {
    box-shadow: var(--accent) 0 1rem 2rem;
}

.site-footer {
    margin-top: 4rem;
}