.stat-block-area {
    grid-row: 1;
    grid-column: 5;
}

.creature-stat-block {
    animation: fadeIn 0.25s;
    background-blend-mode: lighten;
    background-color: #f9f9eb;
    border-color: black solid thin;
    border-radius: 3px;
    border: thin solid black;
    box-shadow: 2px 2px 2px #666;
    font-size: 13px;
    padding: 0px 10px 10px 10px;
    width: 400px;
    will-change: auto;
}

.creature-stat-block .block-header {
    background-color: var(--menu-dark);
    color: #ffffffef;
    border-bottom: 1px solid black;
    margin: 0 -10px;
    padding: 4px 8px;
    font-size: 16px;
    margin-bottom: 4px;
}

:root {
    --stat-block-primary: #58180D;
}

.creature-name {
    color: var(--stat-block-primary);
    font-size: 20px;
    font-weight: 700;
}

.section-title {
    border-bottom: 2px solid var(--stat-block-primary);
    color: var(--stat-block-primary);
    font-size: 18px;
    font-weight: 700;
    margin-top: 10px;
    padding: 3px 3px 0 3px;
}

.traits, .actions {
    white-space: pre-line;
}

.traits {
    /* border-bottom: 2px solid var(--stat-block-primary); */
}

.traits div, .actions div {
    margin-bottom: 2px;
}


.creature-header-stats {
    width: 100%;
}

.stat-spread table {
    margin-top: 10px;
    width: 100%;
}

.creature-stat-block table tr:nth-child(1) {
    background-color: rgba(0,0,0,0.1);
    font-weight: 600;
}

.creature-stat-block table b {
    color: var(--stat-block-primary);
}

.creature-header-stats td {
    text-align: center;
}

.stat-spread td {
    text-align: center;
}

.creature-type {
    font-style: italic;
}

.divider {
    width: 100%;
    margin: 5px 0 5px 0;
    border-top: 2px solid var(--stat-block-primary);
}

.creature-stat-block i {
    font-weight: 600;
    margin-left: 5px;
}

.creature-stat-block b {
    font-size: 14px;
    font-weight: 600;
}

.creature-stat-block hit::before {
    content: "+";
}

.creature-stat-block .actions damage, .creature-stat-block .actions condition {
    font-weight: 600;
    color: var(--title-blue);
}

#statBlockCloseButton {
    cursor: pointer;
    background: none;
    border: none;
    color: white;
    padding: 0;
    font-size: 16px;
}

.legendary-action {
    margin-bottom: 2px;
}

recharge::before {
    content: 'Recharge '
}

.hover-highlight:hover {
    color: var(--title-blue);
    cursor: pointer;
}

.hover-highlight {
    text-decoration: underline;
    background-color: #00aaff30;
}

span.italic {
    font-style: italic;
}

span.item {
    margin-left: 5px;
    font-weight: bold;
}