html, body {
  height: 100%;
  background-color: #c1c1c1;
}

body {
  overflow: hidden; /* hide scrollbars */
}

canvas {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@keyframes example {
  0%   {background-color: cadetblue;}
  50%  {background-color: black;}
  100%   {background-color: cadetblue;}
  /* 100%  {background-color: blue;} */
}

.bg {
  width: 710px;
  height: 710px;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation-name: example;
  background-color: black;
  color: rgba(95, 159, 160, 0.5);
  font-size: 12px;
  
  /* animation-duration: 10s;
  animation-iteration-count: infinite; */
}

#ascii {
  font-family: hck, monospace;
  /* font-family: Consolas, Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace, serif !important; */
  white-space: pre;
  font-size: 12px;
}

@font-face {
  font-family: hck;
  src: url(assets/Hack-Regular.ttf);
  font-weight: regular;
}