/* Fribourg le 13 Janvier 2026
Luis Inchauste Rivera */
/* Styles pour les cartes */
.skills {
	color: var(--txt-primary-color);
	padding: 1.5rem 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 4rem;
}
.skill-card {
	align-items: center;
	justify-items: center;
    display: grid;
    grid-template-columns: 30ch;
    grid-template-rows: auto 1fr;
}
.skill-card p {
	padding: 0 1rem;
	text-align: center;
}
.skill-card-title {
	padding: .3rem 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
}
.skill-card-title h2{
    margin: 0;
	align-items: center;
} 
.icon {
    width: 50px;
    aspect-ratio: 1/1;
    padding: .5rem;
}
.resume {
	margin: 1rem 0;
	width: 60ch;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* Styles pour le avatar */
.avatar {
    position: absolute;
    width: 500px;
    left: 50%;
	bottom: 0%;
    transform: translateX(-50%) translateY(80%);
    animation: bounceOut 3s ease-in-out forwards 250ms;
}
/* Animation */
@keyframes bounceOut {
	0% {
		animation-timing-function: ease-in-out;
		transform: translateY(80%) translateX(-50%);
	}
	5% {
		animation-timing-function: ease-in-out;
		transform: translateY(90%) translateX(-50%);
	}
	15% {
		animation-timing-function: ease-in-out;
		transform: translateY(10%) translateX(-50%);
	}

	52% {
		animation-timing-function: ease-in-out;
		transform: translateY(10.1%) translateX(-50%);
	}
	60% {
		animation-timing-function: ease-in;
		transform: translateY(0%) translateX(-50%);
	}
	75% {
		animation-timing-function: ease-in-out;
		transform: translateY(100%) translateX(-50%);
		opacity: 1;
	}
	99% {
		opacity: 0;
		transform: translateY(150%) translateX(-50%);
		display: none;
	}
	100% {
		pointer-events: none;
		transform: translateY(0%) translateX(0%);
		display: none !important;
		opacity: 0;
	}
}
/* Priorité de position pour le pied de page par rapport à l'animation */
footer {
	z-index: 1;
}

/* Styles pour mobile */
@media (max-width: 575.98px) {
	/* Styles pour aligner les cartes en vertical */
	.skills {
		flex-direction: column;
		gap: .5rem;
		width: 100%;
		justify-content: center;
		align-items: center;
	}
	.skill-card {
		grid-template-columns: 100%;
		grid-template-rows: 50px auto;
		width: 90%;
	}
	.skill-card p {
		padding: 0;
		text-align: justify;
	}
	.skill-card-title {
		position: relative;
	}
	.skill-card-title img{
		width: 60px;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 0;
		opacity: .5;
	}
	.skill-card-title h2{
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1;
	}
	hr {
		width: 80%;
	}
	.resume {
		width: 90%;
	}
}