.page {
  & .container {
    max-width: 800px;
    margin: auto !important;
    padding-left: 1em;
    padding-right: 1em;
  }

  // A box that sits to the left of .container
  .left-side {
    .left-box {
      display: none;
      // padding: 0;
      // margin: 0;

      img {
        display: inline-block;
        height: 1.25em;
        width: 1.25em;

        filter: invert(9%) sepia(97%) saturate(6581%) hue-rotate(247deg)
          brightness(94%) contrast(144%);
      }
    }

    @media screen and (min-width: 910px) {
      float: left;
      width: calc((100vw - 800px) / 2);
      display: flex;
      flex-direction: row;
      justify-content: right;

      .left-box {
        display: flex;
        flex-direction: column;

        margin-top: 3em;
        margin-right: 1em;

        padding-left: 5px;
        padding-right: 5px;
        padding-top: 4px;

        border: 1px solid black;
      }
    }
    @media screen and (max-width: 910px) {
      max-width: 800px;
      margin: auto !important;
      padding-left: 1em;
      padding-right: 1em;
    }
  }
}

.mermaid {
  width: fit-content;
  margin: auto;
}