/* Set css vars including default font stacks to use without downloading any webfonts */
:root {
        --system-sans:  "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
        --system-serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, serif;
        --system-mono:  ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, "DejaVu Sans Mono", monospace;
        --body-font:    var( --system-sans );
        --heading-font: var( --system-serif );
	--content-width: 1200px;
}


@media(hover:hover) and (min-width: 1024px) {
/**
 *          *      Vermiglione - Variable Serif Font - Licensed under OFL
 *                   *      https://github.com/m-casanova/Vermiglione       */
        @font-face {
                font-family:            'Vermiglione';
                font-weight:            200 700;
                font-display:           swap;
                src:                    url( 'assets/vermiglione.woff2' ) format( 'woff2' );
        }


        /** Roboto Variable Font **/
        @font-face {                    /* latin */
                font-family:            'Roboto Flex';
                font-weight:            100 1000;
                font-stretch:           50% 200%;
                font-display:           swap;
/*              src:                    url( fonts/roboto-flex.woff2 ) format( 'woff2' ); */
                src:                    url( 'assets/RobotoFlex.woff2' ) format( 'woff2' );
/*                src:                    url( 'assets/RobotoFlex[GRAD,XOPQ,XTRA,YOPQ,YTAS,YTDE,YTFI,YTLC,YTUC,opsz,slnt,wdth,wght].woff2' ) format( 'woff2-variations' );
                unicode-range:          U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
*/
        }
        @font-face {                    /* latin-ext */
                font-family:            'Roboto Flex';
                font-weight:            100 1000;
                font-stretch:           50% 200%;
                font-display:           swap;
                src:                    url( 'assets/roboto-flex-latin-ext.woff2' ) format( 'woff2' );
                unicode-range:          U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
        }
/**
 **      Defining the var on a tag limits the value to that tag and its children
 **      These definitions therefore override the :root ones above               **/
        body {
                --body-font:            "Roboto Flex", "San Francisco", "Segoe UI", Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", system-ui, sans-serif;
                --heading-font:         --body-font;
        }
        i, em, .italic {
                font-style:             oblique 12deg;
                letter-spacing:         .01em;
        }

}
/**
 **      Typography                      **/
html {
/**
 **      Declaring html element resets the browser's default rem size
 **      Not using css clamp so we avoid a max-value if users zoom in
 **      At 300px vw font-size is 15.96px & at 1920px vw it's 21.144px   **/
        font-size:                      18px; /* fallback rule */
        font-size:                      calc( 15px + ( 16 * .02vw ) );
}
html > body {
        font-family:                    var( --body-font );
        font-style:                     normal;
        font-weight:                    300;
	background:			url( assets/graph_tile.png );
}


#f-ind-follow {
	display:			flex;
	flex-wrap:			wrap;
	> div {
		flex-basis:		18rem;
	}
}

figure {
	margin-left:			0;
	margin-right:			0;
}

header, main {
	max-width:			var( --content-width );
	margin:				0 auto;
}

main {
	margin:				3rem auto;
	display:			flex;
	flex-wrap:			wrap;
	gap:				2rem;
}
.card {
	flex-basis:			calc( 50% - 5.5rem );
	padding:			0 2rem 1rem;
	border:				1px solid #9e9e9e;
	border-radius:			1rem;
	overflow:			hidden;
}
.card h2 {
	background:			rgba( 200, 200, 200, 0.2 );
	border-bottom:			1px solid #cfcfcf;
	margin:				0 -2rem;
	padding:			.4em 1.4ch;
	color:				#600;
}