body {
	overflow: hidden;
}

.hero {
	display: flex;
	position: relative;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	padding: 0 200px;
	padding-top: 250px !important;
	gap: 50px;
}

.title-hero {
	display: flex;
	flex-wrap: wrap;
	width: 700px;
	justify-content: center;
}

.hero h1 {
	color: var(--color-white);
}

.hero .image-container {
	width: 515px;
	height: 625px;
	z-index: 25;
	animation: glow2 3000ms linear infinite 3000ms;
}

@keyframes glow2 {
	40% {
		filter: drop-shadow(0 0 1rem var(--primary-color));
	}
}

.metier {
	display: inline-flex;
	position: absolute;
	height: 250px;
	padding: 0px 25px;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
	gap: 15px;
	border-radius: 100px;
	border: 1px solid var(--color-white);
	top: 450px;
	right: 200px;
}

.metier h2 {
	color: var(--primary-color);
	font-size: 3rem;
	font-weight: 600;
	transition: color 1s ease-in-out;
}

.metier h3 {
	color: var(--color-white);
}

.metier svg {
	position: absolute;
	left: -225px;
}

.metier svg > path {
	fill: var(--primary-color);
	transition: fill 1s ease-in-out;
}

.slogan {
	width: 200px;
	position: absolute;
	left: 15%;
	top: 450px;
}

.slogan h3 {
	color: var(--primary-color);
	font-size: 2rem;
	transition: color 1s ease-in-out;
}

.slogan h3 span {
	font-weight: 900;
}

.card-cv {
	display: flex;
	position: absolute;
	z-index: 30;
	left: 200px;
	bottom: 200px;
	padding: 35px 25px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	border-radius: 15px;
	background-color: var(--color-300);
	color: var(--background-color);
	transition: background-color 1s ease-in-out;
}

.title-card-cv p {
	font-size: 2rem;
	font-style: normal;
	font-weight: 500;
}

.star-title {
	display: flex;
	gap: 15px;
}

.star-title h2 {
	font-size: 3rem;
	font-weight: 600;
}

.section-presentation {
	color: var(--background-color);
	z-index: 2;
	display: grid;
	gap: 25px;
	grid-template-columns: repeat(2, 0.5fr) repeat(2, 1.3fr);
	grid-template-rows: 1.25fr 0.5fr 1.7fr 0.75fr;
	padding-top: 0;
}

.div1 {
	grid-area: 1 / 1 / 2 / 2;
}
.div2 {
	grid-area: 1 / 2 / 2 / 3;
}
.presentation-moi {
	grid-area: 1 / 3 / 2 / 5;
	background-color: var(--color-white);
}
.div6 {
	grid-area: 2 / 4 / 3 / 5;
	height: 152px;
}

.item-presentation {
	border-radius: 25px;
	overflow: hidden;
	z-index: 2;
}

.parcours {
	grid-area: 2 / 1 / 4 / 3;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--primary-color);
	width: 100%;
}

.bloc-presentation {
	display: flex;
	width: -webkit-fill-available;
	height: -webkit-fill-available;
	padding: 25px;
	flex-direction: column;
	align-items: flex-start;
	gap: 25px;
}

.parcours .image-container {
	width: 100%;
	height: -webkit-fill-available;
	border-radius: 25px;
	overflow: hidden;
}

.competences {
	grid-area: 2 / 3 / 4 / 4;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--primary-color);
	width: 100%;
}

.list-competences {
	display: flex;
	flex-direction: column;
	width: 100%;
	gap: 15px;
}

.bloc-competence {
	display: inline-flex;
	padding: 5px 0px 10px 0px;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	border-bottom: 2px solid var(--background-color);
}

.instagram-feed {
	grid-area: 3 / 4 / 4 / 5;
	display: flex;
	height: -webkit-fill-available;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--primary-color);
	padding-left: 4px;
}

.instagram-feed > div {
	width: 100%;
}

.eui-widget-title,
.eapps-instagram-feed-posts-grid-load-more {
	display: none !important;
	visibility: hidden !important;
}

.animation-bunny {
	grid-area: 4 / 1 / 5 / 5;
	width: 100%;
	height: 200px;
}

.animation-bunny video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.nom-site {
	position: absolute;
	bottom: -45px;
	z-index: 0;
}

.nom-site h2 {
	background: -webkit-linear-gradient(var(--background-color), var(--color-200));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: var(--color-200);
	font-size: 17vw;
	font-weight: 700;
	opacity: 30%;
}

.stars {
	position: absolute;
	animation: glow 2000ms linear infinite 1000ms;
}
@keyframes glow {
	40% {
		filter: drop-shadow(0 0 1rem  var(--color-white));
	}
}

#first-star {
	left: 20%;
	top: 300px;
}

#second-star {
	left: 35%;
	top: 550px;
}

#third-star {
	right: 30%;
	top: 700px;
}

#fourth-star {
	right: 15%;
	top: 200px;
}

@media screen and (max-width: 1440px) and (min-width: 769px) {
	.hero {
		padding: 0 100px;
	}

	.metier {
		right: 100px;
	}

	.card-cv {
		left: 100px;
	}
}

@media screen and (max-width: 1024px) {
	.title-hero {
		width: 100%;
	}

	.hero h1 {
		text-align: center;
	}
	.section-presentation {
		display: flex;
		flex-direction: column;
	}
}

@media screen and (max-width: 768px) {
	.hero {
		padding: 0 20px;
		padding-top: 125px !important;
	}

	.hero .image-container {
		width: 100%;
		height: auto;
	}

	.nom-site,
	.metier {
		display: none;
	}

	.card-cv {
		position: initial;
	}

	.slogan {
		right: 0;
		top: 378px;
		left: auto;
		width: 135px;
	}

	.slogan h3 {
		color: var(--primary-color);
		font-size: 1.5rem;
	}

	#first-star {
		left: 15%;
		top: 340px;
	}
}