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

:root {
    font-size: 20px;
    --h1-size: 2rem;
    --h2-size: 1.5rem;
    --h3-size: 1.25rem;

    /* https://huemint.com/website-magazine/#palette=f4f3ee-f4f3ee-512b7e-de2338 */
    --background-colour: hsl(50, 21%, 97%);
    --text-colour: hsl(267, 49%, 12.5%);
    --header-colour: hsl(270, 86%, 18%);
    --link-colour: hsl(353, 74%, 37%);
    
    background-color: var(--background-colour);
    color: var(--text-colour);
    font-family: 'Alegreya Sans', sans-serif;
}

body {
    margin: auto;
    margin-top: 4rem;
    padding-bottom: 8rem;
    width: 80%;
    max-width: 800px;
}

h1,h2,h3,h2 a {
    font-family: 'Roboto', sans-serif;
    color: var(--header-colour);
    margin: 2rem 0 0;
}

a {
    color: var(--link-colour);
    transition: 0.2s;
}
a:hover {
    color: var(--text-colour);
}

footer {
    margin-top: 2rem;
    padding: 1rem 0;
    border-top: .125rem solid var(--header-colour);
}