@font-face {
    font-family: 'bebas';
    src: url('font/BebasNeue-Regular.ttf');
}

@font-face {
  font-family: 'freesans';
  src: url('font/FreeSans.ttf')
}


:root{

  --base-font-size: 22px;
  --spec_name-font-size: 120%;
  --spec_value-font-size: 250%;

  --base-color: #271601; /* tekst */
  --alt-color: #FFF5DF;  /* achtergrond */

  /* /////// GAT VOORKANT PLEK & POSITIE //////// */
  /* */                                        /* */
  /* */ --pos-x: 555px; 		       /* */
  /* */ --pos-y: 120px;                         /* */
  /* */ --width: 420px;      /*  115mm            */
  /* */ --height: 1000px;    /*  270mm            */
  /* */                                        /* */
  /* //////////////////////////////////////////// */

}


html, body{
  margin: 0;
  padding: 0;
  border: 0;
  text-decoration: none;
  font-family: 'bebas';
  font-size: var(--base-font-size);
  line-height: 1.1;
  background: var(--alt-color);
  overflow: hidden;
}


#wrapper{

  position: absolute;
  left: var(--pos-x);
  top: var(--pos-y);
  width: var(--width);
  height: var(--height);

  background: var(--alt-color);
  box-sizing: border-box;
  padding: 2%;
}


#worker_specs{
  display:grid;
  grid-template-columns: 1fr ;
  grid-template-rows: repeat(50, 1fr 2fr);
}

.grid-item{
  color: var(--base-color);
}

.spec_name{
  font-size: var(--spec_name-font-size);
  font-family: 'freesans';
}

.spec_value{
  font-size: var(--spec_value-font-size);
  padding-bottom: 2%;
}


.phase{
  display:none;
}


.phase:not(#worker_specs){
  padding-top: 100%;
  text-align: center;
}

.narrative_phase_text{
  font-size: var(--spec_value-font-size);
}