* {
	box-sizing: border-box;
	font-size: 6mm;
}


html {
    font: normal 13px/1.4 "Open Sans", "Helvetica Neue", Helvetica, sans-serif;
    color: black;
}

html,body {
 /*   height: 95vh;*/
    background-color: silver;
}

/*
					*::before{
						color: maroon;
						background-color: rgb(230 230 230);
						font-size: 3mm;
						border: 0.5mm solid maroon;
						padding: 1mm;
						border-radius: 2mm;
						position:relative;
						top: -20px;
						left: -20px;
					}

					html{
					margin: 20px;
					border: 0.5mm dotted black;	
					} 

					div.page-content::before {
						content: 'page-content';
					}

					div.page-header::before {
						content: 'page-header';
					}

					div.page-footer::before {
						content: 'page-footer';
					}

					div.page-container::before {
						content: 'page-container';
					}
*/

div.page-container {
	display: flex;
	flex-direction: column;
	gap: 5px;
	border: 0.2px solid navy;
	padding: 0;
	border-radius: 15px;
	margin: 0px; 
	background-color: rgb(200 170 200);
	height: calc(100vh - 5mm);
}

div.page-content, div.page-header, div.page-footer {
/*	flex-basis: 15mm;*/
}

div.page-content{
	flex-grow:1;
	border: 1px solid blue;
	margin: 0;
	background-color: rgb(150, 150, 150);
}

div.page-header {
	height: 10mm;
	border: 0.1px solid blue;
	background-color: orange;
}

div.page-footer {
	height: 10mm;
	border: 0.1px solid red;
	background-color: yellow;
	display: flex;
}

canvas{
	border: 1mm solid yellow;
	width: 100%;
	height: 100%;
	background-color: rgb(255, 220, 160);
	border-radius: 5mm;
}

#fehler {
	background-color:	red;
	border:			5px solid white;
	color:			white;
	margin:			20%;
	padding:		35px;
	border-radius:		35px;
}


/*
@media (max-width: 767px) {

}
@media (min-width: 480px) {

}
@media (min-width: 768px) {

}