html, body{
	overflow-x: hidden;
	background: #2a0a22;
	color: #FAFAFA;
}
html{
	scroll-behavior: smooth;
}
.container{
	width: 95%;
}
/*Barra de navegação*/
::-webkit-scrollbar {
  width: 11px;
}
::-webkit-scrollbar-track {
  box-shadow: #D8D8D8; 
  border-radius: 2px;
}
::-webkit-scrollbar-thumb {
  background: #DF01A5; 
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover {
  background: #8A0868; 
}
#menu-hamburger{
	color: #DF01A5;
}
.header-page{
	background: linear-gradient(to top, #190714, #3B0B2E); 
	padding: 10px 0;
}
.animate-zoom{
	transition: 0.6s;
}
.animate-zoom:hover{
	transform: scale(1.1);
	cursor: pointer;
	color: #F5A9E1;
}
.animacao-img-home{
	animation: rotateInDownRight;
	animation-duration: 1s;
}
.animacao-header{
	animation: backInDown;
	animation-duration: 1.1s;
}
#img-lacerda{
	border-radius: 47%;
	box-shadow: 4px 4px 3px #8A0868;
}
img+p{
	font-size: 1em;
	font-family: "Patrician";
	color: #BDBDBD;
	border-right: 2px solid #DF01A5;
	white-space: nowrap;
	text-align: center;
	overflow: hidden;
}
.animate-cursor{
	animation: blinkCursor 500ms steps(36) infinite normal, typing 4s steps(36) 1s normal both;
}
.margin-lateral-home{
	margin: 0 25%;
}
a.logo{
	color: #fff;
	font-family: "Akira";
	letter-spacing: 0.07em;
	font-size: 1.7em;
}
.nav-header ul li a{
	color: #fff;
	position: relative;
}
.nav-header ul li a:hover::after{
	width: 100%;
}
.nav-header ul li a::after{
	content: " ";
	width: 0%;
	height: 2px;
	background-color: #DF01A5;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: 0.7s ease;
}
.divisor{
    width: 1px;
    background: white;
    margin: 12px 3px;
}
#section-home{
	height: 100vh;
}
#section-home,#section-tecnologias, #section-quem, #section-lorem{
	background: #190714; 
} 
.home-img{
	display: flex;
	flex-direction: column;
	text-align: center;
}
.espacamento-superior{
	padding-top: 20vh;
}
.espacamento-inferior{
	padding-bottom: 20vh;
}
h1 span{
	color: #DF01A5;
}
p.font-hel{
	font-family: Verdana, Arial, sans-serif;
}
.padding-caixa{
	padding: 120px 10px;
}

.card-conhecimentos{
	border-style: none;
	border-radius: 6px;
	background: #F6CEEC;
	color: #000;
	box-shadow: 1px 1px 2px #848484;
}
.sombra-card-html:hover{
	color: #000;
	border-radius: 10px;
	box-shadow: 5px 5px 8px #FF8000;
	margin-left: -2px;
	transition: 1s;
}
.sombra-card-css:hover{
	color: #000;
	border-radius: 10px;
	box-shadow: 5px 5px 8px #2E64FE;
	margin-left: -2px;
	transition: 1s;
}
.sombra-card-bootstrap:hover{
	color: #000;
	border-radius: 10px;
	box-shadow: 5px 5px 8px #5F04B4;
	margin-left: -2px;
	transition: 1s;
}
.sombra-card-js:hover{
	color: #000;
	border-radius: 10px;
	box-shadow: 5px 5px 8px #FFFF00;
	margin-left: -2px;
	transition: 1s;
}
.sombra-html{
	text-shadow: 1px 1px #FF8000;
}
.sombra-css{
	text-shadow: 1px 1px #2E64FE;
}
.sombra-bootstrap{
	text-shadow: 1px 1px #5F04B4;
}
.sombra-js{
	text-shadow: 1px 1px #FFFF00;
}
.h1-font{
	font-family: "Patrician";
	letter-spacing: 0.1em;
}
.card-projetos{
	border-radius: 20px;
	max-width: 640px;
	margin: 0px;
	padding: 0px;
}
.descricao-projeto{
	color: #ffddfe;
	padding-top: 10px;
	font-size: 1.5em;
	text-decoration: none;
}
.descricao-projeto:hover{
	text-decoration: none;
	color: #F5A9E1;
}
footer{
	font-size: 1.2em;
	background: linear-gradient(to top, #3B0B2E, #190714); 
}
footer .logo{
	font-family: "Akira";
	font-size: 0.7em;
}
footer a{
	color: #F2F2F2;
	position: relative;
}
footer li a:hover{
	color: #DF01A5;
}
footer li a:hover::after{
	width: 100%;
}
footer ul i{
	width: 50px;
}
footer li a::after{
	content: " ";
	width: 0%;
	height: 2px;
	background-color: #DF01A5;
	position: absolute;
	bottom: 0;
	left: 0;
	transition: 0.7s ease;
}
footer h5{
	color: white;
	text-shadow: 1px 1px #6E6E6E;
}
/*Adicionando key frames*/
@keyframes blinkCursor {
	from{
		border-right-color: #DF01A5;
	}
	to{
		border-right-color: transparent;
	}
}
@keyframes typing {
	from{
		width: 0;
	}
	to{
		width: 100%;
	}
}
/*Adicionando fontes*/
@font-face{
	font-family: "Font Pixel";
	src: url("../font-family/fontpixel.woff") ;
}
@font-face {
	font-family: "Akira";
	src: url("../font-family/Akira-Expanded-Demo.woff");
}
@font-face {
	font-family: "Patrician";
	src: url("../font-family/Patrician.woff");
}
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 575.98px) {
    a.logo{
		font-size: 1.2em;
	}
	h1.h1-font{
		font-size: 1.7em;
	}
	footer .logo{
		font-family: "Akira";
		font-size: 0.4em;
	}
	.card-projetos{
		max-width: 340px;
	}
	.header-page{
		padding: 6px 0;
	}
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) and (max-width: 767.98px) {
    .img-home{
    	width: 280px;
    }
    a.logo{
		font-size: 1.4em;
	}
	footer .logo{
		font-family: "Akira";
		font-size: 0.5em;
	}
	.card-projetos{
		max-width: 470px;
	}
	.header-page{
		padding: 8px 0;
	}
}

/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) and (max-width: 991.98px) {
    .img-home{
    	width: 290px;
    }
	#img-programadora{
		width: 300px;
	}
    .card{
    	display: inline-block;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) and (max-width: 1199.98px) {
   .img-home{
    	width: 390px;
    }
	#img-programadora{
		width: 390px;
	}
}

/* Extra large devices (large desktops, 1200px and up)*/