/*
@font-face {
    font-family: 'bpmono';
    src: url('assets/fonts/bpmono-webfont.woff2') format('woff2'),
         url('assets/fonts/bpmono-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
*/

:root {
	/* Main colour palette */
	--htmlbackground: #212121; /* page bg */
	--backgroundgrad1: #6aadbc; 
	--backgroundgrad2: #54d2ed; 
	--backgroundgrad3: #34646e; 
}

html {
	background-color: var(--htmlbackground); /*fallback*/
}

body {
	max-width: 50rem;
	margin: auto;
	padding: 1rem;
	background-color: azure;
	border: 2px double black;
	
	font-family: monospace;
	font-size: 1.2rem;
	}
		
@media (min-width: 600px) {
body {
	margin: 1rem auto;
	font-size: 1.4rem; 
	}
}

.group {
	border: 1px dashed var(--htmlbackground);
	padding: 0.5rem 1rem;
	margin: 0.5rem 0rem;
}