/*****************************
* Theme
* Base CSS file
------------------------------
* COLOURS
*****************************/

/* Colour variables */
:root {
     --background-colour: #FFF;
     --primary-colour: #323036;
     --quarternary-colour: #FAF9F6;
     --secondary-colour: #818589;
     --tertiary-colour: #E6E6E6;
     --transparent: transparent;
}

/* Adjust Zensical colours */
[data-md-color-accent=custom] {
     --md-default-bg-color: var(--background-colour);
     --md-footer-bg-color: var(--background-colour);
     --md-primary-bg-color: var(--background-colour);
     --md-primary-fg-color: var(--primary-colour);
     --md-primary-fg-color--dark: var(--primary-colour);
     --md-primary-fg-color--light: var(--tertiary-colour);
}

/*****************************
* FONTS
*****************************/

/* General */
@font-face {
     font-family: 'Source Code';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-code.ttf') format('truetype');
}

@font-face {
     font-family: 'Source Sans';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-sans.ttf') format('truetype');
}

@font-face {
     font-family: 'Source Serif';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/source-serif.ttf') format('truetype');
}

/* Technical */
@font-face {
     font-family: 'DM Mono';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/dm-mono.ttf') format('truetype');
}

@font-face {
     font-family: 'DM Sans';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/dm-sans.ttf') format('truetype');
}

@font-face {
     font-family: 'Tiny5';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/tiny5.ttf') format('truetype');
}

/* Visual */
@font-face {
     font-family: 'Plaster';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/plaster.ttf') format('truetype');
}

@font-face {
     font-family: 'Rubik';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/rubik.ttf') format('truetype');
}

/* Words */
@font-face {
     font-family: 'EB Garamond';
     font-style: italic;
     font-weight: 100 700;
     src: url('../fonts/eb-garamond-italics.ttf') format('truetype');
}

@font-face {
     font-family: 'EB Garamond';
     font-style: normal;
     font-weight: 100 700;
     src: url('../fonts/eb-garamond.ttf') format('truetype');
}

@font-face {
     font-family: 'Playfair Display SC';
     font-style: normal;
     font-weight: 900;
     src: url('../fonts/playfair-display-sc.ttf') format('truetype');
}

/* Variables */
:root {
     --general-sans: 'Source Sans', sans-serif;
     --general-serif: 'Source Serif', serif;
     --general-code: 'Source Code', monospace;
     --technical-code: 'DM Mono', monospace;
     --technical-text: 'DM Sans', monospace;
     --technical-title: 'Tiny5', 'DM Mono', monospace;
     --visuals-text: 'Rubik', sans-serif;
     --visuals-title: 'Plaster', 'Rubik', sans-serif;
     --words-text: 'EB Garamond', serif;
     --words-title: 'Playfair Display SC', 'EB Garamond', serif;
}

/* Colours and weights */
.md-typeset {

     a,
     figcaption {
          color: var(--secondary-colour);
          max-width: none;
          text-decoration: none;
     }

     a:hover {
          color: var(--teriary-color);
     }

     h1,
     h2,
     h3,
     h4,
     h5,
     h6 {
          color: var(--secondary-colour);
          font-weight: bold;
     }

     p {
          color: var(--primary-colour);
     }
}

/*****************************
* RULES
*****************************/

body {
     align-items: center;
     display: flex;
     justify-content: center;
     min-height: 100vh;
     width: 100%;
}

/* Footer */
footer {
     align-items: center;
     display: flex;
     flex-direction: row;
     justify-content: center;
     margin-bottom: 5px;
     padding-bottom: 0;
}

footer>*:not(:last-child)::after {
     content: " | ";
     margin: 0 8px;
}