*{
	box-sizing: border-box;
}

:root {
	--navbar-link: #fff;
	--img-central: rgba(255, 255, 255, .5);
	--img-navbar: rgba(255, 255, 255, .5);
	--bg-img: none;
	--bg-shadow: 0px 0px 8px none;
	--cor-nome: #fff;
}

html {
	font-family: Source Sans Pro, Helvetica, sans-serif!important;
	padding: auto;
	font-size: 16px;
}

body {
	width: 100%;
	margin: 0 auto;
}

.img-bg {
	width: 100%;  
	background-repeat: no-repeat;
	background-position:center center;
	background-size: cover;
	height: 100%;
	padding: 0;
	margin: 0;
}

.sombra-bg {
	max-width: 100%;  
	min-height: 100vh;
	/* display: -webkit-box;
	display: -webkit-flex;
	display: -moz-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	padding: 15px; */
	background: rgba(41,44,51,0.6);
}

.navbar{
	font-family: Comfortaa;
	color: #fff;
	/* color: rgba(0,0,0,.9); */
	top: 0;
	width: 100%;
	height: auto;
	padding: 10px;
	background-color: rgba(0,0,0,.5);
	box-shadow: 0 0px 1.2px 0px #fff;
	/* border-bottom: 1px solid rgba(0,0,0,.125);
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.16);  */
	display: flex;
	transition: 1s;
	/* position: fixed; */
}

.navbar:hover {
	background: whitesmoke;
	color: rgba(0,0,0,.9);
	/* border-bottom: 1px solid rgba(0,0,0,.125); */
	box-shadow: 0 1px 5px 0 rgba(0,0,0,.16);
	transition-delay: .0.5s;
	transition-duration: 1s;
	--navbar-link: rgba(0,0,0,.5);
	--img-central: rgba(0,0,0,.5);
	--img-navbar: rgba(0,0,0,.8);
	--cor-nome: #000;
}

.figure {
	width: 20%;
	height: inherit;
	display: inline-block;
	border-left: 3px solid #ce242a;
	margin-left: 1.5rem;
}

.div {
	height: inherit;
	width: 100%;
	display: flex;
}

.img {
	height: 55px;
	width: 60px;
	border-radius: 50%;
	vertical-align: middle;
	margin-left: .3125rem;
	margin-right: .3125rem;
	border-style: none;
	box-shadow: 0px 1px 3px var(--img-navbar);
	transition: 1s;
	cursor: pointer;
}

.span-nome {
	transition: 1s;
	font-size: 20px;
	font-weight: bold;
	padding: .9rem .2rem;
	margin: 0;
	cursor: pointer;
	color: var(--cor-nome);
}

.links {
	width: 75%;
	padding-right: 2rem;
}

ul li {
	list-style: none;
}

ul {
	height: inherit;
	display: inline-flex;
	position: absolute;
	right: 0;
	margin: 0;
	padding: 15px 0;
	margin-right: 2rem;
}

li {
	height: inherit;
	display: list-item;
	text-align: -webkit-match-parent;
	vertical-align: -webkit-baseline-middle;
}

ul li a {
	height: 30px;
	padding-top: .3em;
	display: inline-block;
	text-decoration: none;
	cursor: pointer;
	color: var(--navbar-link);
	/* color: rgba(0,0,0,.5); */
	font-weight: 600;
	padding-right: 1.5rem;
	transition: 1s;
}

ul li a:hover {
	font-size: 17.5px;
	transition-delay: .1s;
	transition-duration: 1s;
	/* color: rgba(71,64,69,.8); */
	color: rgba(0,0,0,.7);
}

/* .a:visited {
	color: #ce242a;
} */

.a:active {
	color: hotpink;
}

.barra {
	border-left: 3px solid #ce242a;
	padding-left: 1em;
}

.nav-side {
	align-items: center;
	width: 35%;
	/* float: left; */
	display: block;
	position: absolute;
	/* margin-left: 2rem; */
	padding-left: 2rem;
}

.text-bio {
	font-size: 20px;
	/* font-family: 'Times New Roman', Times, serif; */
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	/* font-family: Georgia; */
	/* font-family: 'Courier New', Courier, monospace; */
	/* font-family: cursive; */
	color: #fff;
	top: 2.5rem;
	text-align: justify;
	display: block;
}

.sobre {
	text-decoration: none;
}

.div-img-corpo {
	width: 60%;
	padding-left: 2rem;
	float: right;
}

h1 {
	text-align: center;
	color: #fff;
}

.img-centro {
	height: 200px;
	width: 200px;
	/* text-align: center; */
	border-radius: 100px;
	margin-top: -3%;
	position: absolute;
	box-shadow: 0px 0px 3.8px var(--img-central);
	transition: 1s;
}

.img-centro:hover {
	box-shadow: 0px 0px 6px #fff;
	transition-delay: .0.5s;
	transition-duration: 1s;
	--bg-img: rgba(41,44,51,.3);
	--bg-shadow: 0px 0px 8px #fff;
} 

.sombra-bg-img {
	transition: 1s;
	background: var(--bg-img);
	border-radius: 100px;
	box-shadow: var(bg-shadow);
}

.footer {
	width: 100%;
	height: 100px;
	background-color: rgba(0,0,0,.8);
	color: #fff;
	bottom: 0;
	position: fixed;
	box-shadow: 0 0px 1.2px 0px #fff;
	padding: 0;
}

.texto-footer {
	width: 48%;
	position: absolute;
	left: 20px;
	text-align: center;
	height: inherit;
}

.texto-footer p {
	padding: 30px 0 !important;
	left: -60px !important;
}

.p {
	font-family: Comfortaa;	
	text-align: center;
	position: absolute;
	height: inherit;
	padding: 50px 0;
	margin: 0;
	right: 0;
}

.barra-footer {
	border-right: 3px solid #ce242a;
	height: 70px;
	margin-top: 1.2rem;
}

.whats, .face, .link, .git {
	transition: 1s;
}

.whats:hover {
	color: #a9e34b;
	transition-delay: .0.5s;
	transition-duration: 1s;
	font-size: 2.1rem;
}

.face:hover {
	color: #4267b2;
	transition-delay: .0.5s;
	transition-duration: 1s;
	font-size: 2.1rem;
}

.link:hover {
	color: #0077b5;
	transition-delay: .0.5s;
	transition-duration: 1s;
	font-size: 2.1rem;
}

.git:hover {
	color: #24292e;
	text-shadow: 0px 0px 3px rgba(255, 255, 255, .5);
	transition-delay: .0.5s;
	transition-duration: 1s;
	font-size: 2.1rem;
}

.tooltips {
	visibility: hidden;
	width: 120px;
	background-color: #000;
	color: #ce242a;
	text-align: center;
	border-radius: 6px;
	padding: 5px 0;
	font-family: Comfortaa;
	font-size: 13px;
	/* Posição do balão */
	position: absolute;
	z-index: 1;
	bottom: 130%;
	left: 50%;
	margin-left: -60px;
}

i:hover .tooltips {
	visibility: visible;
	text-shadow: none;
	box-shadow: 0px 0px  .8px rgba(255, 255, 255, .5);
}

.icones {
	height: inherit;
	position: absolute;
	width: 50%;
	padding: 0;
	text-align: center;
	right: 0px;
	top: 0;
}

.texto-icones {
	width: 38%;
	position: absolute;
	left: 0;
	height: inherit;
	text-align: center;
	height: inherit;
}

.imagens-icones {
	width: 50%;
	position: absolute;
	right: 0;
	height: inherit;
	text-align: center;
	padding-right: 3rem;
}
.icone {
	top: 2.5rem;
	color: #fff;
	text-decoration: none;
	font-size: 2em;
	position: relative;
	display: inline-block;
	bottom: 0;
	padding-right: 1.5rem;
	/* float: center; */	
}