#skills_section
{
	background-color: var(--white);
}

.skills_end
{
	background-color: var(--white);
}

#skills_section .section_title
{
	color: var(--black_title);
}

#skills_section .skills_content
{
	display: flex;
	width: 50%;
}

#skills_section .box
{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	filter: drop-shadow(0px 0px 10px rgba(28, 28, 51, 0.15));
	height:50vh;
}

#skills_section .box .menu
{
	height: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
}

#skills_section .box .menu .selector
{
	z-index: 2;
	width: 320px;
	transition: 0.2s;
	position: absolute;
	margin-right: -40px;
	border-radius: 20px 0 0 20px;
	background-color: white;
}


#skills_section .box .menu .category
{
	width: 280px;
	z-index: 3;
	border-radius: 20px;
	white-space: nowrap;
	padding: 0px 40px 30px 0px;
	margin-right: -40px;
	font-size: 16px;
	color: dodgerblue;
	text-align: center;
	cursor: pointer;
	font-weight:bold;

}

/* Style de base pour votre contenu avec barre de défilement */
#skills_section .box .box_content {
    width: 100%;
    border-radius: 20px;
    background-color: white;
    padding: 50px 60px;
    box-shadow: black 5px 5px 5px;
    height: 50vh;
    overflow-y: scroll;
    overflow-x: hidden;
}

/* Personnalisation pour les navigateurs basés sur Chromium */
#skills_section .box .box_content::-webkit-scrollbar {
    width: 12px;
}

#skills_section .box .box_content::-webkit-scrollbar-track {
    background: white;
}

#skills_section .box .box_content::-webkit-scrollbar-thumb {
    background-color: #5989c8; 
    border-radius: 6px;
}

/* Firefox utilise scrollbar-color */
#skills_section .box .box_content {
    scrollbar-color: #5989c8 white;
}


@-webkit-keyframes enter_anim { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }

@keyframes enter_anim { from { transform: translateY(25px); opacity: 0; } to { transform: translateY(0px); opacity: 1; } }

#skills_section .box .box_content .skills_list
{
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, 100px);
	justify-content: space-between;
	flex-wrap: wrap;
	grid-gap: 50px;
	opacity: 0;
	transform: translateY(25px);
	-webkit-animation: enter_anim 0.5s ease 1 forwards;
	animation: enter_anim 0.5s ease 1 forwards;
}

#skills_section .box .box_content .skills_list .skill
{
	height: 125px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	width: 100px;
	text-decoration: none;
}

  
#skills_section .box .box_content .skills_list .skill img
{
	width: 95px;
	height: 95px;
	transform: scale(0.88);
	transition: transform 0.3s ease-in-out;
}

#skills_section .box .box_content .skills_list .skill:hover img
{
	transform: scale(1);
}

#skills_section .box .box_content .skills_list .skill span
{
	font-size: 16px;
	color: var(--black_text);
	text-align: center;
}

#skills_section .box .category_title
{
	white-space: nowrap;
	margin: 0px 0px -50px 0px;

	font-size: 22px;
	color: var(--blue);
	margin-bottom: -40px;
}

@media screen and (max-width: 930px)
{

	#id_social_linkedin{
		--size :95px !important;
	}
	#id_social_github{
		--size :80px !important;
	}
	#id_social_mail{
		--size :115px !important;
	}
	#id_social_cv{
		--size :90px !important;
	}
	#contact_section .social_link img{
		width:30px !important;
	}
	#contact_section .social_link{
		padding: 1px 0px 5px 14px !important;
	}

	#skills_section .box
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 70px;
		min-height: 0px;
	}

	#skills_section .box .box_content
	{
		min-height: 0px;
		width: calc(100% - 100px);
		padding: 50px 50px 50px 50px;
		min-width: 230px;
	}

	#skills_section .box .box_content .skills_list
	{
		grid-gap: 25px;
	}

	@media screen and (max-width: 565px)
	{
		#skills_section .box .box_content .skills_list
		{
			justify-content: space-around;
		}
	}

	@media screen and (max-width: 500px)
	{
		#skills_section .box .box_content .skills_list
		{
			justify-content: space-between;
		}

		#skills_section .box .box_content
		{
			width: calc(100% - 50px);
			padding: 40px 25px 40px 25px;
		}
	}

	@media screen and (max-width: 465px)
	{
		#skills_section .box .box_content .skills_list
		{
			justify-content: space-around;
		}
	}
}