Try adding this tot the CSS (I put it on the top, if it matters) .charsheet {
width:840px;
background:#384B5D;
color:white;
font-family: Saira Semi Condensed;
}
.charsheet h2,
.sheet-journal_heading {
color:white;
}
.sheet-gs4,.sheet-gs5,.sheet-gs6,.sheet-gs8,.sheet-gs9,.sheet-gs10 {
width:220px;
}
.sheet-gs7 {
-webkit-filter: drop-shadow(0px 0px 5px white);
}
.sheet-gs4 input[type="text"],.sheet-gs5 input[type="text"],.sheet-gs6 input[type="text"],.sheet-gs8 input[type="text"],.sheet-gs9 input[type="text"],.sheet-gs10 input[type="text"],
input[type="text"].sheet-objectives {
text-align:left;
}
.sheet-characteristics {
background:black;
}
button[type=action]:before {
content: "";
}
button[type=action] {
color:white;
background:#24395A;
font-family: Saira Semi Condensed;
margin:0px;
padding:0px;
}
@import url('<a href="https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap" rel="nofollow">https://fonts.googleapis.com/css?family=Saira+Semi+Condensed&display=swap</a>');
select,
input[type="text"],
input[type="number"] {
width: calc(100% - 5px);
color:white;
font-family: Saira Semi Condensed;
text-align:center;
background:#24395A;
}
button[type="roll"]::before {
content: "";
}
button[type="roll"] {
color:white;
background:black;
font-family: Saira Semi Condensed;
margin:0px;
padding:0px;
width: calc(100% - 5px);
}
.sheet-characteristics_box button[type="roll"] {
color:white;
background:black;
font-family: Saira Semi Condensed;
margin:0px;
padding:0px;
width:75px;
}
textarea {
width: calc(100% - 10px);
color:white;
font-family: Saira Semi Condensed;
text-align:left;
background:#24395A;
}
