@charset "UTF-8";

body {
	font-family: Brush Script MT, cursive;
	margin: 0;
	padding: 0;
}

/*__________________Naveção__________________*/
#navegacao {
	position: fixed;
	background-image: linear-gradient(to right top, rgba(79, 16, 226, 0.9), rgba(25, 111, 223, 0.5),
	rgba(11, 41, 5, 0.9)), url('imagens/fundoApresentacao.webp');
	padding-left: 25%;
	border: 0;
	font-size: 20px;
	cursor: pointer;
}

#nomeBrand {
	border: 0 !important;
	font-size: 30px !important;
	color: black !important;
	position: relative !important;
	right: 50% !important;
}

@keyframes rodar {50% {rotate: y 180deg;}}

#animacao:hover {animation: rodar 0.40s infinite;}

/*__________________Apresentacao__________________*/
#apresentacao {
	position: relative;
	background-image: linear-gradient(to bottom right,  rgba(79, 16, 226, 0.9),rgba(25, 111, 223, 0.5), 
	rgba(11, 41, 5, 0.9)), url('imagens/fundoApresentacao.webp');
	width: 100%;
	font-family: "Dancing Script", cursive;
}

#nome {
	position: relative;
	right: 20%;
	font-family: "Stardos Stencil", system-ui;
	font-weight: 700;
	font-size: 60px;
	background: linear-gradient(to left bottom, rgb(211, 224, 230), rgb(21, 124, 214));
	-webkit-text-fill-color: transparent;
	background-clip: text;
	width: 140%;
}

#rosto {
	position: relative;
	margin-top: 40%;
	bottom: 10%;
}

#imagemApresentacao1 {
	position: relative;
	top: -200px;
}

@keyframes parado {from {transform: translate(0);} to {transform: translate(100%);}} 	 

/*__________________Divisão1__________________*/

#divisao1 {
	position: relative;
	display: flex;
	align-items: center;
	overflow-x: hidden;
	white-space: nowrap;
	top: -50px;
	background-color: rgb(21, 124, 214);
	margin-bottom: -50px;
}

@keyframes movendoProLadoEsquerdo {from {transform: translate(0);} to {transform: translate(-100%);}}

.icones {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: movendoProLadoEsquerdo 60s  linear infinite;
}

.icones img {padding-left: 50px;}

/*__________________Cursos__________________*/
@keyframes movimentoParaBaixo{ from {background-position: top;} to {background-position: bottom;}}

#corpo {
	position: relative;
	width: 100%;
	background-image: linear-gradient(to bottom right,rgba(25, 111, 223, 0.5), 
	rgba(11, 41, 5, 0.9)), url('imagens/fundoApresentacao.webp');
	font-family: 'indie flower', cursive;
	animation: movimentoParaBaixo 20s linear infinite;
}

.sites {
	position: relative;
	top: 50px;
	border: 5px solid transparent;
	background-color: rgb(21, 124, 214);
	border-radius: 5%;
	width: 40%;
	height: 900px;
	margin-left: 10%;
	margin-top: 5%;
}

.sites iframe {
	position: relative;
	top: 30px;
    border: 5px solid gray;
	border-radius: 10%;
    width: 100%;
    height: 450px;
}

.nomeCursos a{
	text-align: center;
	position: relative;
	font-size: 30px;
	color: white;
	text-decoration: none;
}

.descricaoCursos {
	text-align: left;
	position: relative;
	top: 50px;
	font-size: 20px;
	color: whitesmoke;
}

.ferramentasCursos {
	text-align: left;
	position: relative;
	top: 90px;
	font-size: 20px;
}

.ferramentasCursos span {
	position: relative;
	top: 5px;
	font-weight: 900;
	border: 1px solid transparent;
	border-radius: 20px;
	margin-top: 5%;
	padding: 0 2%;
	background-color: rgb(173, 211, 202);
}

.html {color: rgb(255, 68, 0);}

.css {color: rgb(17, 103, 233);}

.bootstrap {color: purple;}

.javascript  {color: lightcoral;}

.php {color: rgb(145, 99, 204);}

.mysql {color: white;}

.ajax {color: red;}

.jquery {color: orange;}

.wordpress {color: lightblue;}

.fullscreen {position: relative;}

#cursosTexto {
	float: left;
	letter-spacing: 15px;
	position: relative;
	top: 50px;
	left: 10%;
	background: linear-gradient(to left top, rgb(211, 224, 230), rgba(79, 16, 226, 0.9));
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 60px;
	font-weight: 900;
}

#cursosBotao {
	position: relative;
	top: 140px;
	left: 10%;
	background-color: black;
}

#cursosLista li {font-size: 20px; background-color: black;}

#cursosPagina {
	position: relative;
	top: 53px;
	left: 50%;
	color: purple;
	width: 20%;
}

#cursosPagina:hover {cursor: pointer;}

#dois, #tres, #quatro {display: none;}

#cursosLista li:hover {background-color: rgb(3, 26, 41); cursor: pointer;}

.fullscreen {
	cursor: pointer; 
	position: relative; 
	margin-top: -20px;
}

.fullscreen:hover {
	transition: all .4s linear;
	-webkit-transition: all .4s linear;
	transform: scale(1.4);
}

/*_________________Projeto__________________*/
#projetosTexto {
	float: right;
	right: 10%;
	letter-spacing: 15px;
	position: relative;
	background: linear-gradient(to right top, rgb(211, 224, 230), rgba(79, 16, 226, 0.9));
	-webkit-text-fill-color: transparent;
	background-clip: text;
	font-size: 60px;
	font-weight: 900;
}

#projetos {position: relative; top: 200px; padding-bottom: 30%;}

.projetos {
	position: relative;
	top: 50px;
	border: 5px solid transparent;
	background-color: rgb(114, 68, 223);
	border-radius: 5%;
	width: 40%;
	height: 900px;
	left: 35%;
	margin-top: 5%;
}

.projetos iframe {
	position: relative;
	top: 30px;
    border: 5px solid black;
	border-radius: 10%;
    width: 100%;
    height: 450px;
}

/*________________Divisao2________________*/
#divisao2 {
	position: relative;
	display: flex;
	align-items: center;
	overflow-x: hidden;
	white-space: nowrap;
	background-color: rgb(114, 68, 223, 0.7);
	height: 200px;
}

@keyframes movendoProLadoDireito {from {transform: translate(-100%);} to {transform: translate(0);}}

.eletronicos {
	display: flex;
	align-items: center;
	justify-content: center;
	animation: movendoProLadoDireito 60s  linear infinite;
}


/*________________Sobre mim__________________*/
#pessoal {
	position: relative;
	background-image: linear-gradient(to bottom right, rgba(25, 111, 223, 0.5), 
	rgba(11, 41, 5, 0.9),  rgba(79, 16, 226, 0.9)), url('imagens/fundoApresentacao.webp');
	margin-left: 0;
}

#imagemPessoal img {
    
	position: relative;
	top: 100px;
	border: 3px solid transparent;
	border-radius: 20px;
	box-shadow: rgb(89, 18, 255) -1px 1px,
				rgb(89, 28, 255) -2px 2px,
				rgb(89, 38, 255) -3px 3px,
				rgb(89, 48, 255) -4px 5px,
				rgb(89, 58, 255) -6px 6px,
				rgb(89, 68, 255) -7px 7px,
				rgb(89, 78, 255) -8px 8px,
				rgb(89, 88, 255) -9px 9px,
				rgb(89, 98, 255) -10px 10px,
				rgb(89, 108, 255) -11px 11px;	
}

#descricaoPessoal {
	position: relative;
	top: 110px;
	color: white;
	padding-right: 10%;
}

/*_________________Rodapé______________________*/
#rodape {
	position: relative;
	margin-top: 20%;
	width: 30%;
}

#rodape i:hover {
	cursor: pointer;
	-webkit-transition: .4s ease;
	-webkit-transform: scale(1.4);
}

#marca {
	color: black;
	position: relative;
	left: 20%;
	bottom: 5%;
	font-family: Arial, Helvetica, sans-serif;
}

/*_________________Ajuste______________________*/
@media only screen and (max-width: 990px) {
	#fundoNav {
		background-image: url(imagens/fundoNav.webp) !important; 
		width: 100% !important; 
		height: 100% !important;
	}

	.col-6 {width: 100%;}
	
	#imagemPessoal img {width: 80%;}

	#apresentacaoDesWeb {position: relative; top: 400px;}

	.projetos {
		position: relative;
		left: 10%;
		margin-bottom: 10%;		
	}
}

@media only screen and (max-width: 800px) {
	.sites {position: relative; margin-left: 2%;}

	.projetos {
		position: relative;
		left: 5%;
		margin-bottom: 20%;		
	}
}

@media only screen and (max-width: 700px) {
	#cursosPagina {
		position: relative;
		left: 0;
		top: 100px;
	}

	.descricaoCursos {font-size: 16px;}

	#rodape {
		position: relative;
		margin-top: 40%;
		border-color: 1px solid red;
		width: 60%;
	}
	
	#imagemPessoal img {width: 100%;}
}

@media only screen and (max-width: 550px) {
	.sites {position: relative; height: 950px;}

	#nome, #apresentacao {font-size: 40px;}

	.projetos {position: relative; margin-bottom: 35%;		}
}

@media only screen and (max-width: 450px) {
	#rosto {position: relative; margin-top: 70%;}

	#nome, #apresentacao {font-size: 30px;}

	.projetos {position: relative; margin-bottom: 45%;		}
}

@media only screen and (max-width: 400px) {
	.sites {position: relative; height: 1010px;}

	#projetosTexto {position: relative; right: 0;}

	#nomeBrand {position: relative; bottom: 5px;}

	#botaoNav {
		position: relative;
		left: 10%;
		height: 10px;
		bottom: 35px;
	}

	.projetos {position: relative; margin-bottom: 58%;		}

	#navegacao {position: fixed; height: 90px;}
}

@media only screen and (max-width: 350px) {
	#cursosPagina {position: relative; right: 50%}

	#cursosBotao {
		position: relative;
		top: 150px;
		left: 0;
	}

	.projetos {position: relative; margin-bottom: 68%;		}
}