:root {
    /* custom colors */
    --goblin-purple: #5f2380;
    --goblin-pink: #c247b8;
    --goblin-dark-brown: #4e3d3b;
    --goblin-dark-grey: #544d54;
    --goblin-brown-grey: #786c64;
    --goblin-grey: #a09a92;
    --goblin-white: #f5eee4;
    --goblin-sky-blue: #64d5df;
    --goblin-light-blue: #478fca;
    --goblin-blue: #2f588d;
    --goblin-dark-blue: #252f40;
    --goblin-dark-red: #63250e;
    --goblin-red: #9e3227;
    --goblin-orange: #d87945;
    --goblin-yellow: #f4dc6d;
    --goblin-lighter-green: #89aa55;
    --goblin-light-green: #4e8357;
    --goblin-green: #386956;
    --goblin-dark-green: #2b4a3c;
    --goblin-peach: #e99b7c;
    --goblin-brown: #825341;

    --bg: var(--goblin-white);
    --border: var(--goblin-dark-grey);
    --accent-bg: var(--goblin-brown-grey);
    --text: var(--goblin-dark-blue);
    --accent: var(--goblin-blue);
    --accent-hover: var(--goblin-blue);
    --marked: var(--goblin-red);
  }
  
  /* Dark theme */
  @media (prefers-color-scheme: dark) {
    :root,
    ::backdrop {
      color-scheme: dark;
      --bg: black;
      --border: var(--goblin-grey);
      --accent-bg: var(--goblin-dark-grey);
      --text: var(--goblin-white);
      --accent: var(--goblin-light-blue);
      --accent-hover: var(--goblin-light-blue);
      --marked: var(--goblin-yellow);
    }
  }

  /* Makes iframes shrink on smaller screens */
  @media only screen and (max-width: 720px) {
    iframe {
      width: 100%;
    }
  }