@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');

:root {
    /* Main colours */
    --primary-colour: #600D74;
    --message-background: #DE3A28;

    /* Main body text and link colours */
    --body-text-colour: #626F72;
    --link-colour: var(--primary-colour);
    --link-hover-colour: #f8d75b;
    --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: black;
    --author-link-colour: black;
    --author-link-hover-colour: var(--link-hover-colour);

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

    /* Font faces */
    --logo-font: 'Open Sans';
    --primary-font: 'Open Sans';
    --ui-font: 'Open Sans';

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

    /* Primary with transparencies */
    --shadow-colour: #600D7480;
    --thumbnail-background: #26b9b94E;
    --header-overlay: #ffffff50;
}