#head{
	width: 100%;
	height: 25vh;
	background: linear-gradient(to bottom, transparent, 90%, #212529), url("../assets/img/head.avif") 100% 40%;
	background-size: cover;
}

#main{
	width: 70%;
	margin: auto;
	display: grid;
  grid-row-gap: 1em;
}

#content{
	display: grid;
	grid-template-rows: repeat(3, auto);
	grid-template-columns: 3fr 1fr;
	grid-column-gap: 1em;
}

#info{
	grid-row: 1/3;
	grid-column: 1/2;
}

#profile{
	grid-row: 1/2;
	grid-column: 2/3;
}

#profile a{
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1em;
	width: 100%;
}

#profile i{
	font-size: 1.5em;
	margin-right: 1em;
}

#skills{
	display: grid;
	grid-template-columns: repeat(3, auto);
	grid-template-rows: repeat(3, auto);
	gap: 1em;
	padding: 1em;
}

#skills>div{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
	height: 9em;
}

#skills i{
	text-align: center;
	font-size: 3em;
}

#skills h4{
	margin: 0px;
}

#webs-card, #apps-card{
	width: 100%;
}

#proyectos #contenido{
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(1, auto);
	gap: 2em;
}

#proyectos a{
	text-decoration: none;
	transition: 0.5s;
}

#proyectos a:hover{
	transform: scale(1.02);
}

#proyectos a>.card-img-top{
	height: 100px;
	display: flex;
	justify-content: center;
	align-items: center;
}

.game .card .card-body{
	display: flex;
	justify-content: flex-end;
	background: url("../assets/img/smashing.png") 100% 40%;
	background-size: cover;
	border-radius: var(--bs-border-radius);
}

footer{
	margin-top: 2em;
	margin-bottom: 2em;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}