:root {
  --header-height: 80px;
  --footer-height: 60px;
  --filter-height: 90px;
}

.main-projects,
.category_filter {
    display: flex;
    justify-content: center;
}

.main-projects {
    margin-top: 7.6rem;
}

.category_filter {
    margin-block: 3rem 5rem;
    /* background-color: var(--clr-bg);
    border-bottom: 1px solid black; */
}

.category_filter form {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-inline: var(--margin-1);
}

.category_filter form label:hover {
    cursor: pointer;
}

.category_filter form input {
    margin-right: 0.3rem;
}

/* Project List */

.project_list {
    width: 50vw;
    min-width: 500px;
}
@media screen and (width < 700px) {
    .project_list {
        width: 100%;
        min-width: 0;
    }
    .category_filter {
        display: none;
        /* margin-block: 1rem 2rem; */
        margin-block: 0rem 2rem;
        padding-bottom: 1rem;
    }
    .category_filter.visible {
        display: block;
        position: fixed;
    }
}

.project_list .project_top {
    font-family: "Geist";
    display: grid;
    grid-template-columns: 1fr max-content 1fr;
    font-size: var(--font-size-small);
    margin-bottom: 0.8rem;
}

@media screen and (width < 500px) {
    .categories {
        grid-column: 3;
        justify-self: end;
    }
}

.category:not(:last-of-type)::after {
    content: ',';
}

.project_list_item a:hover {
    text-decoration: underline;
}

.project_list_item:not(:last-of-type)::after {
    content: '——';   
    display: inline-block;
    margin-block: 1rem 1.25rem;
}

.project_list_item.is-hidden {
  display: none !important;
}

.index_image {
    display: none;
    margin-bottom: 0.8rem;
}
@media screen and (width < 700px) {
    .index_image {
        display: block;
    }
}

.hover-bg-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1;            
  opacity: 0;            
  pointer-events: none; 
  transition: opacity 0.3s ease-in-out;
}

.hover-bg-container.is-active {
  opacity: 1;
}