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

body {
	background: black;
}

.sombra{
	transition: 0.5s ease;
	cursor: pointer;
}

.sombra:hover{
	transform: scale(1.1);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);

}

.line {
	border-right: 2px solid rgba(255, 255, 255, 0.75);
	color: rgba(255, 255, 255, 0.75);
	font-family: "Special Elite", monospace;
	font-size: 3em;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

.typing-animation {
	animation: blinkCursor 500ms steps(40) infinite normal,
	typing 4s steps(40) 1s infinite both;
}

@keyframes typing {
	from {
		width: 0;
	}
	to {
		width: 16em;
	}
}

@keyframes blinkCursor {
	from {
		border-right-color: rgba(255, 255, 255, 0.75);
	}
	to {
		border-right-color: transparent;
	}
}

/* Extra small devices (Celulares na Vertical, menor que 576px) */
@media(max-width: 430px){
	body{
		padding-top: 47px;
		background-color: rgb(0,0,0,0.9);
	}
	nav,a {
		font-size: 10pt;
		font-weight: bolder;
	}
	span{
		font-size: 9pt;
	}
	#cardPorftolio{
		width: 13rem !important;
	}
	#fundoTopo{
		height: 180px !important;
	}

	figcaption#legenda{
		font-size: 8pt;
		font-style: italic;
	}
	.sombra:hover{
	transform: scale(1.1);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
	margin-bottom: 10px;
	}
	img#zap{
		 position: 
		 fixed; width: 50px; 
		 bottom: 5px; 
		 right: 5px;"
	}
	a#logo{
		font-size: 15px; 
		background-image: linear-gradient(150deg, #13547a 0%, #80d0c7 100%); 
		border-radius: 50%; 
		width: 90px;
	}
	h5#end, p#end, a#end{
		font-size: 10pt !important;
	}
	p{
		font-size: 12pt !important;
	}
	h1#sobre, h1#port, h1#loc, h3#tec{
		font-size: 19pt !important;
	}
	a#social1 {
		padding-bottom: 5px;
		margin-left: 40px;
		font-color: white;
		font-size: 12px;
		color: white;
	}
	a#social2 {
		padding-bottom: 5px;
		margin-left: 70px;
		font-size: 12px;
		color: white;
	}

	a#social3 {
		padding-bottom: 5px;
		margin-left: 120px;
		font-size: 12px;
		color: white;
	}

	a#social4 {
		padding-bottom: 5px;
		margin-left: 150px;
		font-size: 12px;
		color: white;
	}
	.info{
		padding-bottom: 20px;
		border-bottom: 2px solid white;
	}
	.line {
		border-right: 2px solid rgba(255, 255, 255, 0.75);
		color: rgba(255, 255, 255, 0.75);
		font-family: "Special Elite", monospace;
		font-size: 10pt;
		white-space: nowrap;
		overflow: hidden;
	}
	.anima{
		top: 138px;
		font-size: 8pt;
		font-weight: bolder;
		color: white;
		padding: 2px;
	}
}

/* Small devices (Celulares na Horizontal, entre 576px e 768px) */
@media (min-width: 431px) and (max-width: 600px){
	body{
		padding-top: 47px;
		background-color: rgb(0,0,0,0.9);
	}
	nav,a {
		font-size: 14pt;
		font-weight: bolder;
		padding-bottom: 300px;
	}
	span{
		font-size: 13pt;
	}
	#fundoTopo{
		height: 250px !important;
	}
	.sombra:hover{
	transform: scale(1.1);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
	margin-bottom: 15px;
	}
	a#logo{
		font-size: 20px; 
		background-image: linear-gradient(150deg, #13547a 0%, #80d0c7 100%);
		border-radius: 50%; 
		width: 120px;
	}
	img#zap{
		 position: 
		 fixed; width: 80px; 
		 bottom: 5px; 
		 right: 5px;"
	}
	h5#end, p#end, a#end{
		font-size: 13pt !important;
	}
	p{
		font-size: 13pt !important;
	}
	h1#sobre, h1#port, h1#loc, h3#tec{
		font-size: 20pt !important;
	}
	.info{
		padding-bottom: 20px;
		border-bottom: 2px solid white;
	}
	a#social1 {
		padding-bottom: 5px;
		margin-left: 100px;
		font-size: 20px;
		color: white;

	}
	a#social2 {
		padding-bottom: 5px;
		margin-left: 150px;
		font-size: 20px;
		color: white;
	}

	a#social3 {
		padding-bottom: 5px;
		margin-left: 200px;
		font-size: 20px;
		color: white;
	}

	a#social4 {
		padding-bottom: 5px;
		margin-left: 240px;
		font-size: 20px;
		color: white;
	}
	.line {
		border-right: 2px solid rgba(255, 255, 255, 0.75);
		color: rgba(255, 255, 255, 0.75);
		font-family: "Special Elite", monospace;
		font-size: 1em;
		white-space: nowrap;
		overflow: hidden;
	}
	.anima{
		width: 100%;
		left: 0px;
		top: 180px;
		font-size: 15pt;
		font-weight: bolder;
		color: white;
		padding: 5px;
	}
	.topoImagem{
		margin-top: 9px;
	}
}

/*  Medium devices (Tablets, entre 768px e 992px) */
@media (min-width: 601px) and (max-width: 900px){
	body{
		padding-top: 60px;
		background-color: rgb(0,0,0,0.9);
	}
	nav, a {
		font-size: 15pt;
		font-weight: bolder;
	}
	img#zap{
		 position: 
		 fixed; width: 90px; 
		 bottom: 15px; 
		 right: 15px;"
	}
	span, a#end{
		font-size: 11pt;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
	#fundoTopo{
		height: 340px !important;
	}
	#bordaEnd{
		border-right: 2px solid white;
		padding-bottom: 10px;
	}
	.sombra:hover{
	transform: scale(1.1);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
	margin-bottom: 25px;
	}

	h5#end, p#end,{
		font-size: 12pt !important;
	}

	a#logo{
		font-size: 25px; 
		background-image: linear-gradient(150deg, #13547a 0%, #80d0c7 100%);
		border-radius: 50%; 
		width: 150px;
	}
	
	a#social1 {
		padding-bottom: 5px;
		margin-left: 140px;
		text-decoration: none;
	}
	a#social1:hover {
		padding-bottom: 5px;
		margin-left: 140px;
		text-decoration: underline blue;
		color: white;	
	}
	a#social2 {
		padding-bottom: 5px;
		margin-left: 160px;
		text-decoration: none;
		color: #DC3545;
	}
	a#social2:hover {
		padding-bottom: 5px;
		margin-left: 160px;
		text-decoration: underline #DC3545;
		color: white;	
	}
	a#social3 {
		padding-bottom: 5px;
		margin-left: 180px;
		text-decoration: none;
	}
	a#social3:hover {
		padding-bottom: 5px;
		margin-left: 180px;
		text-decoration: underline blue;
		color: white;	
	}
	a#social4 {
		padding-bottom: 5px;
		margin-left: 200px;
		text-decoration: none;
		color: #28A745;
	}
	a#social4:hover{
		padding-bottom: 5px;
		margin-left: 200px;
		text-decoration: underline #28A745;
		color: white;
	}
	
	.line {
		border-right: 2px solid rgba(255, 255, 255, 0.75);
		color: rgba(255, 255, 255, 0.75);
		font-family: "Special Elite", monospace;
		font-size: 1em;
		white-space: nowrap;
		overflow: hidden;
	}
	.anima{
		width: 100%;
		left: 0px;
		top: 220px;
		font-weight: bolder;
		color: white;
		padding: 2px;
	}	
}


/* Large devices (Desktops, entre 992px e 1200px)*/
@media(min-width: 901px){
body{
		padding-top: 73px;
		background-color: rgb(0,0,0,0.9);
	}
	nav, a {
		font-size: 20pt;
		font-weight: bolder;
	}
	span{
		font-size: 14pt;
	}
	#fundoTopo{
		width: 100% !important;
		height: 500px !important;
	}
	.sombra:hover{
	transform: scale(1.1);
	box-shadow: 5px 5px 15px rgba(0,0,0,0.6);
	margin-bottom: 20px;
	}
	h5#end, p#end{
		font-size: 18pt !important;
		padding: 5px;
	}
	a#end{
		font-size: 14pt;
	}
	img#zap{
		position: fixed; 
		width: 100px; 
		bottom: 20px; 
		right: 25px;"
	}
	a#logo{
		font-size: 30px; 
		background-image: linear-gradient(150deg, #13547a 0%, #80d0c7 100%);
		border-radius: 50%; 
		width: 200px;
	}
	#bordaEnd{
		border-right: 2px solid white;
	}
	a#social1 {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 150px;
		text-decoration: none;
	}
	a#social1:hover {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 150px;
		text-decoration: underline blue;
		color: white;	
	}
	a#social2 {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 180px;
		text-decoration: none;
		color: #DC3545;
	}
	a#social2:hover {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 180px;
		text-decoration: underline #DC3545;
		color: white;	
	}
	a#social3 {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 220px;
		text-decoration: none;
	}
	a#social3:hover {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 220px;
		text-decoration: underline blue;
		color: white;	
	}
	a#social4 {
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 260px;
		text-decoration: none;
		color: #28A745;
	}
	a#social4:hover{
		font-size: 14pt;
		padding-bottom: 5px;
		margin-left: 260px;
		text-decoration: underline #28A745;
		color: white;
	}
	.line {
		border-right: 2px solid rgba(255, 255, 255, 0.75);
		color: rgba(255, 255, 255, 0.75);
		font-family: "Special Elite", monospace;
		font-size: 3em;
		white-space: nowrap;
		overflow: hidden;
	}
	.anima{
		width: 100%;
		left: 0px;
		top: 310px;
		font-weight: bolder;
		color: white;
		padding: 2px;
	}
	
}




/* As 5 dimensões disponiveis em Bootstrap para ajudar a responsividade das diferentes telas.

// Extra small devices (Celulares na Vertical, menor que 576px)
@media (max-width: 575px) { ... }

// Small devices (Celulares na Horizontal, entre 576px e 768px)
@media (min-width: 576px) and (max-width: 767px) { ... }
 
// Medium devices (Tablets, entre 768px e 992px)
@media (min-width: 768px) and (max-width: 991px) { ... }
 
// Large devices (Desktops, entre 992px e 1200px)
@media (min-width: 992px) and (max-width: 1199px) { ... }
 
// Extra large devices (Desktop com tela grande, maior que 1200px)
@media (min-width: 1200px) { ... }

*/