main.css

/*
    https://css-tricks.com/css-grid-replace-flexbox/

    https://css-tricks.com/understanding-web-fonts-getting/

    https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

*/

/*
    VIEW UNITS

    https://css-tricks.com/fun-viewport-units/

    vw is like em, in that it is relative to parent container.
    % is like rem, in that it is absolute.
*/

/*
    FONTS

    Go from heavy to light weights, from headings to body content.
    Divide font-size by 2, from headings to body content.

    Body content line-height should be between 1.2x and 1.5.
    1.2x for short blocks of text.
    1.5x for longer form writing.

    For body text aim for between 40 and 70 characters per line.
*/

@import url('https://fonts.googleapis.com/css?family=Quattrocento|Quattrocento+Sans&display=swap');
@import url('https://fonts.googleapis.com/css?family=Bungee+Shade&display=swap');
@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap');

/* Small (sm) */
@media (min-width: 640px) { /* ... */ }

/* Medium (md) */
@media (min-width: 768px) { /* ... */ }

/* Large (lg) */
@media (min-width: 1024px) { /* ... */ }

/* Extra Large (xl) */
@media (min-width: 1280px) { /* ... */ }

:root {
    font-size: calc(1.125 * 1em);
    color: #444;
    font-family: 'Lato', sans-serif;
}

h1 {
    font-size: 2.8rem;
    font-family: 'Bungee Shade', sans-serif;
    font-weight: normal;
}

h2, h3, h4, h5, h6 {
    font-size: 1.8em;
}

nav > div {
    display: flex;
    flex-direction: row;
    
}

nav > div > p {
    padding: 0 0.3rem;
    margin: 0 0.2rem;
    font-weight: 900;
    color: #fff;
    background-color: #444; 
    border-radius: 3px;
}

body {
    font-size: 1.0rem;
    font-weight: 300;
    line-height: 1.5rem;
}


header, main, footer {
    width: 90%;
    max-width: 900px;
    margin: 1em auto;
    padding: 1em 2vw;
    box-sizing: border-box;
}

/* debug */
header, main, footer {
    border: 1px solid black;
}