header.sheet-header { .character-values { flex: 0 0 100%; .attributes-traits { margin-top: $margin-sm; .attribute { .attribute-label { font-family: $font-heading; font-size: 2em; text-align: center; } .attribute-value { border: 2px groove $c-border-groove; line-height: 26px; font-size: 1.5em; text-align: center; padding-left: 2px; padding-right: 2px; gap: 0; input, .attribute-value-total { grid-column: span 2; } } } .trait { .trait-label { color: transparent; font-family: $font-heading; font-size: 2em; text-align: center; //text-shadow: -1px 1px 0 $c-black, 1px 1px 0 $c-black, 1px -1px 0 $c-black, -1px -1px 0 $c-black; -webkit-text-stroke: 1px $c-black; } .trait-value { border: 2px groove $c-border-groove; font-size: 1.5em; line-height: 26px; text-align: center; padding-left: 2px; padding-right: 2px; gap: 0; input, .trait-value-total { grid-column: span 2; } } } } .combat-values { margin-top: $margin-sm; .combat-value-with-formula { display: grid; place-items: center; $size: 60px; row-gap: $margin-sm; .combat-value { display: grid; place-items: center; height: $size; width: $size; flex: 0 0 auto; background-size: contain; font-size: 1.5em; } .combat-value-formula { width: $size; input { text-align: center; } } } .combat-value.hitPoints { background-image: url("assets/DS4-HP.png"); } .combat-value.defense { background-image: url("assets/DS4-DEF.png"); } .combat-value.initiative { background-image: url("assets/DS4-INI.png"); } .combat-value.movement { background-image: url("assets/DS4-MR.png"); } .combat-value.meleeAttack { background-image: url("assets/DS4-MAT.png"); } .combat-value.rangedAttack { background-image: url("assets/DS4-RAT.png"); } .combat-value.spellcasting { background-image: url("assets/DS4-SPC.png"); } .combat-value.targetedSpellcasting { background-image: url("assets/DS4-TSC.png"); } } } }