.container {
  position: relative;
  padding: 20px;

  .card {
    border: 2px solid var(--color);
    padding: 20px;
    margin: 20px 0;
    background: var(--dark);
  }

  #grid1 {
    display: grid;
    grid-template-columns: 100px auto;
    grid-column-gap: 4%;

    #profile-icon {
      display: block;
      width: 100px;
      padding: 2px;
      border: 1px solid var(--color);
    }

    .name-and-id {
      display: table;
      height: 106px;
    }

    .tc {
      display: table-cell;
      height: 106px;
      vertical-align: middle;

      &>div {
        margin: 4px;

        .lnr {
          font-size: 1.1em;
          color: #ffa;
          border-radius: 100%;
          box-shadow: 0 0 5px 5px #ff84 inset,
            0 0 5px 5px #ff84;
        }
      }
    }
  }

  #stats {
    td {
      padding: 5px 20px;
    }
  }

  #canvas {
    width: 40vw;
    height: 40vw;
    margin: 10px auto;
    border: 1px dashed var(--color);

    canvas {
      display: block;
    }
  }

}

@media screen and (max-width: 800px) {
  #canvas {
    width: 70vw !important;
    height: 70vw !important;
  }
}
