@import url('https://fonts.googleapis.com/css2?family=PT+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@300&display=swap');
.sheet-main-container {
    width: 712px;
    height: 500px;
    display: flex;
    position: relative;
    background-image: url("https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-background.png");
    background-size: 712px 1010px;
}

.sheet-main-container>img {
    position: absolute;
    bottom: 75px;
    right: 0;
    z-index: -1;
}

.sheet-grid-container {
    margin: 10px 30px 40px 10px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(12, max-content);
    gap: 0px 0px;
    grid-template-areas: 
        "portrait-header positive-header" 
        "portrait positive-feature" 
        "portrait negative-header" 
        "portrait nefative-feature" 
        "portrait bonus-header" 
        "portrait bonus" 
        "portrait gear-header" 
        "portrait gear1" 
        "profession-name gear2" 
        "power gear3" 
        "karma gear4";
    column-gap: 1em;
}

.sheet-portrait-header {
    grid-area: portrait-header;
}

.sheet-positive-header {
    grid-area: positive-header;
}

.sheet-positive-feature {
    grid-area: positive-feature;
}

.sheet-negative-header {
    grid-area: negative-header;
}

.sheet-negative-feature {
    grid-area: nefative-feature;
}

.sheet-portrait {
    display: inline-grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas: 
        "head head head head head head" 
        "right-hand right-hand torso torso left-hand left-hand" 
        "right-leg right-leg right-leg left-leg left-leg left-leg";
    grid-area: portrait;
}

.sheet-portrait-container {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    position: relative;
    font-family: 'PT Sans', sans-serif;
}

.sheet-head {
    grid-area: head;
}

.sheet-right-hand {
    grid-area: right-hand;
}

.sheet-torso {
    grid-area: torso;
}

.sheet-left-hand {
    grid-area: left-hand;
}

.sheet-right-leg {
    grid-area: right-leg;
}

.sheet-left-leg {
    grid-area: left-leg;
}

.sheet-profession-name {
    grid-area: profession-name;
    display: flex;
}

.sheet-power {
    grid-area: power;
    display: grid;
    grid-template-columns: 70px max-content max-content max-content;
    align-items: center;
}

.sheet-karma {
    grid-area: karma;
    display: grid;
    grid-template-columns: 70px max-content;
    align-items: center;
}

.sheet-bonus {
    grid-area: bonus;
}

.sheet-gear-header {
    grid-area: gear-header;
}

.sheet-gear1 {
    grid-area: gear1;
}

.sheet-gear2 {
    grid-area: gear2;
}

.sheet-gear3 {
    grid-area: gear3;
}

.sheet-gear4 {
    grid-area: gear4;
}

.sheet-header {
    font-family: 'Comic Neue', sans-serif;
    margin: 5px 0px;
}

.sheet-row-input {
    font-family: 'PT Sans', sans-serif;
    margin: 5px 0px;
    width: 100%;
}

.sheet-labeled-row {
    display: grid;
    grid-template-columns: max-content 1fr;
    align-items: center;
}

input {
    margin: 0px 5px;
}

button {
    margin: 5px 0px;
}

.sheet-head-zone-enabled,
.sheet-torso-zone-enabled,
.sheet-rhand-zone-enabled,
.sheet-lhand-zone-enabled,
.sheet-rleg-zone-enabled,
.sheet-lleg-zone-enabled {
    width: 105px;
    height: 65px;
    position: absolute;
    z-index: -1;
}

.sheet-head-zone-disabled,
.sheet-torso-zone-disabled,
.sheet-rhand-zone-disabled,
.sheet-lhand-zone-disabled,
.sheet-rleg-zone-disabled,
.sheet-lleg-zone-disabled {
    width: 105px;
    height: 65px;
    position: absolute;
    z-index: -2;
}

.sheet-head-harm:not(:checked)~.sheet-head-zone-enabled,
.sheet-torso-harm:not(:checked)~.sheet-torso-zone-enabled,
.sheet-rhand-harm:not(:checked)~.sheet-rhand-zone-enabled,
.sheet-lhand-harm:not(:checked)~.sheet-lhand-zone-enabled,
.sheet-rleg-harm:not(:checked)~.sheet-rleg-zone-enabled,
.sheet-lleg-harm:not(:checked)~.sheet-lleg-zone-enabled {
    display: none;
}

.sheet-rolltemplate-strengthcheck {
    background-image: url(https://raw.githubusercontent.com/Noisyflasher/roll20-character-sheets/stickstation13/stickstation13/images/stickstation13-background.png);
    background-size: 285px 404px;
    text-align: center;
}

.sheet-rolltemplate-strengthcheck .inlinerollresult {
    background-color: transparent;
    border: none;
    color: black;
}

.sheet-rolltemplate-strengthcheck .sheet-upper-case-name {
    text-transform: uppercase;
}