#info-developer {
	padding: 64px 0;
}

.section > .container,
.section
{
	display: flex;
	justify-content: center;
	align-items: center;
}

.section > .container {
	flex-direction: column;
}

#image-developer > img {
	width: 372px;
	height: 372px;

	border-radius: 100%;

	animation-name: image-animation;
	animation-duration: 2s;
	animation-iteration-count: infinite;

	position: relative;
}

@keyframes image-animation {
	0% {
		top: 0;
	}

	50% {
		top: 10px;
	}

	100% {
		top: 0;
	}
}

#name {
	font-size: 3rem;
	font-weight: bold;
	margin-top: 48px;
	margin-bottom: 32px;
}

#description {
	width: 600px;

	font-size: 1.5rem;

	text-align: center;
}

#name,
#description
{
	color: var(--onyx);
}

.padding-section {
	padding-top: 32px;
	padding-bottom: 58px;

}

#projects-developer {
	background-color: var(--onyx);

	flex-direction: column;
}

.title {
	margin-bottom: 32px;
}

.description {
	font-size: 16px;

	color: var(--platinum);

	text-align: center;

	margin: 0 24px;
}

.light-text {
	color: var(--platinum);
}

.dark-text {
	color: var(--onyx);
}

#projects {
	width: 100%;
	height: 300px;

	display: flex;
	align-items: center;
	gap: 20px;

	overflow-x: auto;

	scroll-behavior: smooth;

	padding: 0 20px;
}

.project-image {
	flex-grow: 0;
	flex-shrink: 0;

	width: 426px;
	height: 225px;

	object-fit: cover;

	transition: transform 500ms;

	background-size: cover;
	background-position: center;
}

.project-image:hover {
	transform: scale(1.2);

	z-index: 2;
}

.background-of-project-image {
	opacity: 0;
	width: 100%;
	height: 100%;

	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;

	background-color: rgba(57, 62, 65, 0.7);

	transition: opacity 500ms;
}

.title-project-image {
	color: var(--platinum);

	margin: 0 20px;

	text-align: center;
}

.stacks-project-image {
	display: flex;

	width: 100%;
}

.stacks-project-image > img {
	width: 30px;

	margin-right: 10px;
}

.stacks-project-image > img:last-of-type {
	margin-right: 0;
}

.stacks-and-buttons {
	width: 85%;

	display: flex;
	justify-content: space-between;
	align-items: center;
}

.button-link-project {
	color: var(--platinum);

	padding: 16px;

	border: 1px solid var(--platinum);

	position: relative;

	z-index: 2;
}

.button-link-project,
.button-link-project::before
{
	border-radius: 8px
}

.button-link-project::before {
	background-color: var(--glaucous);

	content: "";
	
	inset: 0 0 0 0;
	position: absolute;

	z-index: -1;

	transform-origin: left top;
	transform: scaleX(0);

	transition: transform 500ms;
}

.button-link-project:hover::before {
	transform: scaleX(1);
}

#stacks {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;

	gap: 42px;
}

.stack-image {
	width: 100px;

	transition: transform 500ms;
}

.stack-image:hover {
	transform: scale(1.2);
}

#link-email {
	color: var(--platinum);

	font-size: 24px;

	margin-top: 16px;

	text-decoration: underline;
}

@media screen and (max-width: 845px) {
	.container {
		width: 100%;
	}

	#stacks {
		margin: 0 50px;
	}
}

@media screen and (max-width: 723px) {
	.stack-image {
		width: 50px;
	}
}

@media screen and (max-width: 697px) {
	#info-developer > .container {
		padding: 0 20px;
	}

	#description {
		width: 100%;
	}
}

@media screen and (max-width: 505px) {
	.project-image {
		width: 355px;
		height: 187.5px;
	}
}

@media screen and (max-width: 453px) {
	.item > .link {
		font-size: 1rem;
	}

	#link-email {
		font-size: 16px;
	}
}

@media screen and (max-width: 387px) {
	#image-developer > img {
		width: 186px;
		height: 186px;
	}

	#name {
		font-size: 2rem;
	}

	#description {
		font-size: 1.2rem;
	}

	.project-image {
		width: 295px;
		height: 155px;
	}

	.title-project-image {
		font-size: 14px;
	}

	.description {
		font-size: 12px;
	}

	.stacks-project-image > img {
		width: 15px;
	}

	.button-link-project {
		font-size: 8px;

		padding: 8px;
	}
}

@media screen and (max-width: 337px) {
	.project-image {
		width: 245px;
		height: 129px;
	}
}