html, body {
  line-height: var(--op-line-height-densest);
  height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  width: 100vw;
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

a {
  text-decoration: none;
  color: var(--op-color-neutral-on-plus-max);
}

.app-container {
  padding: var(--op-space-x-small) calc(2 * var(--op-space-x-large)) var(--op-space-x-large) calc(2 * var(--op-space-x-large));
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 129rem;
  margin-inline: auto;

  /* --op-breakpoint-small */
  @media only screen and (max-width: 768px) {
    padding-left: 0;
    padding-right: 0;
  }
}

.mobile-view {
  background-color: var(--op-color-primary-base);

  .month {
    background-color: var(--op-color-neutral-plus-five);
  }

  & .app__header {
    background-color: var(--op-color-primary-base);
  }
}

.mobile-load-all-button {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: var(--op-space-large) var(--op-space-2x-large) calc(2 * var(--op-space-3x-large)) var(--op-space-2x-large);

  .btn {
    width: 20rem;
  }
}