.navbar {
      position: fixed;
      bottom: 0;
      width: 100%;
        height: 50px;
        height: calc(50px + constant(safe-area-inset-bottom)); /* For iOS < 11 (some versions) */
        height: calc(50px + env(safe-area-inset-bottom));
      background-color: #213D26;
      display: flex;
      justify-content: space-between;
      align-items: top;
        padding-bottom: 0px;
        padding-bottom: constant(safe-area-inset-bottom);
        padding-bottom: min(10px, env(safe-area-inset-bottom));
      z-index: 1000;
    }

    .nav-button {
      flex: 1;
      text-align: center;
      padding: 10px 0px;
      cursor: pointer;
    }

    .nav-button img {
      display: block;
      margin: 0 auto 0px;
    }

    .nav-button span {
      display: block;
      font-size: 12px;
    }

    .nav-left {
      position: absolute;
        left: 15px;
        left: constant(safe-area-inset-left);
        left: max(15px, env(safe-area-inset-left));
      text-align: center;
    }

    .nav-right {
      position: absolute;
        right: 15px;
        right: constant(safe-area-inset-right);
        right: max(15px, env(safe-area-inset-right));
      text-align: center;
    }

    .nav-center {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    .menu-overlay {
      border-radius: 0px 12px 0px 0px;
      position: fixed;
        bottom: 50px;
        bottom: calc(50px + constant(safe-area-inset-bottom));
        bottom: calc(50px + env(safe-area-inset-bottom));
      left: 0;
        width: 33%;
        max-width: 150px;
      padding-top: 10px;
      padding-bottom: 10px;
      background-color: #213D26;
      display: none;
      flex-direction: column;
      z-index: 1000;
    }

    .menu-overlay a {
      padding: 10px 15px;
      text-decoration: none;
      color: #FCF7E4;
    }