.Card {
    height: 250px;
    width: 178px;
}

.filters-container {
    margin-top: 50px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#myform {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}

#prev-page {
    position:relative;
    left:0;
    top:0;
    height: 100px;
    width: 100px;
}

#next-page {
    position:relative;
    right:0;
    top:0;
    height: 100px;
    width: 100px;
}

#buttons-container {
    display: flex;
    flex-wrap: nowrap;
}

#view-as, #view-as-selector {
    margin-left: 50px;
    display: none;
}

#submit {
    border: none;
    background-color: green;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

#clear-filter {
    border: none;
    background-color: red;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
}

#cardBinder {
    margin:auto;
    border: 0.05em solid red;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    max-width: 1300px;
    justify-content:center;
}

#responseMessage {
    margin:auto;
    background: #f9f9f9;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    max-width: 1000px;
    justify-content:center;
}

.page {
    margin:auto;
    display:flex;
    flex-direction:row;
    flex-wrap: wrap;
    max-width: 1000px;
    justify-content:center;
    gap: 20px;
}

.ranges-grid {
    width: 1000px;
    height: auto;
    border: 5px solid green;
    display: grid;
    grid-row-gap: 1px;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-areas:
    "p-card-name search p-traits traits"
    "p-card-type card-type p-faction faction"
    "p-loyalty loyalty p-shields shields"
    "min-cost min-cost-entry max-cost max-cost-entry"
    "min-command min-command-entry max-command max-command-entry"
    "min-attack min-attack-entry max-attack max-attack-entry"
    "min-health min-health-entry max-health max-health-entry"
    "p-cycle cycle p-war-pack war-pack"
    "p-order order p-asc-desc asc-desc";
}

#card-counts-pages {
    display: flex;
    justify-content: center;
    align-items: center;
}

#p-loyalty {
    grid-area: p-loyalty;
}

#loyalty {
    grid-area: loyalty;
}

#p-shields {
    grid-area: p-shields;
}

#shields {
    grid-area: shields;
}

#min-cost {
    grid-area: min-cost;
}

#minCost {
    grid-area: min-cost-entry;
}

#max-cost {
    grid-area: max-cost;
}

#maxCost {
    grid-area: max-cost-entry;
}

#min-command {
    grid-area: min-command;
}

#minCommand {
    grid-area: min-command-entry;
}

#max-command {
    grid-area: max-command;
}

#maxCommand {
    grid-area: max-command-entry;
}

#min-health {
    grid-area: min-health;
}

#minHealth {
    grid-area: min-health-entry;
}

#max-health {
    grid-area: max-health;
}

#maxHealth {
    grid-area: max-health-entry;
}

#min-attack {
    grid-area: min-attack;
}

#minAttack {
    grid-area: min-attack-entry;
}

#max-attack {
    grid-area: max-attack;
}

#maxAttack {
    grid-area: max-attack-entry;
}

#p-war-pack {
    grid-area: p-war-pack;
}

#war-pack {
    grid-area: war-pack;
}

#p-cycle {
    grid-area: p-cycle;
}

#cycle {
    grid-area: cycle;
}

#p-order {
    grid-area: p-order;
}

#order {
    grid-area: order;
}

#p-asc-desc {
    grid-area: p-asc-desc;
}

#asc-desc {
    grid-area: asc-desc;
}