@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&family=Oswald:wght@300&display=swap');

/* body {
	font-family: 'Noto Sans JP', sans-serif;
	padding: 0 2%;
	margin: 0;
} */

/* ============================ */
:root {
	/* --background-color: rgba(var(--bs-light-rgb),var(--bs-bg-opacity))!important; */

	--background-color: #f7f7f7;
	--text-color: black;
  }
body {
	padding: 0 2%;
	margin: 0;
	font-family: 'Noto Sans JP', sans-serif;
	background-color: var(--background-color);
	color: var(--text-color);
  }

  .image{
	height: 200px;
	object-fit: cover;

  }
  
/* ================================ */

.logo-photo{
	border-radius: 50%;
	width: 20%;
}

.page-content {
	margin: 4%;
	
}
.page-content header {
	margin-top: 20%;
	max-width: 80%;
}
.page-content header h1 {
	margin: 0;
	text-transform: uppercase;
	font-family: 'Oswald', sans-serif;
	font-size: 6vw;
}
.page-content header p {
	line-height: 30px;
	/* color: #818181; */

}
.page-content header a {
	text-decoration: none;
	background-color: inherit;
	border: none;
	outline: none;
	padding: 0;
	font-size: 15px;
	font-weight: bold;
	padding-bottom: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}


.page-content header a:hover {
	color: #ccc;
	border-bottom-color: #000;
}
.page-content .presentation-image {
	margin-top: 5%;
}
.page-content .presentation-image img {
	max-width: 100%;
	/* height: auto; */
}

.page-content .projects-section {
	margin-top: 3%;

	
}
.page-content .projects-section h1 {
	font-family: 'Oswald', sans-serif;
	text-transform: uppercase;
	font-size: 3vw;
}
.page-content .projects-section .projects {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;

	
}
.page-content .projects-section .project {
	margin-right: 20px;
	max-width: 195px;
}
.page-content .projects-section .project h4 {
	margin: 0;
	font-size: 1.1rem;
}
.page-content .projects-section .project a {
	text-decoration: none;
	color:crimson;
	font-size: 0.8rem;
}
.page-content .projects-section .project a:hover {
	text-decoration: none;
	color:teal;
}
.page-content .projects-section .project .description {
	font-size: 10px;
}
.page-content .projects-section .project .dates {
	font-size: 13px;
	/* color: rgb(145, 145, 145); */
	color:f7f7f7;
}

.oeuvre{
	font-size: 1rem;
	font-weight: bold;
	font-style:italic;
}

.title-projects{
	text-align: center;
	color: teal;
	
}



.projects-title{
	font-size: 1.5rem;;
}

footer {
	margin-top: 5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	padding: 10px;
	background-color: #000;
	color: white;
	width:100%;
}
footer .colonne p{
	font-size: 12px;
	color: #ccc;
	cursor: pointer;
}
footer .colonne p i{
	font-size: 12px;
	color: #ccc;
	cursor: pointer;

}

footer .colonne p:hover {
	color: #fff;
}
footer .colonne p i:hover {
	color: #fff;
}

footer .colonne a{
	font-size: 12px;
	color: #ccc;
	cursor: pointer;
	text-decoration: none;
}
footer .colonne a:hover {
	color: #fff;
	text-decoration: none;
}



@media screen and (max-width: 700px) {
	
	.page-content header {
		margin-top: 40%;
		max-width: 100%;
	}
	.page-content .projects-section {
		margin-top: 15%;
	}
	.page-content .projects-section h1 {
		font-size: 1.5em;
	}
	.page-content .projects-section .project {
		margin-right: 0;
		margin-bottom: 20px;
		max-width: 100%;
	}
	.page-content .projects-section .project .description {
		font-size: 13px;
	}

	footer {
		justify-content:space-between;
	}
	footer .column {
		width: 80%;
	}
}


@media screen and (max-width: 400px) {
	.page-content header {
		margin-top: 60%;
		/* max-width: 100%; */
	}
	.logo-photo{
		width: 70px;
	}
	.text-profil{
		font-size: 12px;
	}

}