@charset "utf-8";
/* CSS Document */
*{
	margin:0;
	padding:0; /* Supprime le blanc de marge*/
	box-sizing: border-box; /*pour contenir les éléments dans la boite*/
	
}

.titre{
position: relative;
width: 95vw; 
margin: auto;
font-family: "Source Code Pro", sans-serif;
font-weight: 200 900;
font-size: 2rem; 
font-stretch: 50% 200%;
text-transform: uppercase;
color: #4c0b96;
font-style : italic;
}

.variable{
display: flex;
font-variation-settings: "wght"275, "wdth" 50; 
text-align: center;
animation: swapthings 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99); 
}

.anim-text{
animation: swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99);
}

@keyframes swapthings {
0% {
font-variation-settings: "wght" 275, "wdth" 50;
}

50% {
font-variation-settings: "wght"900, "wdth"200;
}

100% {
font-variation-settings: "wght"275, "wdth"50;
}
}

@keyframes swapthings2 {
0% {
font-variation-settings: "wght"900, "wdth"200;
}

50% {
font-variation-settings: "wght"275, "wdth"50;
}

100% {
font-variation-settings: "wght"900, "wdth"200;
}
}

.static{
font-size: 2rem;
font-weight: 100;
font-style: italic;
}

section{
	position: relative;
	height: 100vh;
	display: flex;
	background: #4b0d73;
}

section .screen {
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-grow: 1; 
	overflow: hidden; /*la propriété overflow contrôle l’affichage des éléments dans le conteneur, avec la valeur hidden les objets ne peuvent pas déborder de leur conteneur*/
	transition: 750ms; /*temps de transition*/
}
	
section .screen:nth-child(1){
	background: url("images/Honorable_Kienou.png") center;
	background-size: cover; /*l’image remplit l’intégralité de son conteneur tout en conservant sa taille*/
}

section .screen:nth-child(2){
	background: url("images/Sculptural_Kienou.png") center;
	background-size: cover;
}

section .screen:nth-child(3){
	background: url("images/Ironique_Kienou.png")center;
	background-size: cover;
}

section .screen:nth-child(4){
	background: url("images/Subversif_Kienou.png") center;
	background-size: cover;
}

section:hover .screen {
	opacity: 0.25;
	filter: saturate(50%);
}

section .screen .content {
	position: absolute;
	width: 50ch;
	height: auto;
	background: rgba(255, 255, 255, 0.75);
	padding : 25px;
	margin-bottom: 5ch;
	transform: translateX(100%);
	backdrop: blur(12.5px);
	-webkit-backdrop-filter: blur(12.5px);
	transition: 750ms;
}

section .screen:hover .content{
	transform: translateX(0);
	transition-delay: 250ms;
}

section .screen:hover {
	flex-grow: 3;
	opacity: 1;
	filter: saturate(100%);
}
/*régler l’affichage des polices*/
section .screen .content h1 {
font-family: "Source Code Pro", sans-serif;
font-weight: 900;
text-transform: uppercase;
font-size: 1.2rem;
color: DarkViolet;
margin-bottom: 12.5px;
line-height: 1;
}

section .screen .content p {
font-family: "Cabin", sans-serif;
font-weight: 300;
line-height: 1.2; 
}

section .screen:hover {
flex-grow: 3;
opacity: 1;
filter: saturate(100%);
}