body{ background-color: #d5eeff;
}

.grid {
	display: grid;
	height:3600px;
	grid:
	'nav'     100px
	'head'    1fr
	'hero'    650px
	'message' 1fr
	'cards'   2000px
	'footer'  200px
	/1fr;
}
#nav{
	grid-area:nav;
	font-size:25px;
	display: flex;
	justify-content: center;
	align-items: center;
}
#nav{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#nav:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#nav-container{
padding: 2px 16px;
}
#hero{
	grid-area: hero;
	display: flex;
	justify-content: center;
	align-items: center;
}
#hero{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#hero:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#hero-container{
padding: 2px 16px;
}
#head{
	grid-area: head;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 85px;
}
#centered{
        position: absolute;
        top: 50%;
        left: 35%;
        transform: translate(-50%, -35%);
        font-size: 85px;
        font-family: Georgia, Times, serif;
        color: white;
}
#cards{
	grid-area:cards;
	font-size:35px;
}
#grid3{
display: grid;
gap:10px;
grid:
      'project1 project2' 1fr
      'project3 project4' 1fr
      /1fr 1fr;
}
#project1{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#project1:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#project1-container{
padding: 2px 16px;
}
#project2{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#project2:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#project2-container{
padding: 2px 16px;
}
#project3{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#project3:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#project3-container{
padding: 2px 16px;
}
#project4{
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
}
#project4:hover{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
#project4-container{
padding: 2px 16px;
}
#footer{
grid-area: footer;
color: black;
display: flex;
justify-content: center;
align-items: center;
font-size:25px;
}
#message{
	grid-area: message;
	color: black;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:25px;
}