*, *::before, *::after  {
  box-sizing: border-box;
}

:root                   {
  --col-hvid: rgb( 255 255 255 );
  --col-h40: rgb( 255 255 255 / .6 );
  --col-gron: rgb( 0 120 80 );
  --col-mgron: rgb( 0 90 60 );
  --col-250: rgb( 250 250 250 );
  --col-225: rgb( 225 225 225 );
  --col-210: rgb( 210 210 210 );
  --col-b20: rgb( 0 0 0 / .2 );
  --col-b40: rgb( 0 0 0 / .4 );
  --col-b80: rgb( 0 0 0 / .8 );
  --lg-bg: repeating-linear-gradient( 115deg, var( --col-225 ), var( --col-225 ) 2px, var( --col-250 ) 3px, var( --col-250 ) .395rem);
  --lg-gbg: linear-gradient( 25deg, var( --col-gron ), var( --col-mgron ) );
  --lg-hr: linear-gradient( to right, var( --col-gron ) 20%, transparent 20% 100% );
  --lg-bg2: linear-gradient( 25deg, var( --col-b20 ), transparent 25% 50%, var( --col-h40 ) 90% );
}

html  {
  height: 100%;
  width: 100%;
}

body  {
  background-image: var( --lg-bg );
  font-family: Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
  padding: 1.5rem;
  color: var( --col-b80 );
}

h1  {
  text-align: center;
  color: var( --col-b80 );
  text-transform: uppercase;
  font-weight: 200;
  text-shadow:  0 0 6px var( --col-hvid );
}

.container  {
  width: min( 960px, 100% );
  margin: 0 auto;
  display: grid;
  grid: repeat( 4, 1fr );
  grid-template-columns: auto auto auto auto;
  gap: .5rem;
  border-radius: .25rem;
  background-color: var( --col-hvid );
  border: solid 15px var( --col-hvid );
  box-shadow: -.4rem .4rem .8rem var( --col-210 );
}

.item {
  max-width: 100%;
  /*border: solid 1px rgb( 150 150 255 );*/
}

.hed, .dia  {
  text-align: center;
  font-weight: 600;
  border-bottom: solid 1px rgb( 150 150 255 );
}

.data {
  text-align: right;
  padding-right: 2rem;
  border-bottom: solid 1px rgb( 150 150 255 );
}