/* ------------------------------ PRIMORDIAIS ------------------------------ */

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

html,body{
	height: 100%;
	font-family: "Raleway", serif;
	scroll-behavior: smooth;
}


:root{
	--background-color: #0d0c0c;
	--primary-color: rgba(255, 255, 255,0.5);
	--second-color: #7B4AE2;
}

body{
	background-color: var(--background-color);
	display: flex;
	justify-content: center;
	align-items: center;
	flex-flow: row wrap;
	color: white;

}

.padding{
	width: 100%;
	padding: 2%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.project-button{
	width: 80px!important;

}


/* ---------- mensagem por sessao ---------- */

.mensagenm{
	color: var(--second-color);
	background-color: rgba(123, 74, 226, 0.15);
	width: 130px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: row wrap;
	border-radius: 8px;
	font-size: 15px;
}

/* ---------- botao do whatsapp ---------- */

& .button-whatsapp{
	border: 1px solid var(--second-color);
	color: var(--second-color);
	height: 40px;
	border-radius: 10px;
	width: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1%;
	margin: 15px 0;
	cursor: pointer;
	background-color: transparent;
	text-decoration: none;
	& a{
		width: 100%;
		height: 100%;
	}

	& img{
		width: 23px;
		margin-right: 5px;
	}

	& p{ font-size: 12px; }
}




/* ------------------------------ HEADER ------------------------------ */

.header-mobile{
	display: none;
	justify-content: center;
	align-items: flex-end;
	height: 40px;
	width: 100%;
	
	& i{
		font-size: 30px;
		color: white;
		margin: 0 10px;
	}
}

.header{
	width: 97%;
	height: 64px;
	border-radius: 10px;
	margin-top: 20px;
	background-color: rgba(23, 21, 38, 0.7);
	display: flex;
	justify-content: space-between;
	flex-flow: row wrap;
	padding: 0 2%;


	& .logo{
		height: 100%;
		display: flex;
		align-items: center;

		& i{ font-size: 20px; }
	}


	& .navegacao {
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		& ul{
			display: flex;
			align-items: center;
			justify-content: center;
			color: var(--primary-color);
			list-style-type: none;

			& li{
				margin: 0 13px;
				cursor: pointer;
				font-size: 15px;
				display: flex;
				flex-flow: row wrap;

				& a{
					color: white;
					text-decoration: none;
				}

				& .linha{
					width: 0%;					
					transition: 0.3s;
				}
			}

			& li:hover{
				& a{ color: var(--second-color); }

				& .linha{
					width: 100%;
					border-bottom: 1px solid #7B4AE2;
				
				}
			}


		}
	}
}


/* ------------------------------ BANNER PRINCIPAL ------------------------------ */

.banner-principal{
	display: flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	margin-top: 50px;

	& .descricao-banner{
		height: 60%;

		& .apresentacao-banner{
			margin: 12px 0;

			& h1{
				font-size: 40px;
				margin-bottom: 5px;

			}

			& p{
				font-size: 16px;
				margin: 10px 0;
				font-weight: normal;
				color: var(--primary-color);
			}
		}

		& .icones a{
			color: white;
			border-radius: 50%;
			font-size: 24px;
			margin: 0 5px;
			cursor: pointer;
		}

	}

	& .avatar img{ width: 450px; }
}


/* ------------------------------ SOBRE MIM ------------------------------ */

.sobre-mim{
	width: 100%;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: center;
	padding-top: 150px;

	& .minha-foto{
		width: 40%;
		height: 30%;
		display: flex;
		justify-content: center;
	
		& img{
			width: 60%;
			border-radius: 50%;
		}
	}

	& .descricao-pessoal{
		width: 50%;

		& .apresentacao-pessoal{
			& h1{ margin: 20px 0; }

			& p{
				font-size: 13px;
				color:var(--primary-color);
				margin: 5px 0;
			}
		}
	}
}

/* ------------------------------ PROJETOS ------------------------------ */

.projetos{
	width: 100%;
	padding-top: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;

	& > h1{ margin: 30px 0; }

	& .container-projetos{
		width: 100%;

		& > a{
			text-decoration: none;
			color: var(--second-color);
			display: flex;
			justify-content: center;
			font-size: 14px;
		}

		& .flex-box{
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 20px 0 50px 0;
		}

		& .projeto-single{
			width: 330px;
			height: 400px;
			border: 1px solid var(--second-color);
			display: flex;
			flex-flow: column wrap;
			justify-content:space-around;
			border-radius: 10px;
			padding: 1%;
			margin: 0 50px;

			& .descricao-projeto{
				width: 95%;

				& h1{
					margin: 0 auto;
					font-size: 19px;
				}

				& p{
					margin: 10px 0;
					font-size: 13px;
					color: var(--primary-color);
				}
			}

			& .container-imagem{
				height: 70%;
				display: flex;
				flex-flow: column wrap;
				justify-content: space-between;

				& img{
					width: 100%;
					height: 75%;
					border-radius: 5px;
				}
			}
		}
	}
}


/* ------------------------------ SKILLS ------------------------------ */

.skills{
	width: 100%;
	padding-top: 100px;
	height: 400px;
	display: flex;
	flex-flow: column wrap;
	align-items: center;
	justify-content: center;

	& h1{
		font-size: 30px;
		margin: 20px 0 40px 0;
	}

	& .habilidades{
		display: flex;
		flex-flow: column wrap;
		justify-content: center;
		align-items: center;

		& p{
			color:  var(--primary-color);
			margin: 20px 0;
		}

		& img{ width: 300px; }
	}
}

/* ------------------------------ CONTATO ------------------------------ */

.contato{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-flow: column wrap;
	padding-top: 100px;

	& h1{ margin: 20px 0; }

	& > a{
		margin-top: 50px;
		color: var(--second-color);
		text-decoration: none;
	}

	& .container-contato{
		width: 500px;
		display: flex;
		align-items: center;
		justify-content: space-around;

		& h2{ font-size: 20px; }

		& .flex{
			display: flex;
			align-items: center;

			& p{
				color: var(--primary-color);
				font-size: 13px;
				margin-right: 5px;
			}
	
			& img{ width: 30px; cursor: pointer; }
		}
	}
}



.footer{
	background-color: rgba(23, 21, 38, 0.7);
	width: 100%;
	height: 60px;
	margin-top: 100px;
	padding-left: 1%;

	& .container-footer{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
		flex-flow: row wrap;

		& p{
			color: var(--primary-color);
			font-size: 13px;
		}

		& .icones i{
			color: white;
			font-size: 25px;
			margin: 0 10px;
		}
	}
}

/* ------------------------------ MEDIAS SCREENS ------------------------------ */


@media screen and (max-width: 1136px){ .projetos .projeto-single:nth-of-type(2){ display: none; } }


@media screen and (max-width: 1000px){
	.sobre-mim{
		flex-flow: column wrap;
		align-items: center;
		justify-content: center;
	
		& .descricao-pessoal{ width: 70%; }
	
		& .mensagenm{ margin: 15px 0; }

		& .minha-foto img{ width: 200px; }
	}
}

@media screen and (max-width: 792px){ .banner-principal .avatar img{ width: 300px!important; } }


@media screen and (max-width: 700px){
	.flex-box{
		flex-direction: column!important;
		& .projeto-single{ margin: 25px 0!important; padding: 3%!important; }
	}
}


@media screen and (max-width: 638px){
	.apresentacao-banner h1{ font-size:25px!important; }
	.sobre-mim h1{ font-size:25px!important; }
}


@media screen and (max-width: 600px){
	.header{ display: none; }

	.header-mobile{ display: flex; }

	.banner-principal{
		flex-direction: column-reverse;

		.avatar img{
			width: 250px;
			margin-bottom: 20px;
		}

		.icones{ display: none; }
	}

	.container-contato{ width: 100%!important; }
}


@media screen and (max-width: 469px){
	.contato{
		.container-contato{
			flex-flow: column wrap;

			& .email{ margin-top: 20px; }
		}
	}

	.skills{
		text-align: center;

		& > h1{ font-size: 20px; }

		& .habilidades{
			& p{ font-size: 13px; }

			& img{ width: 100%; }
		}
	}
}

@media screen and (max-width: 370px){
	.contato > h1 { font-size: 20px; }
	.projetos > h1{ font-size: 22px; }
	.projeto-single{ width: 250px!important; }	
}