:root{
  --width: 84;
  --pixel-width: 6px; 
  --height: 48;
  --pixel-height: 8px;
}

body {
  background-color: #888889;
}


.base {
  display: inline-block;
/*   width: calc((var(--pixel-width) + 1px) * var(--width) + 60px);
  height: calc((var(--pixel-height) + 1px) * var(--height) + 60px); */
  padding: 20px;
  background-color: #222222;
  position: relative;
  border-radius: 10px;    
}

.base::after{
  content: '';
  position: absolute;
  border-radius: inherit;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0) 45%);
} 



.matrix {
  display: grid; 
  grid-template-columns: repeat(var(--width), calc(var(--pixel-width) + 1px));
  grid-template-rows: repeat(var(--height), calc(var(--pixel-height) + 1px));
/*   grid-gap: 0px;
  row-gap: 0px;
  grid-row: 0px; */
/*   margin: 10px; */
  
/*   width: calc((var(--pixel-width) + 1px) * var(--width));
  height: calc((var(--pixel-height) + 1px) * var(--height)); */
  border-radius: 10px;
  padding: 20px;
  
  background-color: rgb(199, 240, 216);
  background-image: url(noise.png);
  background-size: 400px;
  opacity: 100%;
  background-repeat: repeat;

}

.matrix::after{
  content: '';
  position: absolute;
  
  border-radius: inherit;
  top: 20px;
  left: 20px;
  width: calc((var(--pixel-width) + 1px) * var(--width) + 40px);
  height: calc((var(--pixel-height) + 1px) * var(--height) + 40px);
  box-shadow: 
  5px 5px 10px  0px rgba(67, 82, 61, 0.493) inset,
  0px 0px 100px  0px rgba(82, 61, 61, 0.493) inset
  ;

}


.led {
  display: inline-block;
  margin: 0.5px;
  z-index: 4;
  width:  var(--pixel-width);
  height: var(--pixel-height);
  border-radius: 0px;
  background-color: rgb(67, 82, 61);

  box-shadow: 3px 3px 0px rgba(67, 82, 61, 0.212);
  will-change: background-color, box-shadow;
}

.off{
  transition: background-color 0.1s, box-shadow 0.1s;
  will-change: background-color, box-shadow;
  background-color: rgba(67, 82, 61, 0.062);
  box-shadow: 0px 0px 0px 0px rgba(255, 255, 190, .75);
}