body {
		font-family: 'Noto Sans JP', sans-serif;
		padding: 0;
		margin: 0;
		background-color:rgb(252, 244, 238) ;
	}

	nav {
		background-color:rgb(252, 244, 238) ;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-items: center;
		position: sticky;
		top: 0;
		z-index: 1000;
	}

	nav .profile {
		display: flex;
		align-items: center;
		padding-left: 2%;
	}

	nav .profile img {
		margin-top: 10px;
		border-radius: 50%;
	}

	nav .profile h1 {
		margin-left: 10px;
		font-size: 15px;
	}

	nav #nav-links{
		padding-right: 80px;
	}

	nav ul {
		display: flex;
		list-style-type: none;
		padding-right: 80px;
	}

	nav ul li {
		margin-left: 20px;
		cursor: pointer;
		border-bottom: 1px solid rgb(252, 244, 238);
	}

	nav ul li a{
		color: #000000;
		text-decoration:none;
	}

	nav a:hover {
		color:#553601;
	}

	nav ul li:hover {
		border-bottom-color: #553601;
	}

	.burger {
		display: none;
		font-size: 28px;
		background: none;
		border: none;
		cursor: pointer;
	}

	.page-content {
		margin: 4%;
	}

	.page-content #moi {
		margin-top: 3%;
		max-width: 80%;
	}

	.page-content #moi h1 {
		margin: 0;
		text-transform: uppercase;
		font-family: 'Oswald', sans-serif;
		position: relative;
		font-size: 3vw;
		animation: apparition_gauche 2s forwards;
		z-index: 1;
	}

	@keyframes apparition_gauche {
		from {
		opacity: 0;
		transform: translateX(-30px);
		}
		to {
		opacity: 1;
		transform: translateX(0);
		}
	}

	.page-content .project {
		margin: 0px;
	}

	.page-content #moi button {
		background-color: inherit;
		border: none;
		outline: none;
		padding: 0;
		font-size: 15px;
		font-weight: bold;
		padding-bottom: 5px;
		border-bottom: 1px solid rgb(252, 244, 238);
		cursor: pointer;
	}

	.page-content #moi button:hover {
		color: #553601;
		border-bottom-color:#553601;
	}

	.page-content #moi p {
		line-height: 30px;
		color: #000000;
	}

/*________________________________________________________________________*/

	.page-content .presentation-image {
		margin-top: 40px;
	}

	.page-content .presentation-image img {
		width: 100%;
		height: 800px;
		object-fit: contain;
	}

/*________________________________________________________________________*/

	.page-content .hobbies-section {
		min-height: 300px;
	}

	.page-content .hobbies-section h2 {
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		font-size: 3vw;
		margin-top:40px;
		margin-bottom: 30px;
	}

	.page-content .hobbies-section .projects {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		margin: 0px;
		padding: 0px;
	}

	.page-content .hobbies-section .projects img {
		width: 300px;
		height: 200px;
		padding-top: 30px;
	}

	.page-content .hobbies-section .project h3 {
		margin: 0;
		font-size: 20px;
	}

	.page-content .hobbies-section .project .description {
		font-size: 13px;
	}

/*________________________________________________________________________*/

	.page-content .portfolio-section {
		margin-top: 40px;
	}

	.page-content .portfolio-section h2 {
		font-family: 'Oswald', sans-serif;
		text-transform: uppercase;
		font-size: 3vw;
		margin-top: 0px;
	}

	.page-content .portfolio-section .projects { 
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.page-content .portfolio-section .project h3 {
		margin: 0;
	}

	.page-content .portfolio-section .project .description {
		font-size: 13px;
	}

	.page-content .portfolio-section .project .dates {
		font-size: 13px;
	}

/*_______________________________________________________________________*/

	.modal-image {
		width: 100%;
	}

	.modal-trigger {
		cursor: pointer;
		transition: 0.3s;
		max-width: 300px;
		width: 100%;
		margin: 5px;
	}

	.modal-trigger:hover {
		opacity: 0.7;
	}

	.modal {
		display: none;
		position: fixed;
		z-index: 1;
		padding-top: 100px;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		overflow: auto;
		background-color: rgba(0,0,0,0.9);
	}

	.modal-image {
		margin: auto;
		display: block;
		width: 80%;
		max-width: 700px;
		animation: zoom 0.6s;
	}

	@keyframes zoom {
		from {transform: scale(0)}
		to {transform: scale(1)}
	}

	.modal-close {
		position: absolute;
		top: 15px;
		right: 35px;
		color: #ff0000;
		font-size: 40px;
		font-weight: bold;
		cursor: pointer;
	}

	.modal-close:hover {
		color: #ff7b7b;
	}

/*_______________________________________________________________________*/

	footer {
		margin-top: 5%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		padding: 10px;
		background-color: #171717;
		color: white;
	}

	footer img{
		margin-right:20px;
		height:30px;
	}

	footer a{
		text-decoration:none;
	}

	footer .colonne p{
		font-size: 12px;
		color: #ccc;
	}

	footer #centre {
		width: 100%;              
		text-align: center;       
		margin-top: 20px;         
	}

	footer #centre p {
		font-size: 12px;          
		color: #ccc;
		margin: 0 auto;           
		line-height: 1.5;
	}

	footer #centre a {          
		color : #ba0000;		
	}

/*_____________________________________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________________________________*/

	@media screen and (max-width: 1400px) {
		
		.page-content .portfolio-section .projects {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 40px;
			max-width: 100%;
		}

		.page-content .presentation-image img {
			width: 100%;
			height: 800px;
			object-fit: contain;
		}

		.page-content .hobbies-section h2{
			margin-top: 15px;
		}
	}


/*_____________________________________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________________________________*/
	@media screen and (max-width: 1000px) {

	.page-content .presentation-image img {
		width: 100%;
		height: 500px;
		object-fit: contain;
	}
}

/*_____________________________________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________________________________*/

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

	nav .profile h1 {
		font-size: 14px;
	}
	
	nav ul {
		flex-direction: column;
		align-items: flex-end;
		width: 100%;
		padding: 0;
		margin-top: 10px;
	}	

	.burger {
		display: block;
		color: #000;
		position: relative;
		z-index: 1001;
	}
		
	#nav-links {
		display: none;
		flex-direction: column;
		width: 100%;
		padding: 10px 20px;
	}
	
	#nav-links.show {
		display: flex;
		padding-left: 0;
		padding-right: 15px;
	}
	
	nav ul li {
		margin: 10px 0;
	}
  
	.page-content {
		margin: 5%;
	}
	  
	.page-content #moi {
		max-width: 100%;
	}

	.page-content .presentation-image img {
		width: 100%;
		height: 400px;
		object-fit: contain;
	}

	.page-content .hobbies-section h2{
		margin-top: 15px;
	}

	.page-content .hobbies-section .projects img {
		padding-top: 15px;
	}
  
	.page-content #moi h1,
	.page-content .hobbies-section h2,
	.page-content .portfolio-section h2 {
		font-size: 6vw;
	}
  
	.page-content .hobbies-section .projects,
	.page-content .portfolio-section .projects {
		gap: 20px;
	}
  
	.page-content .portfolio-section .project,
	.page-content .hobbies-section .project {
		max-width: 100%;
	}
  
	footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
  
	footer .colonne {
		margin-bottom: 20px;
	}
}

/*_____________________________________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________________________________*/

@media screen and (max-width: 660px) {
	nav .profile img {
		border-radius: 50%;
		height: 60px;
		width: 60px;
	}

	/*.page-content .presentation-image {
		width: 100%;
		height: 200px;
		max-width: 715px;
		aspect-ratio: 715 / 401;
	}*/

	.page-content .presentation-image img {
		width: 100%;
		height: 300px;
		object-fit: contain;
	}
	
	.page-content .hobbies-section .projects{
		display: block;
	}

	.page-content .portfolio-section .projects {
		display: block;
	}
}

/*_____________________________________________________________________________________________________________________________________________________*/
/*_____________________________________________________________________________________________________________________________________________________*/

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

	nav .profile img {
		height: 30px;
		width: 30px;
		margin-right: 10px;
	}
  
	nav .profile h1 {
		font-size: 13px;
		margin: 5px 0 0 0;
	}
  
	nav ul {
		font-size: 12px;
	}

	.burger {
		transform: scale(0.8);
	}
   
	.page-content {
		margin: 6% 4%;
	}

	.page-content #moi p {
		line-height: 20px;
		margin: 10px;
	}

	.page-content #moi h1,
	.page-content .hobbies-section h2,
	.page-content .portfolio-section h2 {
		font-size: 3vw;
	}
  
	.page-content #moi button {
		font-size: 14px;
	}

	footer {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}
  
	footer .colonne {
		margin-bottom: 15px;
	}
  
	footer img {
		height: 25px;
		margin: 0 10px;
	}
  
	footer .colonne p {
		font-size: 11px;
	}
  }