@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  border:  none;
}

html{
	scroll-behavior: smooth;
}
body {
  font-family: 'Montserrat', sans-serif;
  overflow-x: hidden;
}


/* MAIN */
.main section[id]{
	scroll-margin-top: 80px;
}

.wrapper{
	width: 100vw;
	height: 100%;
	background-color: #191c32;
	color: white;
	padding: 20px;
}

.main{
	padding-top: 4rem;
	margin: 0 auto;
	width: 80vw;
	height: 80vh;
	display: grid;
	grid-template-columns: repeat(2,1fr);
	align-items: center;
	height: auto;
}

.main button{
	color: #191c32;
	font-size: 17px;
	font-weight: bold;
	border-radius: 1rem;
}
.main h1{
	font-size: 3em;
}

.main span{
	color: #E5F033;
}

.download-cv{
	padding: 10px 20px;
	background-color: #E5F033;
	border: none;
	border-radius: 2px;
	margin-top: 15px;
	cursor: pointer;
	box-shadow: 1px 3px 9px 10px rgba(70, 194, 226, 0.8);
}

.download-cv:hover{
	background-color: #191c32;
	opacity: 90%;
	color:	white;
	opacity: 80%;
	transition: ease-in .5s;
}

.main .image img{
	padding-left: 20%;
	width: 100%;
	height: auto;
}

.main .info-content p{
	color: white;
	font-size: 20px;

}
.main .info-content{
	color: white;
	font-size: 20px;

}


/* ABOUT */

.about section[id]{
	scroll-margin-top:80px;
}
.about{
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	width: 100vw;
	align-items: center;
	background-color: #A8A3BA;
	height: auto;
}

.about .image img{
	width: 100%;
	grid-column: 1/5;
}

.about-info{
	float: right;
	padding: 3em;
}

.about-info h1{
	font-size: 3em;
	color: #191c32;
	font-weight: bold;
}

.divider{
	height: 4px;
	width: 150px;
	background-color: yellow;
	margin-top: 10px;
	margin-bottom: 2.5em;
	
}

.about p{
	color: #191c32;
	font-size: 20px;
	margin: 1em;
	font-weight: bold;
}

/* PORTAFOLIO */
.portafolio section[id]{
	scroll-margin-top:78px;
}

.portafolio{
	
	width: 100vw;
	height: auto;
	background-color: #A8A3BA;
	color: white;
	font-size: 20px;
	font-weight: bold;
	
	/*
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	width: 100%;
	background-color: green;*/
	
}

.portafolio h1{
	font-size: 3em;
}

.portafolio .titulo{
	width: 100vw;
	height: 100px;
	background-color: #191c32;
	text-align: center;
	align-content: center;
	padding-top: 30px;
	color: white;
	font-size: 10px;


}

.portafolio .container{
	width: 100%;
	height:	auto;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.portafolio .container .card{
	width: 220px;
	height: auto;	
	border-radius: 1rem;
	margin: 1.5rem;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.06);
	backdrop-filter:  blur(1rem);
	border: .1rem solid rgba(255, 255, 255, 0.18);
	color: white;
}

.portafolio img{
	width: 100%;
	height: auto;
	align: center;
}

.portafolio .card:hover{
	transform: translateY(-15px);
	box-shadow: 0 12px 16px rgba(0,0,0,0.2);

}
.portafolio .top-row{
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.portafolio .background-top-row{
	background-color: #191c32;
	backdrop-filter:  blur(.4rem);
	width: 100%;
}

.portafolio .card h4{
	letter-spacing: .1rem;
	margin: 1rem 0;
	text-align: center;
}

.portafolio .top-row i{
	font-size: 3rem;
}

.portafolio .content{
	padding: 2rem;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	color: white;
}


/*
.portafolio h1{
	font-size: 3em;
}

.portafolio .titulo_portafolio{
	width: 100vw;
	height: 100px;
	background-color: blueviolet;
	text-align: center;
	padding-top: 30px;
	color: white;
	font-size: 10px;
}

.portafolio .container{
	width: 100%;
	height: 500px;
	background-color: white;
	text-align: center;
	align-content: center;
	padding-top: 30px;
	color: white;
	font-size: 10px;
	align-items: center;
	align-content: center;
	background-color: black;
}

.portafolio .card{
	width: 33%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 2px rgba(0,0,0,0.2);
	overflow: hidden;
	margin: 20px;
	text-align: center;
	transition: all 0.25s;
	float: left;
}
.portafolio .card:hover{
	transform: translateY(-15px);
	box-shadow: 0 12px 16px rgba(0,0,0,0.2);

}
.portafolio .card img{
	width: 100%;
	height: 100%;

}

.portafolio img{
	width: 100%;
	padding: 10%;
	grid-column: 1/5;
	padding-left: 45px;
}

.portafolio-info{
	grid-column: 5/10;
	padding: 3em;
}

.portafolio-info h2{
	font-size: 0px 2em;
	color: #191c32;
}

.portafolio p{
	color: #191c32;
	font-size: 20px;
	margin: 1em;

}
*/

/* FOOTER */

.footer section[id]{
	scroll-margin-top:100px;
}

.footer {
	width: 100vw;
	height: auto;
	background-color: #A8A3BA;
	color: white;
	font-size: 20px;
	font-weight: bold;
}
.footer h1{
	font-size: 3em;
}

.footer .titulo{
	width: 100vw;
	height: 100px;
	background-color: #191c32;
	text-align: center;
	align-content: center;
	padding-top: 30px;
	color: white;
	font-size: 10px;


}

.footer .container{
	width: 100%;
	height:	auto;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.footer .container .card{
	width: 220px;
	height: auto;	
	border-radius: 1rem;
	margin: 1.5rem;
	overflow: hidden;
	background-color: rgba(255, 255, 255, 0.06);
	backdrop-filter:  blur(1rem);
	border: .1rem solid rgba(255, 255, 255, 0.18);
	color: white;
}


.footer .card:hover{
	transform: translateY(-15px);
	box-shadow: 0 12px 16px rgba(0,0,0,0.2);

}
.footer .top-row{
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
}
.footer .background-top-row{
	background-color: #191c32;
	backdrop-filter:  blur(.4rem);
	width: 100%;
}

.footer .card h4{
	letter-spacing: .1rem;
	margin: 1rem 0;
}

.footer .top-row i{
	font-size: 3rem;
}

.footer .content{
	padding: 1rem;
	width: 100%;
	height: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	color: white;
}


.footer .button{
	border-radius: 1rem;
	color: white;
	font-size: 15px;
	padding: 15px;
	letter-spacing: .1rem;
	text-align: center;
	border: .1rem solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
	text-align: center;
	width: 100%;
	height: 50px;
}
.footer .button:hover{
	border-radius: 1rem;
	color: #191c32;
	font-size: 15px;
	padding: 15px;
	letter-spacing: .1rem;
	text-align: center;
	border: .1rem solid rgba(255, 255, 255, 0.18);
	cursor: pointer;
	text-align: center;
	width: 100%;
	height: 50px;
	background-color: #E5F033;
	font-weight: bold;
	transition: ease-in .5s;
}



.footer .copyright{
	width: 100vw;
	height: auto;
	background-color: black;
	float: left;
	text-align: center;
	padding: 15px;
}



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


.footer{
	background-color: #A8A3BA;
}

}