@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap");

:root {
	--blue: #0188b2;
	--black: rgb(43, 43, 43);
	--orange: #ffca4d;
	--dark-orange: #f5880b;
	--darker-orange: #af6107;
	--light-gray: rgb(226, 226, 226);
	--mid-gray: rgb(143, 143, 143);
	--sep-orange: #f1c40f;
	--sep-blue: #34495e;
	/* font-size: 16px; */
}

html {
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

a {
	user-select: none;
}
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	/* border: red 1px solid; */
}
img {
	object-fit: contain;
	max-width: 100%;
}

*::selection {
	background: var(--orange);
}

p {
	line-height: 140%;
	font-size: 1rem;
}

body {
	font-family: Noto Sans;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	/* color: var(--black); */
}

.hide {
	display: none;
}

.full {
	height: 150vh;
	width: 100vw;
}

.main-container {
	display: flex;
}

.shadow {
	box-shadow: 0 4px 8px #b6b6b64b, 0 6px 20px #b6b6b64b;
}

.navi {
	width: 100%;
	display: flex;
	flex-direction: column;
	position: fixed;
	box-shadow: 0vw 1vw 2vw rgba(0, 0, 0, 0.1);
	background-color: white;
	transition: 0.3s;
}

.nav-links ul li a {
	padding: 2rem 3rem;
	text-decoration: none;
	font-size: 1.5rem;
	font-weight: 600;
	color: white;
	transition: 0.3s;
}

li a:hover {
	filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(360deg)
		brightness(100%) contrast(104%);
	/* cursor: pointer; */
}

.nav-top {
	width: 100vw;
	display: flex;
	padding: 0.6rem;
	align-items: center;
	justify-content: space-between;
}

.logo {
	width: 3rem;
	display: inline-block;
}

.nav-top .aimane {
	margin-left: 1rem;
	color: gray;
}

.name {
	font-size: 1.1rem;
	transition: 0.7s;
	color: var(--blue);
}

.job {
	color: var(--black);
	transition: 0.7s;
}

.navi .nav-top .nav-left {
	display: flex;
	align-items: center;
}

.navi .nav-top .ham {
	margin-right: 16px;
}

.navi .nav-links ul {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	list-style: none;
	margin-top: 6rem;
}

.navi .nav-links ul li {
	margin-top: 1rem;
	padding: 1rem 0;
	text-align: center;
}

.nav-links ul li:hover {
	background-color: var(--darker-orange);
}

.main-container {
	display: flex;
	flex-direction: column;
}

.visible-content {
	display: flex;
	flex-direction: column;
	padding-top: 6rem 2rem;
}

.hero {
	display: flex;
	flex-direction: column-reverse;
	align-items: center;
	padding-top: 6rem;
}

.hero .intro {
	display: flex;
	flex-direction: column;
	padding: 20px;
	/* background-color: #02A0C4; */
}
.hero .intro h4 {
	font-size: 2rem;
	color: var(--black);
	margin-bottom: 1vh;
}
.hero .intro h4 span {
	color: var(--blue);
}
.hero .intro p {
	line-height: 140%;
	font-size: 1rem;
}

.illustration-img {
	width: 30rem;
}

.hero .hero-cta {
	display: flex;
	margin-top: 3rem;
	justify-content: space-between;
	padding-bottom: 11vh;
}
.btn {
	text-decoration: none;
	background-color: var(--blue);
	padding: 0.5rem 1.5rem;
	font-size: 1.2rem;
	font-weight: 500;
	color: white;
	letter-spacing: 0.1rem;
	border-radius: 0.2rem;
	margin-right: 2rem;
}

.social-links {
	display: flex;
	align-items: center;
	flex-grow: 1;
	justify-content: space-around;
}

.social-links .social {
	width: 2rem;
}

.projects-header {
	color: var(--black);
	margin-left: 2rem;
	font-size: 2rem;
}

.projects {
	display: flex;
	padding: 1.5rem;
	flex-direction: column;
}

.projects .project {
	display: flex;
	flex-direction: column;
	border: var(--light-gray) 0.12rem solid;
	margin-bottom: 5rem;
}
.project .project-infos {
	padding-left: 2rem;
	padding-right: 2rem;
	padding-bottom: 3rem;
}

.project .project-infos .card-header {
	color: var(--black);
	margin-top: 0.7rem;
	margin-bottom: 1rem;
}
.card-header span {
	color: gray;
	font-size: 1rem;
}
.project .project-infos p {
	font-size: 0.9rem;
	margin-bottom: 2rem;
	color: var(--black);
}

.project a img {
	/* border: var(--light-gray) .12rem solid; */
	width: 100%;
	max-width: 701px;
}
.project-btn {
	border: 0.1rem solid var(--blue);
	text-decoration: none;
	color: var(--blue);
	padding: 0.5rem 1.5rem;
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: 0.1rem;
	border-radius: 0.1rem;
	margin-right: 2rem;
}

/* HERE IS THE MENU MODIFICATIONS*/

.nav-active {
	background-color: var(--dark-orange);
	cursor: url(../img/mouseee.png), auto;
}

.name-active {
	color: white;
}

.job-active {
	color: rgba(255, 255, 255, 0.685);
}

#pro {
	text-align: center;
}

.illustration svg {
	width: 100%;
	height: auto;
}

#bg {
	animation: background 25s linear infinite;
	transform-origin: center;
	transform-box: fill-box;
}

@keyframes background {
	from {
		transform: rotateZ(0deg);
	}
	to {
		transform: rotateZ(360deg);
	}
}

.email-btn:hover {
	cursor: pointer;
}

/* ----------------Toast--------------- */
#snackbar {
	visibility: hidden; /* Hidden by default. Visible on click */
	min-width: 250px; /* Set a default minimum width */
	margin-left: -125px; /* Divide value of min-width by 2 */
	background-color: rgb(10, 128, 6); /* Black background color */
	color: #fff; /* White text color */
	text-align: center; /* Centered text */
	border-radius: 2px; /* Rounded borders */
	padding: 16px; /* Padding */
	position: fixed; /* Sit on top of the screen */
	z-index: 1; /* Add a z-index if needed */
	left: 50%; /* Center the snackbar */
	bottom: 30px; /* 30px from the bottom */
}
/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
	visibility: visible; /* Show the snackbar */
	/* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 2.5 seconds */
	-webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
	animation: fadein 0.5s, fadeout 0.5s 2.5s;
}
/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@keyframes fadein {
	from {
		bottom: 0;
		opacity: 0;
	}
	to {
		bottom: 30px;
		opacity: 1;
	}
}

@-webkit-keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

@keyframes fadeout {
	from {
		bottom: 30px;
		opacity: 1;
	}
	to {
		bottom: 0;
		opacity: 0;
	}
}

/* ------------------------------- */
@media only screen and (max-width: 420px) {
	.hero .intro p {
		line-height: 140%;
		font-size: 0.7rem;
	}
}

@media only screen and (min-width: 800px) {
	:root {
		/* font-size: 18px; */
	}
	.visible-content .projects {
		flex-direction: row;
		justify-content: center;
		flex-wrap: wrap;
	}

	.visible-content .projects .project {
		flex-basis: 0;
		flex: 1 1 40%;
		margin: 1.5rem;
		max-width: 330px;
	}

	.visible-content .hero {
		flex-direction: row;
		justify-content: center;
		align-items: flex-end;
		padding: 0vh 5vw;
		padding-bottom: 120px;
		padding-top: 6rem;
	}

	.visible-content .hero .hero-cta {
		padding-bottom: 0;
	}
	.illustration svg {
		width: 25rem;
		height: 25rem;
	}
}

@media only screen and (min-width: 1024px) {
	#links {
		display: flex;
		align-items: center;
		padding: 0.6rem;
	}
	#links ul {
		flex-direction: row;
		margin-top: 0;
	}

	.nav-links ul li a {
		color: var(--blue);
		padding: 1rem 2rem;
		font-size: 0.9rem;
	}
	li a:hover {
		filter: none;
		color: var(--black);
		/* cursor: pointer; */
	}
	.nav-links ul li:hover {
		background-color: rgb(241, 241, 241);
		color: var(--black);
	}
	.navi .nav-links ul li {
		margin-top: 0;
	}
	.ham {
		display: none;
	}
	.nav-top {
		width: auto;
	}
	.navi {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-start;
	}
	.illustration svg {
		width: 25rem;
		height: 25rem;
	}
}

/* Case Studies navigartion Bot */