/* Card Buttons */

.card-button {
    transition: background-color .3s, color .3s, box-shadow .3s;
    width: 100%;
    height: 100px;

    font-size: 1.4rem;
    font-weight: 700;
    background: hsl(0, 0%, 100%);
    color: var(--brand-color-text);
    cursor: pointer;

    border-radius: 0.5rem;
    border: var(--border-card);
    box-shadow: var(--shadow);
}

.card-button:hover,
.card-button:focus {
    background: hsl(0, 0%, 92.5%);
    box-shadow: var(--highlight-shadow);
}

/* Match Info Cards */

.match-info-card {
    transition: background-color .3s, color .3s, box-shadow .3s;
    position: relative;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.match-info-card .card-display {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-height: 100%;
    max-width: 100%;
    cursor: default;
}

.match-info-card .card-content {
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.match-info-card .card-text-above-icon {
    margin-bottom: 5px;
}

.match-info-card .card-icon {
    margin-bottom: 5px;
}

/* Profile Cards */

.game-profile-card {
    transition: background-color .3s, color .3s, box-shadow .3s, transform .3s;
    width: 240px;
    height: 120px;
    flex-shrink: 0;

    background: var(--basecol-100);
    color: var(--brand-color-text);
    cursor: pointer;

    border-radius: 0.5rem;
    border: var(--border-card);
    box-shadow: var(--shadow);
}

.game-profile-card,
.load-more-card {
    margin-right: 12px;
    margin-bottom: 15px;
}

.game-profile-card:hover {
    transform: translateY(0.5rem);
    background: var(--basecol-95);
    box-shadow: var(--highlight-shadow);
    color: var(--brand-color-text-muted);
}

.profile-card-title {
    font-size: 1rem;
    font-weight: 800;
}

.profile-card-body {
    padding: 0.75rem;
}

.profile-card-match-info {
    padding-left: 0.5rem;
    padding-top: 0.25rem;
}

.profile-card-match-info li {
    list-style: none;
    margin: 0.1rem auto;
    padding: 0;

    list-style-type: none;
    font-weight: 700;
    font-size: 0.8rem;
}

.profile-card-match-info li::before {
    font-family: "Font Awesome 7 Free";
    padding: 0 0.45rem 0 0;
    font-size: 0.8rem;
}

.profile-card-match-info li.datetime::before {
    content: "\f017";
    padding-right: 0.25rem;
}

.profile-card-match-info li.location::before {
    content: "\f3c5";
}

.profile-card-match-info li.teams::before {
    content: "\f70c";
    padding-right: 0.35rem;
}