:root{
	--maincolor:#323c41;
	--contentcolor:#d3d3d3; 
	--highlightcolor:#fe8300;
	font-family: Tahoma;
	font-size: 18px;
}

body{
	background-color: var(--maincolor);
}

#LOGO{
	position: absolute;
	left:0;
	right: 0;
	top: 0;
	margin: auto;
	height: 200px;
	max-width: 90vw;
}

nav{
	background-color: var(--maincolor);
	text-align: center;
	position: absolute;
	top: 200px;
	left:0;
	right: 0; 
	height: 50px;
	display: flex;
	justify-content: center;
}

nav button{
	height: 50px;
	max-width:20vw; 
	background-color: var(--maincolor);
	color: white;
	border: none;
	font-size: 20px;
	padding: 0 20px 0 20px;
}

nav button:hover{
	background-color: var(--highlightcolor);
}

#index-article{
	background-color: var(--contentcolor);
	position:absolute;
	top: 250px;
	left:0;
	right: 0;
	padding: 0 10% 0 10%;
	overflow: auto;
	height: 450px;
}

#index-gallery{
	background-color: var(--contentcolor);
	position:absolute;
	top: 700px;
	left:0;
	right: 0;
	padding: 0 10% 0 10%;
	overflow: auto;
	height: 400px;
	display: flex;
	justify-content: center;
}

#index-gallery a img{
	max-height: 400px;
	width: 15vw;
	padding: 0 2vw 0 2vw;
}

#about-wrap{
	background-color: var(--contentcolor);
	position:absolute;
	top: 250px;
	left: 0;
	right:0;
	padding: 0 10vw 0 10vw;
	height: 850px;
	display: flex;
	justify-content: space-between;
}

#about-article{
	overflow: auto;
	height: 850px;
	width: 50vw;
}

#about-gallery{
	height: 850px;
	width: 30vw;
	display: flex;
	justify-content: space-around;
	flex-direction: column;
}

#about-gallery img{
	max-width: 20vw;
	padding: 0 2vw 0 2vw;
}

#gallery-wrap{
	background-color: var(--contentcolor);
	position:absolute;
	top: 250px;
	left: 0;
	right:0;
	padding: 0 10vw 0 10vw;
	height: 1150px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	overflow: auto;
}
#gallery-wrap a{
	max-width: 12vw;
	max-height: 15vw;
	overflow: hidden;
}
#gallery-wrap a img{
	max-width: 12vw;
	padding: 10px 10px 10px 10px;
}

#contact-wrap{
	background-color: var(--contentcolor);
	position:absolute;
	top: 250px;
	left: 0;
	right:0;
	padding: 0 10vw 0 10vw;
	height: 850px;
	display: flex;
	justify-content: space-between;
}

#contact-map{
	padding: 10px;
}
#contact-text{
	padding: 10px;
}

footer{
	color: white;
	position: absolute;
	top:1400px;
	left:0;
	right: 0;
	padding: 0 20% 0 20%;
	display: flex;
	justify-content: space-between;
}

#footer-logo{
	width: 250px;
}
.social{
	margin: 20px;
	width: 70px;
	height: 70px;
}



@media only screen and (max-width: 700px) {
	nav{
		flex-direction: column;
		height: 200px;
	}
	nav button{
		max-width: 50vw; 
	}
	#index-article{
		top: 400px;
	}

	#index-gallery{
		top: 850px;
		flex-direction: column;
		height: 1650px;
	}

	#index-gallery a img{
		width: 80vw;
		max-height: 400px;
	}

	#about-wrap{
		flex-direction: column;
		top: 400px;
		height: 2100px;
	}

	#about-article{
		width: 80vw;
		height: 1000px;
	}

	#about-gallery{
		width: 80vw;
		height: 1000px;
	}

	#about-gallery img{
		max-width: 80vw;
	}

	#gallery-wrap{
		top: 400px;
		height: 2100px;
	}

	#gallery-wrap a{
		max-width: 35vw;
		max-height: 47.5vw;
	}

	#gallery-wrap a img{
		max-width: 38vw;
	}

	#contact-wrap{
		top: 400px;
		height: 1100px;
		flex-direction: column;
		padding: 0 2vw 0 2vw;
	}

	footer{
		top: 2500px;
		flex-direction: column;
	}
	#contact-footer{
		top: 1500px;
	}
}