h2 {
    text-align: center;
    font-family: 'MSReferenceSansSerifBold', 'Arial', sans-serif;
} 

#main-title {
	padding-bottom: 40px;
}

#presentation{
	background-image: url('../ressources/img/main-page/main-page-bg1.png');
	background-repeat: no-repeat;
	background-position: center;
	height: 1200px;

	display: flex;
	flex-direction: column;
	align-items: center;
}

#presentation-texte {
    font-family: 'MSReferenceSansSerif', 'Arial', sans-serif;
    color: white;
    text-align: left;
    padding-left: 2vw;
	max-width: 40vw;
	font-size: calc(10px + .5vw);
}

#presentation-texte h2 {
    padding: 0;
    display: flex; 
    align-items: center;
	font-size: calc(12px + .5vw);
}

#presentation-texte h2 img {
    user-select: none;
    max-height: 100%;
    width: 2vw;
    margin-right: 1vw;
}

.titre {
	display: flex;
	align-items: center;
	justify-content: center;
	column-gap: 15%;
	margin-top: 30px;
	width: 95vw;
}

#telescope {
    user-select: none;
    width: 160px;
}

#moon {
    user-select: none;
    width: 120px;
	align-self: flex-end;
}

#affichage-projets {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin-bottom: 20px;
}

#competences {
	background-image: url('../ressources/img/main-page/main-page-bg3.png');
	background-position-x: center;
	background-repeat: no-repeat;
	background-color: #5375a0;
	padding-top: 300px;

	display: flex;
	flex-direction: column;
	align-items: center;
}

#competences h2 {
    text-align: center;
	font-family: 'MSReferenceSansSerifBold', 'Arial', sans-serif;
    color: white;
}

#lilstar2 {
    user-select: none;
    width: 120px;
}

#frogal {
    user-select: none;
    width: 160px;
}

#coeur-competences {
	user-select: none;
	width: 100%;
	max-width: 1000px;
	margin-top: 20px;
}

footer{
	background-image: url("../ressources/img/footer/main-page-footer.png");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	height: 430px;
}

@media screen and (max-width: 1600px) {

	#presentation {
		background-position: -200px;
	}
	
}

@media screen and (max-width: 1400px) {

	#competences {
		background-size: contain;
		padding-top: 110px;
	}
}

@media screen and (max-width: 1050px) {

	#presentation {
		background-position: -250px;
	}

	.titre{
		column-gap: 10%;
	}

	#telescope, #frogal {
		width: 120px;
	}
	#moon {
		width: 80px;
	}

	#lilstar2 {
		width: 100px;
	}


}

@media screen and (max-width: 800px) {

	#geda {
		height: 80vh;
	}

	#presentation {
		background-position-x: -650px;
		background-position-y: -100px;
		font-size: calc(10px + .5vw);
	}

	#presentation-texte {
		max-width: 80vw;
		font-size: calc(12px + .5vw);
	}

	#telescope, #moon, #frogal, #lilstar2 {
		width: 100px;
	}

	#geda h1 {
		font-size: calc(16px + .5vw);
	}
}

@media screen and (max-width: 700px) {

	#moon, #telescope, #lilstar2, #frogal {
		display: none;
	}

	#presentation {
		height: 800px;
		background-position-x: -620px ;
		background-position-y: -360px;
	}

#presentation-texte {
	background-color: #ffffff80;
	color: black;
	border-radius: 5px;
}
}