html, body {
  margin: 0; 
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: #1b1919;
  display: grid;
  align-items: center;
  justify-content: center;
  margin:6px;
  min-height: calc(100vh - 12px);
  display: grid;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  
  background: linear-gradient(to right bottom, rgb(198, 139, 2) 20%, #fff199 40%, #cc9003 50%, #c9992a 55%, #fff08b 70%, rgb(198, 139, 2) 100%);
  background-size: 200% 150%;
  animation-delay: 2s;
  animation: shine 5s linear;
  animation-iteration-count: 2;
  animation-direction: alternate;
}
canvas {
  display:block;
  min-width: 300px;
  min-height: 300px;
  width: 100%;
  max-width: 100%;
  width: 100%!important;
  height: auto!important;
  max-height: calc(100vh - 12px);
  background: linear-gradient(to top left, rgb(163, 160, 153) 20%, #cececc 40%, #9c9584 50%, #ada89c 55%, #dfdede 70%, rgb(165, 160, 148) 100%);
  box-shadow:  inset 0 0 5px #c0c0c0, 0 0 1px 1px rgba(0, 0, 0, .45), 0 0 3px 3px #1b191926,  0 0 3px 2px #ffffff1a, 0 0 6px 4px #4747471d;
  transition: height 320ms ease-in-out, width 320ms ease-in-out;
}