/* Fonts:
 */
/* roboto-100       */ @font-face{font-family:'Roboto';font-style:normal;font-weight:100;src:local(''), url('/fonts/roboto-v30-latin-100.woff2') format('woff2'), url('/fonts/roboto-v30-latin-100.woff') format('woff'); font-display: swap;}
/* roboto-100italic */ @font-face{font-family:'Roboto';font-style:italic;font-weight:100;src:local(''), url('/fonts/roboto-v30-latin-100italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-100italic.woff') format('woff'); font-display: swap;}
/* roboto-300       */ @font-face{font-family:'Roboto';font-style:normal;font-weight:300;src:local(''), url('/fonts/roboto-v30-latin-300.woff2') format('woff2'), url('/fonts/roboto-v30-latin-300.woff') format('woff'); font-display: swap;}
/* roboto-300italic */ @font-face{font-family:'Roboto';font-style:italic;font-weight:300;src:local(''), url('/fonts/roboto-v30-latin-300italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-300italic.woff') format('woff'); font-display: swap;}
/* roboto-regular   */ @font-face{font-family:'Roboto';font-style:normal;font-weight:400;src:local(''), url('/fonts/roboto-v30-latin-regular.woff2') format('woff2'), url('/fonts/roboto-v30-latin-regular.woff') format('woff'); font-display: swap;}
/* roboto-italic    */ @font-face{font-family:'Roboto';font-style:italic;font-weight:400;src:local(''), url('/fonts/roboto-v30-latin-italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-italic.woff') format('woff'); font-display: swap;}
/* roboto-500       */ @font-face{font-family:'Roboto';font-style:normal;font-weight:500;src:local(''), url('/fonts/roboto-v30-latin-500.woff2') format('woff2'), url('/fonts/roboto-v30-latin-500.woff') format('woff'); font-display: swap;}
/* roboto-500italic */ @font-face{font-family:'Roboto';font-style:italic;font-weight:500;src:local(''), url('/fonts/roboto-v30-latin-500italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-500italic.woff') format('woff'); font-display: swap;}
/* roboto-700       */ @font-face{font-family:'Roboto';font-style:normal;font-weight:700;src:local(''), url('/fonts/roboto-v30-latin-700.woff2') format('woff2'), url('/fonts/roboto-v30-latin-700.woff') format('woff'); font-display: swap;}
/* roboto-900       */ @font-face{font-family:'Roboto';font-style:normal;font-weight:900;src:local(''), url('/fonts/roboto-v30-latin-900.woff2') format('woff2'), url('/fonts/roboto-v30-latin-900.woff') format('woff'); font-display: swap;}
/* roboto-900italic */ @font-face{font-family:'Roboto';font-style:italic;font-weight:900;src:local(''), url('/fonts/roboto-v30-latin-900italic.woff2') format('woff2'), url('/fonts/roboto-v30-latin-900italic.woff') format('woff'); font-display: swap;}

/* temp. CSS, needs some more serious work. Don't judge! :-) */

/*  Layout
 */
* {
	box-sizing:  border-box;
	padding:     0;
	margin-left: 0;
}

html
{
	-webkit-font-smoothing:  antialiased;
	-moz-osx-font-smoothing: greyscale;
}

body  { background: white; color: black; font-family: 'Roboto', 'sans-serif'; margin: 0; padding: 0; }
#logo { display: block; margin: 6em auto 3em auto;  }

a         { color: #009fe3; text-decoration: none; }
a:hover   { text-decoration: underline; }
a:active  { color: #43CDFF; }
a:visited { color: #009fe3; }

.grid-container
{
	display:               grid;
	grid-template-columns: auto;
	padding:               20px;
	grid-gap:              0; /* old, safari 10 */
	gap:                   0; /* new */
	justify-content:       center;
	align-content:         center;
	grid-auto-flow:        row;
	margin-bottom:         3em;
}

.grid-item
{
	padding:     20px;
	font-size:   14px;
	text-align:  left;
	white-space: nowrap;
	line-height: 18px;
	min-width:   180px;
}

.flex-container-logos
{
	margin-left:     auto;
	margin-right:    auto;
	display:         flex;
	flex-wrap:       wrap;
    justify-content: center;
	max-width:       600px;
}

.flex-container-logos > div
{
	margin: 16px;
}

footer
{
	width:      100%;
	text-align: center;
	margin: 1em auto;
}

.qh
{
	background-color: rgba(255, 255, 255, 0.8);
	border: 1px solid rgba(0, 0, 0, 0.8);
}

.blue { color: #009fe3; }


article {
	font-size: 0.8em;
	max-width: 600px;
	margin: 4em auto;
	padding: 32px;
}

article > ul {
	margin-left: 2em;
}

@media only screen and (max-width: 600px)
{
	#logo {
		padding-left: 32px;
		padding-right: 32px;
		max-width: 100%;
	}
}