:root {
  /* --color-primary: hsl(237, 8%, 47%);
  --color-background: hsl(237, 8%, 47%);
  --color-text: hsl(from var(--color-background) h s 10%);
  --color-text-muted: hsl(from var(--color-text) h s 50%);
  --color-highlight: hsl(from var(--color-text) h 25% 58%);
  --color-active: hsl(from var(--color-highlight) h 60% l);
  --color-selected: var(--color-active);
  --color-complete: hsl(from var(--color-highlight) 137 60% 40%);
  --color-active-darker: var(--color-active);
  --color-body-background: linear-gradient(180deg, hsl(from var(--color-background) h s 98%) 0%, hsl(from var(--color-background) h s 90%) 100%);
  --color-border: hsl(from var(--color-background) h s 80%);
  --color-button-background-primary: hsl(from var(--color-background) h s 95%); 
  --color-button-background: hsl(from var(--color-background) h s 98%);
  --color-well: hsl(from var(--color-background) h s 80%); */
/* --color-background: url(https://as2.ftcdn.net/v2/jpg/02/95/46/09/1000_F_295460913_KBu2PfHEGfuFPPUWGEztWntnqmw0UAQe.jpg); */
  
/* --color-background: hsl(238, 100%, 50%); */
  /* --color-background: hsl(238, 100%, 50%); */
  /* --background-app: var(--color-background); */
  /* --color-active-darker: hsl(from var(--color-active) calc(h + 180deg) s calc(l - 10%)); */
}



at-activity {
  container-type: inline-size;
  display: block;
}

:where(.activity-body) {
  padding-block: var(--body-padding-block, var(--space-none));
  padding-inline: var(--body-padding-inline, var(--space-m));
  border-inline-start: var(--body-border-inline-start, var(--border-base));
  border-inline-end: var(--body-border-inline-end, var(--border-base));
  border-block-start: var(--body-border-block-start, var(--border-none));
  border-block-end: var(--body-border-block-end, var(--border-none));
  border-start-start-radius: var(--body-border-start-start-radius, var(--border-radius-none));
  border-start-end-radius: var(--body-border-start-end-radius, var(--border-radius-none));
  border-end-start-radius: var(--body-border-end-start-radius, var(--border-radius-none));
  border-end-end-radius: var(--body-border-end-end-radius, var(--border-radius-none));
  display: flex;
  flex-direction: column;
  gap: var(--body-gap, var(--space-m));
}