@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --font-family-serif: "Noto Serif", serif;
    --font-family-sans-serif: "Poppins", sans-serif;
    
    --font-family-logo: "Mandrope", sans-serif;
    --font-family-heading: var(--font-family-sans-serif);
    --font-family-body: var(--font-family-serif);

    --color-teal: #078;
    --color-hot-pink: #f08;
    --color-plum: #704;

    --color-primary: #60f;
    --color-secondary: #f50;
    --color-light: #ddd;
    --color-dark: #222;
    --color-link: #000;
    --color-link-hover: #60f;
    --color-link-visited: #000;
}

body {
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-variation-settings: "width" 100;

    color: var(--color-light);
    background-color: var(--color-teal);
}

h1,h2,h3 {
    font-family: var(--font-family-heading);
}

#splash-header {
    text-align: center;
    vertical-align: middle;
    margin: 2rem auto;
}

#splash-info {
    display: flex;
    justify-content: center;
}

#splash-footer {
    text-align: center;
    color: var(--color-grey);
    font-family: var(--font-family-sans-serif);
}