* {
	padding:0;
	margin:0;
}

body {
	height:100vh; 
	display:grid;
	grid-template-columns:100%;
	grid-template-rows:4rem 1fr 4rem;
	grid-template-areas:
		"headerSection"
		"mainSection"
		"footerSection";
}
header {
	grid-area:headerSection;	
    display: flex;
    flex-direction: column;
    align-items: center;
    
}
main {
	grid-area:mainSection;
    display: flex;
    justify-content: center;
	align-items: center;
}

footer {
	grid-area:footerSection;
    display: flex;
    justify-content: center;
}

canvas{
    image-rendering: crisp-edges;
	width: 500px;
	height: 500px;
}