@keyframes animateLogo {
	from {
		transform: scale(0.1) rotate(0);
	}
	to {
		transform: scale(1) rotate(360deg);
	}
}

html {
	box-sizing: border-box;
	scroll-behavior: smooth;
}

*, *:before, *:after {
	box-sizing: border-box;
}

body {
  background-repeat: no-repeat;
	 background-color: darkGray;
}

header {
	height: 50vh;
	text-align: center;
}
section {
	width: 100%;
	margin: 5rem auto 5rem auto;
	background-color: whiteSmoke;
	/* background-color: blue; */
}

footer {
	width: 100%;
	color: whiteSmoke;
	padding: 3rem;
	text-align: center;
	background-color: rgba(0,0,0,0.5);
}

h1, h2 {
	font-weight: lighter;
	font-style: italic;
	text-align: center;
	font-family: serif;
}

h3 {
	font-size: 1.5rem;
	font-family: sans-serif;
	margin-bottom: 0.5rem;
}

h4 {
	font-family: sans-serif;
	margin-top: 0.5rem;
}

p {
	line-height: 1.5;
	font-family: sans-serif;
}

small {
	font-family: sans-serif;
}

address {
	font-style: normal;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/* line-height: 1.5; */
}

.logo {
	margin: auto;
	animation: animateLogo;
	animation-duration: 1s;
}

.flexIntro {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	/* background-color: yellow; */
}

.flexIntroItem {
	padding: 1rem;
	/* background-color: pink; */
}

.flexMenu {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.flexMenuItem {
	padding: 2rem;
	background-color: white;
	border-radius: 5px;
	box-shadow: 2px 10px 5px lightgrey;
}

.flexMenuIcon {
	width: 100%;
}

.flexContact {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: center;
}

.flexContactItem {
	padding: 1rem;
}

.marylou {
	border-radius: 5px;
	box-shadow: 2px 10px 5px lightgrey;
}

@media screen and (max-width: 640px) {
	body {
		margin: 0;
		background-image: url(EEV_background_portrait.jpg);
		background-size: contain;
	}
	section {
		padding: 2rem 0.5rem 2rem 0.5rem;
	}
	h1, h2 {
		font-size: 2.5rem;
	}
	.logo {
		width: 60vw;
		margin-top: 1rem;
	}
	.flexIntroItem {
		width: 100%;
	}
	.flexMenuItem {
		margin: 30px;
		flex-basis: 100%;
	}
}

@media screen and (min-width: 641px) {
	body {
		margin: 1rem;
		background-image: url(EEV_background_landscape.jpg);
		background-position: center center;
		background-size: cover;
		background-attachment: fixed;
	}
	section {
		padding: 2rem;
	}
	h1, h2 {
		font-size: 3rem;
	}
	.logo {
		width: 20vw;
		margin-top: 1rem;
	}
	.flexIntroItem {
		width: 50%;
	}
	.flexMenuItem {
		margin: 10px;
		flex-basis: 300px;
	}
}