:root {
    --primary-color-all: #e30202;
    --primary-color-web: #2d45b3;
    --primary-color-software: #9a23b4;
    --primary-color-game: #009b0a;

    --secondary-color-web: #a8b0ff;
    --secondary-color-software: #eea8ff;
    --secondary-color-game: #a8ffb4;
}

/* Main */
section {
    margin-bottom: 30px;
}

/* ################## Category Dropdown Container ##################*/
.category-dropdown-container {
    background-color: white;
    height: 35px;
    width: 290px;
    font-size: 1.12rem;
    border-radius: 5px;
    position: relative;
    cursor: pointer;
    z-index: 1;
}

.selection {
    width: 100%;
    height: 100%;
    border: 1px solid black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
}

.selection:after {
    content: "";
    width: 12px;
    height: 8px;
    background-color: #333;
    clip-path: polygon(100% 0%, 0 0%, 50% 100%);
}

.options {
    background-color: white;
    width: 100%;
    display: none;
    border: 1px solid #777777;
    border-radius: 5px;
    position: absolute;
    left: 0;
    top: 35px;
    overflow: hidden;
}

.options li {
    padding: 8px 10px;
}

.options li:hover {
    background-color: #f6f6f6;
}

.highlight-selection {
    border: 2px solid #777777;
}

.show-options {
    display: block;
}


/* ####################### Category Container #######################*/
.category-container {
    width: 100%;
    font-size: 0.95rem;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.category-container .categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 25px;
}

.category-item {
    background-color: white;
    border-width: 2px;
    border-style: solid;
    border-radius: 8px;
    padding: 5px 12px;
    cursor: pointer;
}

/* All Category */
.all-category {
    border-color: var(--primary-color-all);
    color: var(--primary-color-all);
}

.all-category:hover {
    background-color: var(--primary-color-all);
    color: white;
}

.all-category.active-item {
    background-color: var(--primary-color-all);
    color: white;
}

/* Web Category */
.web-category {
    border-color: var(--primary-color-web);
    color: var(--primary-color-web);
}

.web-category:hover {
    background-color: var(--primary-color-web);
    color: white;
}

.web-category.active-item {
    background-color: var(--primary-color-web);
    color: white;
}

/* Software Category */
.software-category {
    border-color: var(--primary-color-software);
    color: var(--primary-color-software);
}

.software-category:hover {
    background-color: var(--primary-color-software);
    color: white;
}

.software-category.active-item {
    background-color: var(--primary-color-software);
    color: white;
}

/* Game Category */
.game-category {
    border-color: var(--primary-color-game);
    color: var(--primary-color-game);
}

.game-category:hover {
    background-color: var(--primary-color-game);
    color: white;
}

.game-category.active-item {
    background-color: var(--primary-color-game);
    color: white;
}


/* ######################## Project Grid Container #######################*/
.grid-container {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    justify-items: center;
}

.card-container {
    background-color: white;
    border-radius: 10px;
    width: 290px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.3);
    box-shadow: 0px 0px 10px -3px rgba(0,0,0,0.3);
    cursor: pointer;
}

.card-container:hover {
    transform: scale(1.02);
}

.card-container .header-container {
    width: 100%;
    height: 192px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.header-container h2 {
    font-size: 1.65rem;
    color: black;
}

.web-project {
    background-color: var(--secondary-color-web);
}

.software-project {
    background-color: var(--secondary-color-software);
}

.game-project {
    background-color: var(--secondary-color-game);
}

.header-container h2 {
    text-align: center;
}

.card-container .text-container {
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 16px 15px;
}

.text-container .summary {
    color: #444444;
    font-size: 1rem;
}


@media screen and (min-width: 490px) {
    .category-dropdown-container {
        display: none;
    }

    .category-container {
        display: flex;
    }
}


@media screen and (min-width: 650px) {
    section.category-container {
        font-size: 1.1rem;
        margin-bottom: 40px;
    }

    .category-container .categories {
        gap: 35px;
    }

    .category-item {
        padding: 7px 15px;
    }

    .grid-container {
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }
}


@media screen and (min-width: 980px) {
    section.main-content {
        margin-bottom: 40px;
    }

    .grid-container {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 30px;
    }
}