.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: 100%;
  text-align: center;

  & > svg {
    width: 90%;
    max-width: unset !important;
  }
}

.home-page {
  .hello {
    margin-top: 7em;
    text-align: center;
    h1 {
      font-size: 3em;
      font-weight: bold;
    }
  }

  .home-big-cards {
    display: flex;
    flex-direction: row;
    justify-content: center;

    padding: unset;
    margin: unset;

    li {
      list-style: none;
      max-width: 300px;
      // max-height: ;
      width: 100%;
      margin: 2em;
    }

    .big-card {
      height: 400px;

      border: 1px solid grey;
      border-radius: 5px;

      transition: box-shadow 0.2s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      }

      $title-height: 2em;
      .card-image {
        height: calc(400px - #{$title-height} - 2em);
        background-color: grey;
      }

      .card-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: $title-height;
        padding: 1em;

        color:black;
        font-weight: bold;
        // background-color: black;
      }
    }
  }

  .home-small-cards {

    display: flex;
    flex-direction: row;
    justify-content: center;

    padding: unset;
    margin: unset;

    li {
      list-style: none;
      max-width: 200px;
      width: 100%;
      margin: 1.5em;
    }

    .small-card {
      border: 1px solid grey;
      border-radius: 5px;

      transition: box-shadow 0.2s ease-in-out;

      &:hover {
        box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
      }

      .card-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding: 1em;

        color:black;
        font-weight: bold;
      }
    }
  }
}