@font-face {
    font-family: "director";
    src:
        url("/pub/style/fonts/Director-Regular.woff2") format('woff2'),
        url("/pub/style/fonts/Director-Regular.woff") format('woff');
}

:root {
    /* Main color scheme */
    --color-primary: #E4F0FEff;
    --color-secondary: rgb(148, 50, 50);
    --color-accent: #970101ff;
    
    /* Background colors */
    --bg-primary: #E0C9A6ff;
    --bg-secondary: #cca76dff;
    
    /* Text colors */
    --text-primary: #000000ff;
    --text-secondary: #989898ff;
    --text-accent: rgb(148, 50, 50);

    /* Header colours */
    --header-primary:rgb(148, 50, 50);
    --header-secondary: rgb(148, 50, 50);
    --header-tertiary: #970101ff;
    --header-other: #000000ff;
    
    /* Link colors */
    --link-color: #1d75d4ff;
    --link-hover: #5B3D8Aff;
    
    /* Border colors */
    --border-primary: rgb(148, 50, 50);
    --border-secondary: #030303ff;
    --border-image: #000300ff;
    
    /* Special purpose colors */
    --code-color: #18A02Cff;
    --header-bg: rgb(148, 50, 50);
    --header-text: #030303ff;
    
    /* Font families */
    --font-headers: director, sans-serif;
    --font-body: serif;
}

body {
    background: var(--bg-primary);
    background-color: var(--bg-primary);
    background-position: center center;
    background-size: 110vh 75vh;
    background-repeat: repeat-y;
    margin: 0;
    padding: 0;
    font-size: 90%;
    font-family: serif;
}

header h1 .headerLink {
    font-family: director, sans-serif;
}

article h1 {
    font-family: director, sans-serif;
}

article {
    text-align: center;
}

article img {
    border: 0.4em solid var(--border-image);
    background-color: var(--border-image) !important;
}