@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: 12px;
  --spec_name-font-size: 120%;
  --spec_value-font-size: 250%;

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

  /* ////// GAT ACHTERKANT PLEK & POSITIE /////// */
  /* */                                        /* */
  /* */ --pos-x: 20px; /* */
  /* */ --pos-y: 20px;                        /* */
  /* */ --width: 90%;       /*  115mm            */
  /* */ --height: 100%;      /*  500mm            */
  /* */                                        /* */
  /* //////////////////////////////////////////// */

}


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

#logo{
  background: #555;
  width: 100%;
  padding: 2% 0% 1% 0%;
  text-align: right;
}

#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%; */
}


table{
  display: grid;
  border-collapse: collapse;
  min-width: 100%;
  grid-template-columns: repeat(6, 1fr);
}

thead, tbody, tr{
  display: contents;
}


th,
td {
  padding: 2%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

th {
  position: -webkit-sticky;
  position: sticky;
  background-image: linear-gradient(var(--alt-color), var(--amazon-color)) ;
  top: 0;
  text-align: left;
  font-weight: normal;
  font-size: 1.1rem;
  color: var(--base-color);
}

th:last-child {
  border: 0;
}

td {
  padding-top: 2%;
  padding-bottom: 2%;
  color: #808080;
}

tr:nth-child(even) td {
  background: #f8f6f9;
}