@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&family=PT+Serif&display=swap');
* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	scroll-behavior: smooth;
}

html {
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
}

body {
	font-family: 'PT Serif', serif;
	font-weight: 400;
	font-size: 2.4vh;
	line-height: 3.6vh; /* 1.5 * font-size is nice. */
	background-color: #c8d0cc;
}

nav {
	position: fixed;
	top: 0;
	height: 6%;
	width: 100%;
	background-color: #707070;
	opacity: 0.7;
}

nav > div {
	height: 100%;
	width: 100%;
	margin-left: 50%;
}

nav > div div {
	display: inline-block;
	text-align: center;
	line-height: 6vh;
	width: 10vw;
	color: #ebebeb;
	font-size: 2vh;
	font-family: sans-serif;
	text-decoration: none;
}

nav > div div:hover {
	background-color: #415975;
}

body > div {
	height: 60vh;
	width: 100%;
	background-image: url('img/Louvre.jpg');
	background-size: cover;
}

article {
	background-color: #c8d0cc;
	color: black;
	padding: 0 10%;
}

article > section {
	background-color: #eeeeee;;
	margin: 10vh 5vw;
	padding: 20px 5vw;
}

article p {
	margin-bottom: 5vh;
}

h1 {
	font-family: 'Amatic SC', cursive;
	font-size: 7.2vh;
	line-height: 10.8vh;
	color: black;
}