@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');

:root {
    /* Main colours */
    --primary-colour: #26b9b9;
    --message-background: #DE3A28;

    /* Main body text and link colours */
    --body-text-colour: #626F72;
    --link-colour: var(--primary-colour);
    --link-hover-colour: #3bd7d7;
    --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: #5e6375;
    --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: Quicksand;
    --primary-font: Merriweather;
    --ui-font: Quicksand;

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

    /* Primary with transparencies */
    --shadow-colour: #26b9b980;
    --thumbnail-background: #26b9b94E;
    --header-overlay: #26b9b9CD;
}