/* Page 1 Layout */
#page-overview {
    grid-template-columns: [page-left] 50% [center] auto [page-right];
    grid-template-rows: [page-top] 45% [middle] auto [page-bottom];
}

/* Page 1 Boxes */
#character-header {
    grid-column: page-left / center;
    grid-row: page-top / middle;
    font-family: 'Merienda', cursive;
    margin-right: -10px;
    padding-right: 10px;
    padding-left: 5px;
    padding-top: 5px;
    z-index: 2;
}
#portrait-box {
    grid-column: center / page-right;
    grid-row: page-top / middle;
    z-index: 3;
}
#abilities-box {
    grid-column: page-left / page-right;
    grid-row: middle / page-bottom;
    margin-top: -10px;
    padding-top: 10px;
    z-index: 1;
}

/* Page 1 Elements */
#character-name {
    font-size: 24pt;
    text-align: center;
}
#character-class {
    font-size: 18pt;
    text-align: center;
}
#character-level {
    font-size: 14pt;
    text-align: center;
}
table#physical-descriptors {
    font-size: 10pt;
    width: 100%;
    margin: 20px 10px 20px;
}
table#physical-descriptors p {
    text-indent: -10px;
    padding-left: 10px;
    margin: 0;
}
p#alignment-text {
    font-size: 10pt;
    text-align: center;
    margin: 0;
}

#portrait-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

#abilities-box {
    display: grid;
    grid-template-columns: [left] auto auto auto [right];
    grid-template-rows: [top] auto [under-header-1] auto [above-header-2] auto [under-header-2] auto [top-of-profiency-bonus-area] auto;
}
#abilities-box>:not(table) {
    grid-column: left / right;
}
#abilities-box .header-with-hr {
    height: 24px;
}
#abilities-box .header-with-hr:nth-child(2) {
    grid-row: above-header-2 / under-header-2;
}



.ability-table tr:nth-child(1) {
    font-family: Merienda, cursive;
}
.ability-table tr:nth-child(1) td:nth-child(1) {
    font-size: 18pt; /* 20 */
    text-align: center;
}
.ability-table tr:nth-child(1) td:nth-child(2) {
    font-size: 14pt; /* 14 */
}

.ability-table tr:not(:nth-child(1)) {
    font-family: Verdana, Arial, sans-serif;
    font-size: 9pt;
}
.ability-table tr:not(:nth-child(1)) td:nth-child(1) {
    /* Star */
    width: 20px;
    font-size: 12pt;
    line-height: 8pt;
    text-align: right;
}
.ability-table tr:not(:nth-child(1)) td:nth-child(2) {
    /* +/- Modifier */
    width: 25px;
}

#proficiencies {
    font-family: Merienda, cursive;
    display: flex;
    justify-content: space-around;
    flex-direction: row;
}
#saving-throw-potential-modifiers {
    font-family: Merienda, cursive;
    font-size: 9pt;
    margin: 3px 0;
    text-align: center;
}