.sheet-die-container {
  position: relative;
  min-height: 50px;
}

.sheet-die-container span {
  position: absolute;
}

.sheet-d4 {
  font-family: 'dicefontd4';
}

.sheet-d6 {
  font-family: 'dicefontd6';
}

.sheet-d8 {
  font-family: 'dicefontd8';
}

.sheet-d10 {
  font-family: 'dicefontd10';
}

.sheet-d12 {
  font-family: 'dicefontd12';
}

.sheet-d20 {
  font-family: 'dicefontd20';
}

.sheet-d100 {
  font-family: 'dicefontd10';
}

input.sheet-dietype-flag[value='d4'] ~ .sheet-d4,
input.sheet-dietype-flag[value='d6'] ~ .sheet-d6,
input.sheet-dietype-flag[value='d8'] ~ .sheet-d8,
input.sheet-dietype-flag[value='d10'] ~ .sheet-d10,
input.sheet-dietype-flag[value='d12'] ~ .sheet-d12,
input.sheet-dietype-flag[value='d20'] ~ .sheet-d20,
input.sheet-dietype-flag[value='d100'] ~ .sheet-d100,
input.sheet-dietype-flag[value='d4'] ~ button .sheet-die-container .sheet-d4,
input.sheet-dietype-flag[value='d6'] ~ button .sheet-die-container .sheet-d6,
input.sheet-dietype-flag[value='d8'] ~ button .sheet-die-container .sheet-d8,
input.sheet-dietype-flag[value='d10'] ~ button .sheet-die-container .sheet-d10,
input.sheet-dietype-flag[value='d12'] ~ button .sheet-die-container .sheet-d12,
input.sheet-dietype-flag[value='d20'] ~ button .sheet-die-container .sheet-d20,
input.sheet-dietype-flag[value='d100'] ~ button .sheet-die-container .sheet-d100 {
  display: initial;
  font-size: 3.5em;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #2a2d80;
  text-shadow: rgb(0, 0, 0) 0px 0px 3px;
  z-index: 1;
  top: 14px;
  opacity: 0.8;
}

input.sheet-dietype-flag[value='d100'] ~ button .sheet-die-container .sheet-tn {
  letter-spacing: 0.95em;
  margin-left: 0.5em;
}

.sheet-d4::after,
.sheet-d6::after,
.sheet-d8::after,
.sheet-d10::after,
.sheet-d12::after,
.sheet-d20::after {
  content: '0';
}

.sheet-d100::after {
  content: '00';
}

.sheet-tn {
  border: none;
  background-color: transparent;
  font-size: 2em;
  z-index: 2;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  top: 16px;
  text-shadow: -1px -1px 1px #fff, 1px -1px 1px #fff, -1px 1px 1px #fff, 1px 1px 1px #fff;
}

.sheet-die-container-skill {
  position: relative;
  min-height: 15px;
  display: inline-block;
}

.sheet-die-container-skill .sheet-tn {
  font-size: 1em;
}

input.sheet-dietype-flag[value='0'] ~ .sheet-d10,
input.sheet-dietype-flag[value='1'] ~ .sheet-d6,
input.sheet-dietype-flag[value='2'] ~ .sheet-d6,
input.sheet-dietype-flag[value='3'] ~ .sheet-d6,
input.sheet-dietype-flag[value='4'] ~ .sheet-d6,
input.sheet-dietype-flag[value='5'] ~ .sheet-d6,
input.sheet-dietype-flag[value='6'] ~ .sheet-d8,
input.sheet-dietype-flag[value='7'] ~ .sheet-d10,
input.sheet-dietype-flag[value='8'] ~ .sheet-d12,
input.sheet-dietype-flag[value='9'] ~ .sheet-d20,
input.sheet-dietype-flag[value='10'] ~ .sheet-d100,
input.sheet-dietype-flag[value='11'] ~ .sheet-d100,
input.sheet-dietype-flag[value='12'] ~ .sheet-d100,
input.sheet-dietype-flag[value='13'] ~ .sheet-d100 {
  display: initial;
  font-size: 1.7em;
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  color: #2a2d80;
  text-shadow: rgb(0, 0, 0) 0px 0px 3px;
  z-index: 1;
  top: 14px;
  opacity: 0.8;
}

input.sheet-dietype-flag[value='10'] ~ .sheet-tn,
input.sheet-dietype-flag[value='11'] ~ .sheet-tn,
input.sheet-dietype-flag[value='12'] ~ .sheet-tn,
input.sheet-dietype-flag[value='13'] ~ .sheet-tn {
  letter-spacing: 0.95em;
  margin-left: 0.5em;
}

input.sheet-dietype-flag[value='10'] ~ .sheet-d100,
input.sheet-dietype-flag[value='11'] ~ .sheet-d100,
input.sheet-dietype-flag[value='12'] ~ .sheet-d100,
input.sheet-dietype-flag[value='13'] ~ .sheet-d100 {
  top: -0.35em;
}