@charset "UTF-8";
/* CSS Document */

*{
margin: 0;
padding: 0;
box-sizing: border-box; 
}

.titre{
position:relative;
width: 95vw; 
margin: auto;
font-family: "Lexend", sans-serif;
font-weight: 100 900;
font-size: 1.2rem; 
font-stretch: 50% 200%;
text-transform: uppercase;
color: DarkViolet;
justify-content: center;
}


.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); 
}


@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;
}
} 

.anim-text {
	animation:swapthings2 3s infinite both cubic-bezier(0.17, 0.04, 0.04, 0.99); 
}
	
@keyframes swapthings2 {
0% {
font-variation-settings: "wght" 900, "wdth" 200;
}

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

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


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

section {
	position: relative;
	height: 100vh;
	display: flex;
	background: DarkViolet;

}

section .screen{
	position: relative;
	display: flex;
	align-items: flex-end;
	flex-grow: 1;
	overflow: hidden;
	transition: 750ms;
}

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

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

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

section .screen:nth-child(4){
background: url("images/Honorable_SOHEIM.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-filter: blur(12.5px);
	-webkit-backdrop-filter: blur(12.5px); 
	transition: 750ms;
}

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

section .screen .content h1 {
font-family: "Lexend", 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: "Lexend", sans-serif;
font-weight: 300;
line-height: 1.2;
} 

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