*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}
html {
	font-size: 20px;
	font-weight: 300;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
		Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
	line-height: 1.5;
}
body {
	min-height: 100vh;
	background-color: #333;
	color: #eee;
}
header,
nav,
main,
footer {
	width: 80vw;
	padding: 1rem 2rem;
	margin: 0 auto;
}
main {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: flex-start;
}
main section {
	max-width: 45%;
	flex-basis: 45%;
	flex-grow: 0;
	flex-shrink: 0;
	/*  overflow-x: scroll;  */
}
section img {
	width: 90%;
}
header h1 {
	color: orange;
}
header h2 {
	color: orangered;
}
p {
	line-height: 1.7;
	margin: 1.5rem 0;
}
input {
	padding: 0.25rem 1rem;
	font-size: 1rem;
	font-family: inherit;
}
button {
	padding: 0.25rem 1rem;
	font-size: 1rem;
	font-family: inherit;
	color: white;
	background-color: cornflowerblue;
}

.results {
	color: white;
}

#map {
	width: 100%;
	height: 400px;
}

@media screen and (max-width: 768px) {
	#map {
		height: 300px;
	}
}

@media screen and (max-width: 480px) {
	#map {
		height: 200px;
	}
}

/* Voor schermen vanaf 768px breed */
@media (min-width: 768px) {
	#map {
		width: 80vw;
		/* 80% van de viewport breedte */
		height: 60vh;
		/* 60% van de viewport hoogte */
	}
}

/* Voor schermen kleiner dan 768px breed */
@media (max-width: 767px) {
	#map {
		width: 100vw;
		/* 100% van de viewport breedte */
		height: 50vh;
		/* 50% van de viewport hoogte */
	}
}