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;
  }
}


:root[data-theme='red'] {
  body {
    background-color: var(--op-color-primary-base);
  }
  .quarter {
    background: transparent;
    /*padding: 0;*/
  }
  .month {
    opacity: 1;
    background-color: var(--op-color-neutral-plus-max);
  }
  .header__label {
    box-shadow: unset;
  }

  .header__wing--right, .header__wing--left {
    border-radius: var(--op-radius-large);
  }
}

:root[data-theme='seasonal'] {
  .quarter--1 {
    background: radial-gradient(circle, rgba(89, 150, 231, 0.51) 0%, rgba(79, 30, 204, 0.51) 100%);
  }

  .quarter--2 {
    background: radial-gradient(circle, rgba(255, 140, 234, 0.51) 0%, rgba(47, 197, 14, 0.51) 100%);
  }

  .quarter--3 {
    background: radial-gradient(circle, rgba(251, 220, 63, 0.51) 0%, rgba(255, 186, 12, 0.73) 100%);
  }

  .quarter--4 {
    background: radial-gradient(circle, rgba(218, 133, 7, 0.51) 0%, rgba(206, 9, 9, 0.5) 100%);
  }
}

@media (prefers-color-scheme: dark) {
  :root[data-theme-mode='system']:not([data-theme-mode='light']) {
    --op-color-transparent-6: rgba(84, 84, 84, 0.6);
    --op-color-transparent-7: rgba(45, 45, 45, 0.58);
    --op-color-neutral-plus-nine: hsl(var(--op-color-neutral-h) var(--op-color-neutral-s) 3%);

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

    .day__number {
      color: var(--op-color-white);
    }

    .btn {
      .icon {
        color: var(--op-color-neutral-minus-max);
      }
    }
  }
}