#siteTitle, #currentUserInfo, .displayName, .authorName {
  font-family: cursive;
  font-size: 1.2em;
  /* hack for right edge getting cut off, esp. on 'nancy' */
  padding-right: 0.2em;
}

html {
    background: 
color-mix(in srgb,  var(--clr-secondary), var(--clr-background));
}

body {
    background: var(--clr-background);
}

#header {
  top: -7px;
}

@media (prefers-color-scheme: dark) {
  #header {
    background: none;
  }
}

:root {
  /* colours */
  --clr-primary: #005e00;
  --clr-secondary: #d6e7d4;
  --clr-lighter-primary: #337e4c;
  --clr-positive: #21a821;
  --clr-negative: #c02e2e;
  --clr-neutral: #0761b6;
  --clr-background: #fdf5ff;
  --clr-note-background: #f4fef9;
  --clr-note-selected-background: #eefcfe;
  --clr-profile-background: #f3feff;
  --clr-panel-background: #f1fff3;
  --clr-info-background: #d1d2ff;
  --clr-warning-background: #ffedd2;
  --clr-error-background: #f4a9b1;
  --clr-field-background: var(--clr-background);
  --clr-foreground: #0f070f;
  --clr-lesser-foreground: #555555;
  --clr-foreground-on-primary: var(--clr-background);
  --clr-foreground-on-secondary: var(--clr-foreground);
  /*--clr-border: #bdb6be;*/
  --clr-border: #3b005e44;
  --clr-action-default: #b9d1b3;
  --clr-action-like: var(--clr-lighter-primary);
  --clr-action-dislike: var(--clr-negative);
  --clr-action-reshare: var(--clr-positive);
  --clr-action-reply: var(--clr-neutral);
  --clr-link-unvisited: #233ed8;
  --clr-link-visited: #7d20c9;

  /* margins and padding */
  --spacing-half: 4px;
  --spacing-single: 8px;
  --spacing-double: 14px;
  --spacing-triple: 18px;
  --spacing-quadruple: 28px;

  /* type */
  --font-family: "Nunito Sans", sans-serif, sitelen-pona-support;
  --font-normal-size: 12pt;
  --font-small-size: 10pt;
  --font-big-size: 16pt;
  --font-heading-size: 20pt;

  /* misc */
  --border: 1px solid var(--clr-border);
  --border-radius: 8px;
  --icon-size: 24px;
  --avatar-size: 64px;
  --avatar-big-size: 96px;
  --avatar-medium-size: 48px;
  --overlay-shadow: 0 0 8px #0004;

  accent-color: var(--clr-primary);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* colours */
    --clr-primary: #adfaa3;
    --clr-secondary: #354435;
    --clr-lighter-primary: #89e986;
    --clr-positive: #70d170;
    --clr-negative: #e46c6c;
    --clr-neutral: #7daedb;
    --clr-background: #161416;
    --clr-note-background: #1c221f;
    --clr-note-selected-background: #2b3534;
    --clr-profile-background: #1d2525;
    --clr-panel-background: #1a1f19;
    --clr-info-background: #2a2a3f;
    --clr-warning-background: #3f3728;
    --clr-error-background: #5e272b;
    --clr-field-background: var(--clr-background);
    --clr-foreground: #edfae9;
    --clr-lesser-foreground: #98a595;
    --clr-foreground-on-primary: var(--clr-background);
    --clr-foreground-on-secondary: var(--clr-foreground);
    --clr-border: #91d48144;
    --clr-action-default: #71836b;
    --clr-link-unvisited: #7fc0fd;
    --clr-link-visited: #d67bfa;
  }
}


/* shorter sidebar so 'follow requests' button is visible on my ~610px tall browser viewport */
@media (height <= 640px) {
  /* tighter spacing. */
  #writeNoteForm {
    --spacing-double: 10px;
  }
}