body {
	background: rgb(0, 0, 0);/*linear-gradient(-45deg, #b3a7a3, #b73ce7, #23a6d5, #23d5ab);*/
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	height: 100vh;
	color: #fefffe;
}
.title{
	position: fixed;
	top: 0;
	left: 0;
	font-family:"forte";
}

.container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;

}
.language{
	width: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.language svg{
width: 4vw;
min-width: 20px;
-webkit-box-reflect: below -10px linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}


.container .pc{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}




.container .pc svg{
	width: 30vw;
    min-width: 200px;
	-webkit-box-reflect: below -60px linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
}




.portfolio-container {
	text-align: center;
	margin-top: 100px;
  }

  .portfolio-text {
	font-family: 'Arial', sans-serif;
	font-size: 3em;
	font-weight: bold;
	color: #fefffe;
	display: inline-block;
	opacity: 0;
	animation: fadeIn 2s forwards, bounce 1s ease-in-out infinite;
  }

  .portfolio-text span {
	display: inline-block;
	opacity: 0;
	transform: translateY(20px);
	animation: slideIn 1s ease-in-out forwards  ;
	
  }

.name,.language,.page{
	visibility: hidden;
	
	
}
.active{
	visibility: visible;
}
.inactive{

visibility: hidden;
}
.active_button{
	fill: rgb(44, 241, 5);
}

.about {
position: fixed;
top: 80%;
right: 2%;
background-color:rgba(227, 231, 3, 0.952);
backdrop-filter: blur(20px);
padding: 0.8em;
border-radius: 10px;
-webkit-box-reflect: below 0px linear-gradient(to top, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0));
box-shadow: -0.3em -0.3em 0px 0px rgb(253, 21, 21),
-0.5em -0.5em 0px 0px rgba(9, 204, 204, 0.507);
}
.about a{
color: rgb(9, 8, 15);
font-size: 2vw;
font-family: 'Calibri';
font-weight: bold;
}












































  .portfolio-text span:nth-child(1) {
	animation-delay: 0s;
  }
  .portfolio-text span:nth-child(2) {
	animation-delay: 0.1s;
  }
  .portfolio-text span:nth-child(3) {
	animation-delay: 0.2s;
  }
  .portfolio-text span:nth-child(4) {
	animation-delay: 0.3s;
  }
  .portfolio-text span:nth-child(5) {
	animation-delay: 0.4s;
  }
  .portfolio-text span:nth-child(6) {
	animation-delay: 0.5s;
  }
  .portfolio-text span:nth-child(7) {
	animation-delay: 0.6s;
  }
  .portfolio-text span:nth-child(8) {
	animation-delay: 0.7s;
  }
  .portfolio-text span:nth-child(9) {
	animation-delay: 0.8s;
  }

  @keyframes fadeIn {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
  }

  @keyframes bounce {
	0%, 100% {
	  transform: translateY(0); /* Position initiale */
	}
	25% {
	  transform: translateY(-10px); /* Légèrement plus haut */
	}
	50% {
	  transform: translateY(5px); /* Légèrement plus bas */
	}
	75% {
	  transform: translateY(-5px); /* Légèrement plus haut */
	}
  }

  @keyframes slideIn {
	0% {
	  opacity: 0;
	  transform: translateY(100px);
	}
	100% {
	  opacity: 1;
	  transform: translateY(0);
	}
  }
  
 
  @keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}