@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;600;700&display=swap');
:root {
    --main-blue: #0870B8;
    --faded-blue: #498CC7;
    --background-gray: #A3B1B9;
    --black-background: #0F0E0E;
  }

/* BEGIN GENERAL */

* {
    font-family: 'Work Sans', sans-serif;
    box-sizing: border-box;
}

body {
    margin: 0;
    width: 100%;
}

h1, h2, h3 {
    text-align: center;
}

.d-none {
    display: none;
}

.flip-text {
    text-align: center;
    font-size: 12px;
    margin: 20px 15px 0 15px;
}

/* END GENERAL */
/* BEGIN HEADER */

header {
    background-color: var(--main-blue);
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header h2 {
    margin: 0;
}

header a {
    color: white;
    text-decoration: none;
}

header button {
    background-color: white;
    padding: 15px;
    border: none;
    border-radius: 30px;
    transition: all .35s;
}

header button:hover {
    background-color: #D3E2F1;
    cursor: pointer;
}

header button a {
    color: var(--main-blue);
}

header ul {
    list-style-type: none;
    padding: 0;
}

header img {
    height: 45px;
}

.logo-link {
    margin-right: .25rem;
}

.title-link:link {
    color: var(--main-blue);
}

.title-link:hover {
    text-decoration: none;
}

.title-link:active {
    color: #FF0000;
}

/* END HEADER */
/* START TITLE */

.title {
    background-color: var(--black-background);
    color: white;
    padding: 15px;
}

.title h1 {
    margin: 0;
    font-size: 1.75em;
}

/* END TITLE */
/* BEGIN FILTERS */

.filter-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 5px;
}

.filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    background-color: var(--background-gray);
    color: black;
    padding-bottom: 10px;
}

.filters .labels-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 5px;
}

.filters > div {
    margin: 0 15px;
}

.filters h2 {
    margin: 10px 5px 0 5px;
}

.filters .labels-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.filters .labels-container-column {
    display: flex;
    justify-content: center;
    align-items: center;
}

.filters .inner-filter {
    display: flex; align-items: center;
}

.filters label {
    background-color: var(--main-blue);
    color: white;
    padding: 2.5px;
    border-radius: 30px;
    transition: all .35s;
    font-size: 18px;
    margin: 2.5px;
    width: 215px;
    height: 55px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.filters label.filter--small {
    font-size: 13px;
    width: 175px;
    height: 40px;
}

.filters .filter--small img {
    max-width: 36px;
}

.filters .filter--small .checkmark {
    font-size: 25px;
}

.filters label:hover {
    cursor: pointer;
}

.filters label.highlight {
    background-color: var(--main-blue);
    color: white;
}

.filters label.highlight:hover {
    background-color: var(--faded-blue);
    cursor: pointer;
}

.filters label.no-highlight {
    opacity: .5;
}

.filters img {
    max-width: 50px;
    margin: 0 5px;
}

.filters .checkmark {
    font-size: 30px;
    margin-right: 10px;
}

.filters input:disabled, .parts-filters.disabled label {
    cursor: not-allowed;
    pointer-events: all;
}

.filters .disabled {
    opacity: .5;
}

/* END FILTERS */
/* BEGIN CARDS */

.card-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 15px auto;
    /* max-width: 1200px; */
    max-width: 1500px;
}

.card-container .card:hover {
    cursor: pointer;
}

.card-container img  {
    margin: 5px 7px;
}

.card-container .chassis-card {
    /* width: 30%; */
    /* max-height: 400px;
    flex-grow: 1; */
}

.card-container .part-card, .card-container .chassis-card--small {
    /* width: 18%; */
}

/* END CARDS */
/* BEGIN FOOTER */

footer {
    background-color: var(--black-background);
    color: white;
    padding: 5px;
    text-align: center;
}

/* END FOOTER */
/* BEGIN MEDIA QUERIES */

@media only screen and (max-width: 992px){
    .card-container .chassis-card {
        /* width: 47%; */
    }
    .card-container .part-card, .card-container .chassis-card--small {
        /* width: 22%; */
    }
}

@media only screen and (max-width: 768px){
    .card-container .part-card, .card-container .chassis-card--small {
        /* width: 30%; */
    }
}

@media only screen and (max-width: 500px){
    .card-container .chassis-card {
        /* width: 100%; */
    }
    .card-container .part-card, .card-container .chassis-card--small {
        /* width: 45%; */
    }
    .filters label, .filters label.filter--small {
        width: 135px;
        height: 35px;
        font-size: 12px;
    }
    .filters img, .filters .filter--small img {
        max-width: 25px;
    }
    .filters .checkmark, .filters .filter--small .checkmark {
        font-size: 18px;
    }
    .filters h2, .filters .filter--small h2 {
        font-size: 1.25em;
    }
    .filters > div, .filters .filter--small > div {
        /* margin: 0 2.5px; */
        margin: 0;
    }
}

@media only screen and (min-width: 975px){
    .filter-container--parts {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}

@media only screen and (min-width: 1370px){
    .filter-container--parts {
        grid-template-columns: 1fr 1fr;
    }
}

/* @media only screen and (max-width: 439.9px){
    .parts-filters > div {
        flex-direction: column;
        align-items: center;
    }
} */

@media only screen and (max-width: 657px){
    .card-container .chassis-card {
        height: 215px;
    }
}

@media only screen and (max-width: 457px){
    .card-container .chassis-card {
        height: 300px;
    }
}

/* END MEDIA QUERIES */