@import url('https://fonts.googleapis.com/css2?family=Dosis&family=Karla&family=Lobster&family=MonteCarlo&family=STIX+Two+Text&display=swap');
* {
	
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.container {
	width: 100%;
	height: 100vh;
	background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0.6)), url(images/inicio.jpg) center no-repeat;
	background-size: cover;
	/* background-attachment: fixed; */
}

.heading {
	color: #fff;
	font-family: 'MonteCarlo', cursive;
	font-size: 70px;
	position: absolute;
	top: 8%;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
	/* text-transform: uppercase; */
	letter-spacing: 5px;
	white-space: pre-wrap;
}

.heading::after {
	content: '';
	width: 5px;
	height: 80px;
	background-color: #fff;
	position: absolute;
	animation: blinking 1s 3s;
}

@keyframes blinking {
	0% {background-color: #fff}
	50% {background-color: transparent}
	0% {background-color: #fff}
}

.cards-wrapper {
	width: 80%;
	display: flex;
	justify-content: space-evenly;
	position: relative;
	top: 35%;
	left: 50%;
	transform: translateX(-50%);;
}

.card {
	width: 280px;
	/* background-color: #fff; */
	background-image: radial-gradient(circle at 50% 2.76%, #e8ffff 0, #d7ffff 10%, #c3ffff 20%, #adffff 30%, #94fafd 40%, #77f0fb 50%, #54e6fa 60%, #20dcfa 70%, #00d3fa 80%, #00cafc 90%, #00c1fe 100%);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	transition: transform .5s;
}

@keyframes cardAnim {
	0% {opacity: 0}
	100% {opacity: 1}
}

.card:nth-child(1) {
	/* animation: cardAnim 2s 3s backwards; */
}

.card:nth-child(2) {
	/* animation: cardAnim 2s 3.5s backwards; */
}

.card:nth-child(3) {
	/* animation: cardAnim 2s 4s backwards; */
}
.card:hover {
	transform: scale(1.1);
}

.image-top {
	position: relative;
	width: 100%;
	height: 220px;
	object-fit: cover;
	-webkit-clip-path: polygon(30% 0%, 70% 0%, 100% 0, 100% 86%, 70% 46%, 30% 46%, 0 88%, 0 0);
}

.profile-image {
	/* position: absolute; */
	object-fit: cover;
	width: 120px;
	height: 120px;
	/* top: 1rem; */
	border: 8px solid #adffff;
	border-radius: 10px;
	margin-bottom: 50px;
	margin-top: -140px;
	z-index: 10;
}

.card h1 {
	font-family: 'STIX Two Text', serif;
	font-size: 22px;
	color: rgb(95, 29, 34);
}

.job {
	font-family: 'Dosis', sans-serif;
	font-weight: 600;
	color: #777;
}

.about-me {
	font-family: 'Karla', sans-serif;
	font-weight: 500;
	text-align: center;
	margin: 15px 0;
	width: 90%;
	font-style: italic;
	color: rgb(77, 47, 47)
}

.card button {
	width: 120px;
	padding: 7px;
	margin: 10px 0;
	background-color: rgb(100, 63, 4);
	border: none;
	outline: none;
	color: #fff;
	font-size: 1rem;
	border-radius: 20px;
	font-family: 'Lobster', cursive;
	box-shadow: 5px 5px 20px rgba(0, 0, 0, .4);
}

.card:hover button {
	animation: buttonRotation 2s 1s linear;
}

@keyframes buttonRotation{
	0% {transform: scale(1) rotateZ(0)}
	5% {transform: scale(1.2) rotateZ(5deg)}
	10% {transform: scale(1.2) rotateZ(-5deg)}
	15% {transform: scale(1.2) rotateZ(5deg)}
	20% {transform: scale(1.2) rotateZ(-5deg)}
	25% {transform: scale(1.2) rotateZ(5deg)}
	30% {transform: scale(1.2) rotateZ(-5deg)}
	35% {transform: scale(1.2) rotateZ(5deg)}
	40% {transform: scale(1.2) rotateZ(-5deg)}
	45% {transform: scale(1.2) rotateZ(5deg)}
	50% {transform: scale(1.2) rotateZ(-5deg)}
	55% {transform: scale(1.2) rotateZ(5deg)}
	60% {transform: scale(1.2) rotateZ(-5deg)}
	65% {transform: scale(1.2) rotateZ(5deg)}
	70% {transform: scale(1.2) rotateZ(-5deg)}
	75% {transform: scale(1.2) rotateZ(5deg)}
	80% {transform: scale(1.2) rotateZ(-5deg)}
	85% {transform: scale(1.2) rotateZ(5deg)}
	90% {transform: scale(1.2) rotateZ(-5deg)}
	95% {transform: scale(1.2) rotateZ(5deg)}
	100% {transform: scale(1) rotateZ(0)}
}

.social-icons {
	width: 150px;
	list-style: none;
	display: flex;
	justify-content: space-evenly;
	margin: 10px 0 20px 0;
	border-top: 1px solid #999;
	padding-top: 20px;
}

.social-icons i {
	font-size: 18px;
}

.fa-facebook-f {
	color: #3b5999;
}

.fa-youtube {
	color: #cd201f;
}

.fa-twitter {
	color: #55acee;
}

.fa-google-plus-g {
	color: #dd4b39;
}

@media(max-width: 1300px) {
	.heading {
		font-size: 60px;
		width: 90%
	}

	.cards-wrapper {
		width: 100%;
		top: 32%	;
	}

	.image-top {
		height: 200px;
	}
}

@media(max-width: 1000px) {
	.container {
		height: 100%;
	}

	.heading {
		position: relative;
		width: 90%
	}

	.cards-wrapper {
		flex-wrap: wrap;
		padding: 30px 0 200px 0;
	}
	
	.card {
		margin: 0 30px 50px 30px;
	}
}

@media(max-width: 700px) {
	.heading {
		position: relative;
		font-size: 40px;
	}

	.heading::after {
		height: 40px;
	}
}

@media(max-width: 450px) {
	.heading {
		position: relative;
		font-size: 37px;
	}

	.heading::after {
		height: 33px;
	}

	.cards-wrapper {
		padding: 10px 0 150px 0;
	}
}