*{
	margin: 0;
	box-sizing: border-box;
}
#main{
	display: flex;
	flex-direction: column;
	height: 100vh;
}
#header{
	background:darkblue;
	width: 100%;
	height: 10%;
	position: fixed;
}
#navbar{
	height: 100%;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
}
#navbar a{
	font-size: 1.2rem;
	color: white;
	text-decoration: none;
}
#content-area{
	background: black;
	width: 100%;
	min-height: 100%;
}
#about{
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
#works {
	background: coral;
    min-height: 40%;
    display: flex;
    align-items: center;
    flex-direction: column;
}
#contacts {
    background: blueviolet;
    min-height: 1rem;
    display: flex;
    padding: 1rem;
}
#about h1{
	color: white;
	font-size: 2.5rem;
}
.contact-msg{
	font-size: 1.5rem;
	color: white;
	display: inline;
}
#works-container{
	width: 90%;
	display: grid;
	grid-template-columns: 1fr;
	grid-gap: 50px;
	margin-bottom: 10%;
}
.links-container{
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: space-around;
	flex: 7;
}
.links-container img{
	max-width: 90%;
	aspect-ratio: 1;
}
.msg-container{
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1rem;
	flex: 3;
}
.work-tile{
	background: gray;
	width: 100%;
	aspect-ratio: 0.9;
}
#works-title{
	color: white;
	font-size: 2rem;
	margin: 5%;
}
@media (min-width: 800px){
	.links-container img{
		max-width: 50%;
		aspect-ratio: 1;
	}
}
@media (max-width: 400px){
	#about h1{
		font-size: 2.4rem;
	}
	.contact-msg{
		font-size: 1.2rem;
	}
}
@media (max-width: 320px){
	#about h1{
		font-size: 2.0rem;
	}
	.contact-msg{
		font-size: 1rem;
	}
}
@media (min-width: 500px){
	#works-container{
		grid-template-columns: 1fr 1fr;
	}
}
@media (min-width: 1000px){
	#works-container{
		grid-template-columns: 1fr 1fr 1fr;
	}
}