body {
	color: #1A1A1A;
	font-family: 'Alegreya', serif;
}
/* main { background-image: linear-gradient(180deg, rgba(25, 136, 247, 0.28) 0%, rgba(247, 160, 25, 0.28) 100%);} */
 main { background-image: linear-gradient(180deg, rgba(25, 136, 247, 0.28) 0%, rgba(43, 90, 54, 0.34) 100%);} 
 
img {
  max-width: 100%;
  height: auto;
  margin: auto;
}

h3 {margin-top: 0rem;}
main {
	margin: 0.5rem;

}

#container {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: auto;
	grid-template-rows: auto auto auto auto auto auto auto;
	grid-template-areas: 
		"header"
		"magpie"
		"pnboth"
		"pica"
		"numenius"
		"endstuff"
}


@media only screen and (min-width: 700px) {

#container {
	display: grid;
	grid-gap: 15px;
	grid-template-columns: 1fr auto 1fr;
	grid-template-rows: auto auto auto;
	grid-template-areas: 
		"header header header"
		"pica magpie numenius"
		"pnboth pnboth endstuff";
}
#container
#c4 {grid-area: pica; margin-left: 1.5rem;}
#c6 {grid-area: numenius; margin-right: 1.5rem;}
#c7 {grid-area: pnboth;  margin-left: 1.5rem;}
.bothprojects {display: flex;}
#c8 {grid-area: endstuff; margin-right: 1.5rem;} 
}

.gbox {

}

#c1 {grid-area: header;
    font-family: 'Eagle Lake', cursive;
    text-align: center;}
#c1 h1 {margin-bottom: 0.3rem; } 
#c1 h2 { margin-top: 0.3rem;}
     

#c5 {display: flex; grid-area: magpie;	justify-content: center;}
#c6 {grid-area: numenius; margin-left: 1.5rem;}
#c7 {grid-area: pnboth; margin-left: 1.5rem;}
#c8 {grid-area: endstuff; margin-left: 1.5rem;} 
#c4 {grid-area: pica; margin-left: 1.5rem;}