body {
	background-color: rgb(234, 255, 244);
}

.circle {
	height: 140px;
	width: 140px;
	background: url('imgs/img-profile.jpeg') no-repeat center;
	background-size: cover;
	border-radius: 50%;
	position: relative;
	text-align: center;
	padding: 10px;
	box-sizing: border-box;
	margin: auto;
}

.circle::before {
	border-radius: 50%;
	content: '';
	background-image: linear-gradient(to bottom, #ff89af 0%, #feb266 100%);
	top: -3px;
	left: -3px;
	bottom: -3px;
	right: -3px;
	position: absolute;
	z-index: -1;
}

#name {
	font-size: 24px;
	font-weight: bolder;
	margin-bottom: 0;
}

#at-inf {
	color: #000;
}

#mk-f {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: -5px;
	text-shadow: #45bba9 1px 0 10px;
}

.banner {
	border-radius: 18px;
	margin-top: 20px;
}

.border-profile {
	border: 2px;
}

.container-cards {
	max-width: 766px;
}

#slider-div {
	min-height: 70vh;
	display: grid;
	place-items: center;
}

.slider {
	margin: 0;
	padding: 0;
	height: 400px;
	margin: auto;
	position: relative;
	width: 90%;
	display: grid;
	place-items: center;
	overflow: hidden;
}

.slider-track {
	display: flex;
	width: calc(300px * 26);
	animation: scroll 40s linear infinite;
}

@keyframes scroll {
	0% {
		transform: translate(0);
	}

	100% {
		transform: translateX(calc(-300px * 13));
	}
}

.slide {
	height: 300px;
	width: 250px;
	display: flex;
	align-items: center;
	padding: 15px;
	perspective: 100px;
}

.slider-img {
	width: 100%;
	transition: transform 1s;
}

.slider-img:hover {
	transform: translateZ(20px);
}

.slider::before,
.slider::after {
	background: linear-gradient(to right, rgba(234, 255, 244, 1) 0%, rgba(234, 255, 244, 0)100%);
	content: '';
	height: 400px;
	position: absolute;
	width: 15%;
	z-index: 2;
}

.slider::before {
	left: 0;
	top: 0;
}

.slider::after {
	right: -1px;
	top: 0;
	transform: rotateZ(180deg);
}


/* // X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
	body {
		background-color: #EAFFF4;
	}

	.banner {
		border-radius: 10px;
		margin: 8px 0 0 0;
	}

	#name {
		font-size: 20px;
		font-weight: bolder;
		margin-bottom: 0;
	}

	#mk-f {
		font-size: 0.9rem;
		margin-bottom: 5px;
	}

	#at-inf {
		font-size: 0.8rem;
	}

	footer {
		font-size: 0.8rem;
	}
}

/* // Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {}

/* // Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {}

/* // Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {}

/* // X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) {}