@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;700&display=swap');
@import url("https://use.typekit.net/rdl7hur.css");

:root {
    /* Main colours */
    --primary-colour: #116ADE;
    --message-background: #DE3A28;

    /* Main body text and link colours */
    --body-text-colour: #626F72;
    --link-colour: var(--primary-colour);
    --link-hover-colour: #07ADF5;
    --thumbnail-text-colour: var(--link-colour);

    /* Buttons */
    --button-colour: var(--link-colour);
    --button-text-colour: white;
    --button-hover-colour: var(--link-hover-colour);
    --button-hover-text-colour: white;

    /* Header navigation bar */
    --header-background: black;
    --header-link-colour: white;
    --header-title-colour: white;

    /* Story reading page */
    --story-title-colour: white;
    --author-link-colour: white;
    --author-link-hover-colour: var(--link-hover-colour);

    /* About this story pages */
    --story-footer-background: #626F72;

    /* Font faces */
    --logo-font: "PT-Serif";
    --primary-font: "Freight-Sans-Pro";
    --ui-font: "PT-Serif";

    --footer-font: var(--primary-font);
    --footer-font-size: 1.2em;

    /* Primary with transparencies */
    --shadow-colour: #116ADE80;
    --thumbnail-background: #116ADE4E;
    --header-overlay: #116ADECD;
}