header, footer {
	background-color: transparent;
}

main {
	flex: 1;
}

a {
	color: #ffffff;
	text-decoration: none;
}

#header {
	padding-left: 2.5em;
	padding-top: 0.1em;
	font-size: 1em;
}

#select_page_content {
	display: flex;
	font-size: 1.1em;

	align-items: center;
	justify-content: center;
	flex-direction: row;
	flex-wrap: wrap;
	padding: 7% 7% 7% 7%;
	column-gap: 2em;
	row-gap: 2em;
}

#portfolio_a:hover {
	/*padding: 7% 7% 7% 7%;*/
}

.selecter_item {
	display: flex;
	flex-direction: column;
	row-gap: 1em;
	align-items: center;
	justify-content: center;
}

.page_selector {
	transition: transform 0.5s;
}

.page_selector:hover {
	transform: scale(1.2);
}

@media only screen and (min-aspect-ratio: 865/876) {
    #keypass_a:hover ~ #portfolio_a
	{
        transform: translateX(5%);
        transition: transform 0.5s ease; /* Ajoute une transition pour la fluidité */
    }

	.hover-effect_portfolio {
	    transform: translateX(-5%); /* Décale vers la gauche */
    	transition: transform 0.5s ease; /* Ajoute une transition pour la fluidité */
	}

	.hover-effect_perso {
	    transform: translateX(-5%); /* Décale vers la gauche */
		transition: transform 0.5s ease; /* Ajoute une transition pour la fluidité */
	}
}

@media only screen and (min-aspect-ratio: 1321/876) {
    #keypass_a:hover ~ #portfolio_a,
	{
        transform: translateX(5%);
        transition: transform 0.5s ease; /* Ajoute une transition pour la fluidité */
    }

	#portfolio_a:hover ~ #keypass_a,
	#portfolio_a:hover ~ #perso_a
	{
		transform: translateX(5%);
		transition: transform 0.5s ease; /* Ajoute une transition pour la fluidité */
	}
}

.selecter_item span {
	background-color: #8cefe9;
	color: #0b1321;
	border-radius: 12px;
	align-items: center;
	padding: 0.5em 1em 0.5em 1em;
}

img {
	width: 40vh;
	height: auto;
	border-radius: 4px;
}