.source-code-pro-<uniquifier> {
  font-family: "Source Code Pro", monospace;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

body { 
font-family: "Source Code Pro", monospace;
font-size: 1em;
}

a {
text-decoration: none;
color: black;
}


/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {

}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {

	body {
	font-size: 3em;
	}	

	h1 {
	font-size: 2em;
	font-weight: bold;
	padding-bottom: 20px;
	}

	header {
	margin: 50px;
	}

	header div:first-child img {
  width: 150px;
  height: 150px;
	}
	
	header div {
	margin-bottom: 20px;
	}	

	.title {
	width: 100%;
	margin-bottom: 100px;
	}

	.main {
		width: 100%;
	}

	.main .main-image img {
	width: 100%;
	height: 500px;
	margin-bottom: 50px;
	background-color: lightgreen;
	object-fit: cover;
	}

	.texte {
	font-size: 0.8em;

	.bold {
	font-weight: bold;
	}

	}

	.main .texte {
	margin-bottom: 50px;
	}

	.main .other-images img {
	width: 100%;
	height: 500px;
	margin-bottom: 50px;
	background-color: lightgreen;
	}

	.main .images-parcours img {
	width: 100%;
	height: 300px;
	margin: 30px 0 50px 0;
	background-color: lightblue;
	}

	#wrapper {
	display: flex;
	flex-wrap: wrap;
	width: 100%;
	margin: 50px;
	}

	#wrapper div img {
  width: 100%;
  height: auto;
	
	}

	#container {
	display: flex;
	flex-wrap: wrap;
	width: 90%;
  margin: 50px;
	}

	#nav {
	display: flex;
	justify-content: space-between;
	margin: 200px 50px 50px 50px;

	/*	position: fixed;
  bottom: 0; */

	}

}

/* Medium devices (landscape tablets, 768px and up) 
@media only screen and (min-width: 768px) {...}*/

/* Large devices (laptops/desktops, 992px and up) 
@media only screen and (min-width: 992px) {...}*/

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
	body {
		font-size: 1em;
	}	

	h1 {
	font-size: 3em;
	font-weight: bold;
	}

	header {
	margin: 50px 0 50px 50px;
	}

	header div:first-child img {
  width: 100px;
  height: 100px;
	}
	
	header div {
	margin-bottom: 20px;
	}	

	.title {
	width: 100%;
	margin-bottom: 100px;
	}

	.main .main-image img {
	width: 1024px;
	height: 800px;
	margin-bottom: 50px;
	object-fit: cover;
	}

	.texte {
	font-size: 1em;
	}

	.bold {
	font-weight: bold;
	}

	.last {
	margin-bottom: 30px;
	}

	.main {
		width: 1024px;
	}

	.main .texte {
	text-align: justify;
	line-height: 1.5;
	margin-bottom: 50px;
	}

	.main .other-images img {
	width: 1024px;
	height: 800px;
	margin-bottom: 50px;
	}

	.main .images-parcours img {
	width: 1024px;
	height: 300px;
	margin: 30px 0 50px 0;
	background-color: lightblue;
	}


	#wrapper {
	display: flex;
	flex-wrap: wrap;
	margin: 50px;
	width: 50%;
	margin: auto;
	}

	#container {
	display: flex;
	flex-wrap: wrap;
	width: 50%;
	margin: auto;
	}

	#wrapper div img {
	width: 100px;
	height: 100px;
	object-fit: cover;
	}

	#nav {
	display: flex;
	justify-content: space-between;
	margin: 100px;
	}

}