@import url("../fonts/fonts.css");

:root{
	--color1: rgb(237,239,241);
	--color2: rgb(224,226,229);
	--color3: rgb(57,65,72);
	--color4: rgb(16,91,178);
}
*{
	font-family: 'Marianne';
	padding: 0px;
	margin: 0px;
	background-color: var(--color1);
}
header {
	background-color: var(--color2);
	padding: 0.8em 0 0.8em 0;
}
header h1 {
	background-color: var(--color2);
	text-transform: uppercase;
	font-size: x-large;
}
section {
	font-size: 1.2em;
	display: relative;
}
a {
	text-decoration: none;
	color: var(--color3);
}
a:hover {
	color: var(--color4);
}

header h1, section {
	margin: 0 10% 0 10%;
	color: var(--color3);
}
header h1, .div1, .div3 {
	text-align: center;
}
.parent { 
	display: grid;
	grid-template-columns: 1fr;
	grid-column-gap: 20px;
	grid-row-gap: 5px;
	transform: translateY(0%);
}
.grid1 {
	grid-area: 1 / 1 / 2 / 2;
	text-align: center;
	margin: 25px 0px 20px 0px;
}
.grid1 img{
	border-radius: 50%;
	width: 150px;
	height: 150px;
}
.grid2 {
	grid-area: 3 / 1 / 4 / 2
	text-align: justify;
}
.grid3 {
	grid-area: 2 / 1 / 3 / 2;
	text-align: center;
	text-transform: uppercase;
	padding: 0px 0px 25px 0px;
}
.grid2 p {
	margin: 0px 0px 15px 0px;
}



@media screen and (min-width: 800px){
	header h1, section {
	margin: 0 35% 0 35%;
}
}