/*

Overriding custom CSS properties will let you change most of the appearance.
Here are the properties that can be overridden/defined:

  --flow-space: vertical space between blocks in a stack. See variables.css for spacing definitions.
  --container-max-width: maximum width of content column, default to 65 characters width, ideal for readability.
  --main-background-colour: main body background colour, defaults to white.
  --background-image: image background for main body, defaults to none.
  --background-repeat: if image should repeat across background, defaults to yes: repeat.
  --main-text-colour: main body text colour, defaults to black.
  --main-heading-colour: heading (h1-h5) text colour, defaults to black.
  --highlight-colour: highlight colour on hover, used for sidenotes, defaults to yellow.
  --link-colour: link colour, defaults to blue.
  --link-visited-colour: link visited colour, defaults to blue.
  --link-hover-colour: link hover colour, defaults to purple.
  --toc-background-colour: table of contents background colour, defaults to transparent.
  --toc-padding: table of contents padding, defaults to none.
  --toc-border-radius: rounded corners on table of contents, defaults to none.
  --toc-link-colour: table of contents link colour, defaults to --link-colour value.
  --toc-link-visited-colour: table of contents link visited colour, defaults to --link-visited-colour value.
  --toc-link-hover-colour: table of contents link hover colour, defaults to --link-hover-colour value.
  --route-link-colour: route link colour, defaults to --link-colour value.
  --route-link-hover-colour: route link hover colour, defaults to --link-hover-colour value.
  --route-background-colour: route background colour, defaults to transparent.
  --route-text-colour: route text colour, defaults to inheriting body value.
  --route-font-weight: route font weight, defaults to normal.
  --route-font-style: route font style, defaults to normal.
  --route-padding: route padding, defaults to none.
  --route-border-radius: route rounded corners, defaults to none.
  --font-text: font-family definition for main body text.
  --font-heading: font-family definition for all headings (h1-h5).
  --heading-font-style: heading style, defaults to normal.
  --heading-font-weight: heading weight, defaults to bold.
  --text-body-size: default body text size. See variables.css for type definitions.
  --font-pullquote: font-family definition for pull quotes, defaults to --font-text value.
  --font-sidenote: font-family definition for sidenotes, defaults to --font-text value.
  --sidenote-font-weight: sidenote font weight, defaults to normal.
  --sidenote-font-style: sidenote font style, defaults to normal.
  --text-sidenote-size: sidenote text size. See variables.css for type definitions.
  --text-pullquote-size: pull quote text size. See variables.css for type definitions.
  --pullquote-font-weight: pull quote font weight, defaults to bold.
  --pullquote-font-style: pull quote font style, defaults to normal.
  --font-author: font for author.
  --text-author-size: font size for author.
  --author-colour: author text colour.
  --author-font-weight: font weight for author.
  --author-font-style: font style for author.
  --font-date: font for date.
  --date-colour: text colour for date.
  --text-date-size: font size for date.
  --date-font-weight: font weight for date.
  --date-font-style: font style for date.
  --font-caption: font for image captions.
  --text-caption-size: font size for image captions.
  --textblock-padding: 0;
  --textblock-background-colour: background for inline textblock, defaults to transparent.
  --textblock-font: font used in textblock, inherits parent font by default.
  --textblock-font-size: font size for textblock, inherits parent size by default.
  --textblock-text-colour: textblock text colour, inherits parent colour by default.
  }
 */

/* define fonts here if needed */
@font-face {
  font-family: Baskervville;
  src: url("/fonts/Baskervville-Regular.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Baskervville;
  src: url("/fonts/Baskervville-Italic.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: plex;
  src: url("/fonts/IBMPlexSans-LightItalic-Latin1.woff2") format("woff2");
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: plex;
  src: url("/fonts/IBMPlexSans-BoldItalic-Latin1.woff2") format("woff2");
  font-style: bold;
  font-display: swap;
}

@font-face {
  font-family: plex;
  src: url("/fonts/IBMPlexSans-Light-Latin1.woff2") format("woff2");
  font-style: normal;
  font-display: swap;
}

span.image-container {
  background: linear-gradient(#999, red);
  background-blend-mode: screen;
}

img {
    /* mix-blend-mode: screen; */
    /* opacity: 0.75; */
    filter: grayscale(50%);
    width: 100%;
}

table {
  width: 100%;
}

th, td {
  vertical-align: top;
  border: 1px dotted #ddd;
}

:root {
  /* colours for specific routes */
  --colour-text: #a3af9e;
  --colour-text-accent: red; /* rgba(57, 255, 37, 1)*/
  --colour-bg: #3f4a3c;
  --colour-bg-accent: #00e5ff;
  --colour-bg-shadow: #00acff;  /* rgba(0, 172, 255, 1) */
  --colour-primary: #00e5ff;
  --colour-secondary: #7095b2;

  /* override custom properties */
  --main-background-colour: var(--colour-bg);
  /* --background-image: url("/img/green-background.jpg"); */
  --background-image: linear-gradient(75deg, #ac859d, #6f5c36);
  --main-text-colour: var(--colour-text);
  --main-heading-colour: var(--colour-text-accent);
  --link-colour: var(--colour-text-accent);
  --link-hover-colour: var(--colour-bg-accent);
  --text-pullquote-size: var(--step-1);
  --font-pullquote: Baskervville, serif;
  --pullquote-font-style: italic;
  --font-text: plex, sans-serif;
  --font-heading: Baskervville, serif;
  --font-sidenote: plex, sans-serif;
  --heading-font-style: italic;
  --highlight-colour: rgba(57, 125, 237, 0.15);
  --route-background-colour: var(--colour-bg); /* rgba(0, 0, 0, 0.05); */
  --route-padding: 0.2em 0.8em;
  --route-border-radius: var(--space-xs);
  --route-font-weight: bold;

  --textblock-font: plex, sans-serif;
  --textblock-background-colour: var(--colour-bg); /* rgba(0, 172, 255, 0.15) */
  --textblock-padding: 0.8rem; /* 0.8rem; */
  --textblock-text-colour: var(--colour-secondary);

  --font-author:  Baskervville, serif;
  --text-author-size: var(--step-0);
  --author-colour: var(--colour-text);
  --author-font-style: italic;

  --font-date: plex, sans-serif;
  --date-colour: var(--colour-text);
  --date-font-style: italic;
  --text-date-size: var(--step--1);

}