:root {
    --bg-color: #000;
    --ia-color: #600000;
    --a-color: #FF0000;
    --padding-p: 1px;
    --bar-w: 3px;
    --bar-pad: 1.5px;
  
    /* no need to change after here */
    --padding: calc(var(--padding-p)*2);
    --bar-h: calc(var(--bar-w)*4);
    --bar-r: calc(var(--bar-w)/2);
    --bar-p: calc(var(--padding-p) + var(--bar-w));
    --bar-p-t: calc(var(--bar-p)*2);
    --c-w: calc(var(--bar-p-t) + var(--bar-h));
    --bar-h-t: calc(var(--bar-h)*2);
    --c-h-np: calc(var(--bar-p-t) + var(--bar-h-t));
    --c-h: calc(calc(var(--c-h-np) + var(--padding-p)) + var(--bar-pad));
  }
  
  .s7s {
    display: inline-block;
    width: var(--c-w);
    height: var(--c-h);
    background: var(--bg-color);
    position: relative;
    margin: 0;
  }
  .s7s input {
    display: none;
  }
  
  .s7s seg {
    background: var(--ia-color);
    border-radius: var(--bar-r);
    height: var(--bar-h);
    width: var(--bar-w);
  }
  
  .s7s seg:nth-of-type(3n+1) {
    height: var(--bar-w);
    width: var(--bar-h);
    left: 50%;
    margin-left: calc(var(--bar-h) / -2);
  }
  
  .s7s seg:nth-of-type(1) {
    position: absolute;
    top: var(--padding);
  }
  
  .s7s seg:nth-of-type(2) {
    position: absolute;
    top: var(--bar-p);
    right: var(--padding);
  }
  
  .s7s seg:nth-of-type(3) {
    position: absolute;
    bottom: var(--bar-p);
    right: var(--padding);
  }
  
  .s7s seg:nth-of-type(4) {
    position: absolute;
    bottom: var(--padding);
  }
  
  .s7s seg:nth-of-type(5) {
    position: absolute;
    bottom: var(--bar-p);
    left: var(--padding);
  }
  
  .s7s seg:nth-of-type(6) {
    position: absolute;
    top: var(--bar-p);
    left: var(--padding);
  }
  
  .s7s seg:nth-of-type(7) {
    position: absolute;
    top: 50%;
    margin-top: calc(var(--bar-r) * -1);
  }
  
  input[value='0'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='0'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='0'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='0'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='0'] ~ seg:nth-of-type(5) {
    background: var(--a-color);
  }
  input[value='0'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  
  input[value='1'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='1'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  
  input[value='2'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='2'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='2'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='2'] ~ seg:nth-of-type(5) {
    background: var(--a-color);
  }
  input[value='2'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  input[value='3'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='3'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='3'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='3'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='3'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  input[value='4'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='4'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='4'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  input[value='4'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  
  input[value='5'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='5'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='5'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='5'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  input[value='5'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  input[value='6'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='6'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='6'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='6'] ~ seg:nth-of-type(5) {
    background: var(--a-color);
  }
  input[value='6'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  input[value='6'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  
  input[value='7'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='7'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='7'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  
  
  input[value='8'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(5) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  input[value='8'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }
  
  input[value='9'] ~ seg:nth-of-type(1) {
    background: var(--a-color);
  }
  input[value='9'] ~ seg:nth-of-type(2) {
    background: var(--a-color);
  }
  input[value='9'] ~ seg:nth-of-type(3) {
    background: var(--a-color);
  }
  input[value='9'] ~ seg:nth-of-type(4) {
    background: var(--a-color);
  }
  input[value='9'] ~ seg:nth-of-type(6) {
    background: var(--a-color);
  }
  input[value='9'] ~ seg:nth-of-type(7) {
    background: var(--a-color);
  }