html, body {
  top: 0;
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

body {
  background-color: #666;
  font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
  color: white; }

nav {
  position: fixed;
  top: 0;
  width: 10%;
  height: 100%;
  background-color: #444; }
  nav ul {
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    list-style-type: none;
    padding: 0; }
    nav ul li a {
      text-decoration: none;
      color: white; }
      nav ul li a img {
        display: block;
        background-color: lightgrey;
        width: 40px;
        height: 40px;
        padding: 5px;
        border-radius: 5px;
        margin: 2px auto; }
      nav ul li a span {
        display: block;
        text-align: center; }

main {
  top: 0;
  margin-left: 10%;
  padding: 10px; }

@media screen and (max-width: 630px) {
  nav {
    width: 100%;
    height: 100px; }
    nav ul {
      grid-template-columns: repeat(4, 1fr); }
  main {
    margin-left: 0;
    margin-top: 100px; } }

main {
  padding: 0; }

@media screen and (max-width: 630px) {
  main {
    padding: 0; } }

canvas {
  display: block;
  margin: 0 auto;
  background-color: black; }

/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9waWdzLWluLXNwYWNlL2xheW91dC9fbGF5b3V0LnNjc3MiLCJ3ZWJwYWNrOi8vLy4vcGlncy1pbi1zcGFjZS9waWdzLWluLXNwYWNlL3BpZ3MtaW4tc3BhY2Uuc2NzcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtFQUNJLE9BQU07RUFDTixVQUFTO0VBQ1QsV0FBVTtFQUNWLHVCQUFzQixFQUN6Qjs7QUFFRDtFQUNJLHVCQUF1QjtFQUN2QixnRUFBK0Q7RUFDL0QsYUFBWSxFQUNmOztBQUVEO0VBQ0ksZ0JBQWU7RUFDZixPQUFNO0VBQ04sV0FBVTtFQUNWLGFBQVk7RUFDWix1QkFBc0IsRUEyQnpCO0VBaENEO0lBT1EsY0FBYTtJQUNiLDJCQUEwQjtJQUMxQixjQUFhO0lBQ2Isc0JBQXFCO0lBQ3JCLFdBQVUsRUFvQmI7SUEvQkw7TUFjZ0Isc0JBQXFCO01BQ3JCLGFBQVksRUFjZjtNQTdCYjtRQWlCb0IsZUFBYztRQUNkLDRCQUEyQjtRQUMzQixZQUFXO1FBQ1gsYUFBWTtRQUNaLGFBQVk7UUFDWixtQkFBa0I7UUFDbEIsaUJBQWdCLEVBQ25CO01BeEJqQjtRQTBCb0IsZUFBYztRQUNkLG1CQUFrQixFQUNyQjs7QUFNakI7RUFDSSxPQUFNO0VBQ04saUJBQWdCO0VBQ2hCLGNBQWEsRUFDaEI7O0FBRUQ7RUFDSTtJQUNJLFlBQVc7SUFDWCxjQUFhLEVBSWhCO0lBTkQ7TUFJUSxzQ0FBcUMsRUFDeEM7RUFFTDtJQUNJLGVBQWM7SUFDZCxrQkFBaUIsRUFDcEI7O0FDOURMO0VBQ0ksV0FBVSxFQUNiOztBQUVEO0VBQ0k7SUFDSSxXQUFVLEVBQ2I7O0FBR0w7RUFDSSxlQUFjO0VBQ2QsZUFBYztFQUNkLHdCQUF1QixFQUMxQiIsImZpbGUiOiJwaWdzLWluLXNwYWNlLmNzcyIsInNvdXJjZXNDb250ZW50IjpbImh0bWwsIGJvZHkge1xyXG4gICAgdG9wOiAwO1xyXG4gICAgbWFyZ2luOiAwO1xyXG4gICAgcGFkZGluZzogMDtcclxuICAgIGJveC1zaXppbmc6IGJvcmRlci1ib3g7XHJcbn1cclxuXHJcbmJvZHkge1xyXG4gICAgYmFja2dyb3VuZC1jb2xvcjogIzY2NiA7XHJcbiAgICBmb250LWZhbWlseTogXCJIZWx2ZXRpY2EgTmV1ZVwiLEhlbHZldGljYSxSb2JvdG8sQXJpYWwsc2Fucy1zZXJpZjtcclxuICAgIGNvbG9yOiB3aGl0ZTtcclxufVxyXG5cclxubmF2IHtcclxuICAgIHBvc2l0aW9uOiBmaXhlZDtcclxuICAgIHRvcDogMDtcclxuICAgIHdpZHRoOiAxMCU7XHJcbiAgICBoZWlnaHQ6IDEwMCU7XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiAjNDQ0O1xyXG4gICAgdWwge1xyXG4gICAgICAgIGRpc3BsYXk6IGdyaWQ7XHJcbiAgICAgICAgZ3JpZC10ZW1wbGF0ZS1jb2x1bW5zOiAxZnI7XHJcbiAgICAgICAgcm93LWdhcDogMjBweDtcclxuICAgICAgICBsaXN0LXN0eWxlLXR5cGU6IG5vbmU7XHJcbiAgICAgICAgcGFkZGluZzogMDtcclxuICAgICAgICBsaSB7XHJcbiAgICAgICAgICAgIGEge1xyXG4gICAgICAgICAgICAgICAgdGV4dC1kZWNvcmF0aW9uOiBub25lO1xyXG4gICAgICAgICAgICAgICAgY29sb3I6IHdoaXRlO1xyXG4gICAgICAgICAgICAgICAgaW1nIHtcclxuICAgICAgICAgICAgICAgICAgICBkaXNwbGF5OiBibG9jaztcclxuICAgICAgICAgICAgICAgICAgICBiYWNrZ3JvdW5kLWNvbG9yOiBsaWdodGdyZXk7XHJcbiAgICAgICAgICAgICAgICAgICAgd2lkdGg6IDQwcHg7XHJcbiAgICAgICAgICAgICAgICAgICAgaGVpZ2h0OiA0MHB4O1xyXG4gICAgICAgICAgICAgICAgICAgIHBhZGRpbmc6IDVweDtcclxuICAgICAgICAgICAgICAgICAgICBib3JkZXItcmFkaXVzOiA1cHg7XHJcbiAgICAgICAgICAgICAgICAgICAgbWFyZ2luOiAycHggYXV0bztcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgICAgIHNwYW4ge1xyXG4gICAgICAgICAgICAgICAgICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgICAgICAgICAgICAgICAgIHRleHQtYWxpZ246IGNlbnRlcjtcclxuICAgICAgICAgICAgICAgIH1cclxuICAgICAgICAgICAgfVxyXG4gICAgICAgIH1cclxuICAgIH1cclxufVxyXG5cclxubWFpbiB7XHJcbiAgICB0b3A6IDA7XHJcbiAgICBtYXJnaW4tbGVmdDogMTAlO1xyXG4gICAgcGFkZGluZzogMTBweDtcclxufVxyXG5cclxuQG1lZGlhIHNjcmVlbiBhbmQgKG1heC13aWR0aDogNjMwcHgpIHtcclxuICAgIG5hdiB7XHJcbiAgICAgICAgd2lkdGg6IDEwMCU7XHJcbiAgICAgICAgaGVpZ2h0OiAxMDBweDtcclxuICAgICAgICB1bCB7XHJcbiAgICAgICAgICAgIGdyaWQtdGVtcGxhdGUtY29sdW1uczogcmVwZWF0KDQsIDFmcik7XHJcbiAgICAgICAgfVxyXG4gICAgfVxyXG4gICAgbWFpbiB7XHJcbiAgICAgICAgbWFyZ2luLWxlZnQ6IDA7XHJcbiAgICAgICAgbWFyZ2luLXRvcDogMTAwcHg7XHJcbiAgICB9XHJcbn0iLCJAaW1wb3J0IFwiLi4vbGF5b3V0L2xheW91dFwiO1xyXG5cclxubWFpbiB7XHJcbiAgICBwYWRkaW5nOiAwO1xyXG59XHJcblxyXG5AbWVkaWEgc2NyZWVuIGFuZCAobWF4LXdpZHRoOiA2MzBweCkge1xyXG4gICAgbWFpbiB7XHJcbiAgICAgICAgcGFkZGluZzogMDtcclxuICAgIH1cclxufVxyXG5cclxuY2FudmFzIHtcclxuICAgIGRpc3BsYXk6IGJsb2NrO1xyXG4gICAgbWFyZ2luOiAwIGF1dG87XHJcbiAgICBiYWNrZ3JvdW5kLWNvbG9yOiBibGFjaztcclxufSJdLCJzb3VyY2VSb290IjoiIn0=*/