html, body{
	margin: 0;
	padding: 0;
	height: 100%;
	width: 100%;
}

.main{
	display: grid;
	grid-template-columns: 2fr 3fr;
	height: inherit;
}

.content{
	display: grid;
	grid-template-rows: 1fr 1fr;
	height: inherit;
}

.explain{
	background-color: #006368;
}

#logodesign{
	display: grid;
	align-items: center;
	justify-items: center;
}

h2{
	font-family: lora;
	color: white;
	font-size: 36px;
	text-align: center;
}

.bio{
	
	color: white;
	font-size: 21px;
	text-align: left;
	padding: 10px;
}

.name{
	font-size: 24px;
	text-align: center;
}

#excuses{
	display: grid;
	align-items: center;
	justify-items: center;
	font-family: lora;
	font-size: 18px;
}

.joke{
	display: grid;
	background-color: #006368;
	align-self: end;
}

.tatcher{
	justify-self: end;
	align-self: end;
	margin: 0;

}

@media (max-width: 770px){

	h2{
		font-size: 26px;
	}

	.bio{
		font-size: 14px;
	}

	.name{
		font-size: 18px;
	}

}

@media (max-width: 520px){

	.main{
		grid-template-columns: none;
	}