/* version: 3.0.0 */

:root {
    --base-card-separation: 4px;
    --scaled-card-width: 336px;
    --scaled-card-height: 448px;
    --scaled-card-separation: 4px;
}


div#discovery-table {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-evenly;
    align-items: flex-start;
}

div.character-container {
    margin: 2px 0;
    padding: 2px 0;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: flex-start;
    align-items: center;
    border: 1px solid black;
    border-collapse: separate;
    border-radius: .5em;
}

@media (max-width: 768px) {
    div.character-container {
        margin: 2px 0 10px;
    }
}

div.card-wrapper {
    margin: var(--scaled-card-separation);
    padding: 0;
    width: var(--scaled-card-width);
    max-width: var(--scaled-card-width);
    height: var(--scaled-card-height);
    max-height: var(--scaled-card-height);
}

div.roll-label {
    text-align: left;
    font-size: .8em;
    font-weight: 700;
}

div.discoverer-name {
    font-family: "Rum Raisin", sans-serif;
    font-weight: 100;
    font-size: 1.5em;
    color: #b8d0a0;
    padding: 0 .1em 0 .1em;
}

@media (max-width: 768px) {
    div.discoverer-name {
        font-size: 1.2em;
    }
}

div.discovery-date {
    font-family: "Rum Raisin", sans-serif;
    text-align: center;
    font-weight: 100;
    color: #30a098;
    padding-top: .1em;
}

tr.discovered-character div.character-name {
    font-weight: 600;
}

tr.undiscovered-character div.character-name {
    font-size: 1.6em;
    font-style: italic;
    font-weight: 100;
    color: #a0a0a0;
}

tr.discovered-character div.roll-label,
tr.discovered-character div.discovery-date {
    color: #80b090;
}

tr.undiscovered-character div.roll-label,
tr.undiscovered-character div.discovery-date {
    color: #a0a0a0;
}