.grid{
	display: grid;
	height: 100vh;
	grid:
	 'head' 100px
	 'main' 1fr
	 'foot' 250px
	 /1fr;
}

.gridIn{
	display: grid;
	height: 100%;
	grid:
	 'ref con' 1fr
	 /1fr 1fr;
}

.gridR{
	display: grid;
	height: 100%;
	grid:
	 're re' 2fr
	 'beA beB' 1fr
	/1fr 1fr;
}

.gird{
	display: grid;
	height: 100%;
	grid:
	 'edA edB edC' 1fr
	 'proj proj proj' 1fr
	/1fr 1fr 1fr;
}

#proot{
	grid-area: head;
	background-color: #fbdb65;
	padding-top: 20px;
	padding-left: 20px;
}

#synth{
	grid-area: foot;
	background-color: #b9faca;
}

#body{
	grid-area: main;
	background-image: linear-gradient(#fbdb65,#b9faca); 
}

#reference{
	grid-area: ref;
	padding: 10px;
}

#contact{
	grid-area: con;
	padding: 10px;
}

#resu{
	grid-area: re;
	padding: 10px;
}

#bach{
	grid-area: beA;
	padding: 10px;
}

#bachB{
	grid-area: beB;
	padding: 10px;
}

#haA{
	grid-area: edA;
	padding: 10px;
}

#haB{
	grid-area: edB;
	padding: 10px;
}

#haC{
	grid-area: edC;
	padding: 10px;
}

#pject{
	grid-area: proj;
	padding: 10px;