html,body{
	margin:0;
	padding:0;
	overflow-x: hidden;
	font-family: 'Roboto', sans-serif;
	background-color: #252526;
	color: #B9B9B9;
}

section{
	position:relative;
	margin: 10% auto;
	padding: 5%;
	width: 80%;
	background-color: #1E1E1E;
	border-radius: 10px;
	z-index: 10;
}

h1{
	color: #C586C0;
}

h2{
	margin-left: 5%;
	color: #89C1DE;
}
p{
	color: #B9B9B9;
}
a{
	color: inherit;
}
a:hover{
	cursor : pointer;
}
orange{
	color: #CE9178;
}
gray{
	color: #B9B9B9;
}
green{
	color: #4EC8AF;
}

progress {
	display:inline-block;
	width:70%;
	vertical-align:middle;

	appearance: none;
	border:none;

	color: #4EC8AF;
	background: #252526;
}

progress::-moz-progress-bar {
	background: #4EC8AF;
}
progress::-webkit-progress-value {
	background: #4EC8AF;
}
progress::-webkit-progress-bar {
	background: #252526;
}
/**

HEADER

**/
#en-flag:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/languages/en-flag-green.png?raw=true');
}
#pt-flag:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/languages/pt-flag-green.png?raw=true');
}
#fr-flag:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/languages/fr-flag-green.png?raw=true');
}
#de-flag:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/languages/de-flag-green.png?raw=true');
}
img#neuralnetwork{
	position: absolute;
	width:100%;
	z-index: 1;
}
header {
	position: fixed;
	display: inline-flex;
	padding:  1% 1% 0;
	width: 98%;
	z-index: 100;
	background-color: #1E1E1E;
	box-shadow: #4EC8AF 0 1px 0 0;
}
@media (min-width: 801px) {
	div#sections{
		width: 80%;
		vertical-align: middle;
	}
	div.lang {
		margin-left: auto;
		width: 20%;
	}
	div.lang a img{
		width: 1.5em;
		height: auto;
	}
}
div.lang{
 	text-align: right;
}




/** 

ABOUT 

**/
#profileDiv .social{
	display: inline-flex;
	margin: 5% 0;
	width: 100%;
}
#profileDiv .social a{
	margin: auto
}
img.social_profile{
	padding: 2%;
	margin: auto 10%;
	height : 20px;
	width : 20px;
}

div.about{
	margin: 10% 0 10% 10%;
}
div#aboutDiv.col{
	padding-right: 0;
}

.interests{
	display: inline-block;
	margin-left: 10%;
}
.col_interests{
	display: inline-block;
	vertical-align: center;
	width: 46%;
	margin: 1%;
}
.interests_icon{
	width: 10%;
}
@media (min-width: 801px){
	section#about{
		display: block;
		padding: 0;
		margin: 5% 0 0;
		width: 100%;
		height: 70%;
		background-color: transparent;

	}

	section#about div.col{
		position: relative;
		display: inline-block;
		margin: 5%;
		padding: 5%;
		width: 29.5%;
		height: 90%;
		background-color: #1E1E1E;
		border-radius: 10px;

	}

	#profilepic{
		width: 60%;
		border-radius: 100%;
	}
	section#about div.col div.profile{
		font-size: 1.5em;
	}
	.about_icon{
		margin: 1%;
		width: 5%;
	}
}
/** 

SKILLS 

**/
@media (min-width: 801px) {
	div.col {
		display: inline-block;
		vertical-align: middle;
		width: 50%;
	}

	#skills.languages {
		display: block;
	}
	#skillGroup{
		padding-left: 5%;
	}
	div.skillLine {
		display: inline-block;
		text-align: left;
		width: 40%;
		margin: 5%;
	}

	div.skillLine label {
		display: inline-block;
		vertical-align: middle;
		width: auto;
		margin-left: 5%;
	}

	img.skill {
		display: inline-block;
		vertical-align: middle;
		margin: auto 1%;
		height: 50px;
		width: auto;
	}
}
/**

Formation

**/
@media (min-width: 801px) {
	img.institution {
		float: right;
		height: 100px;
		width: 100px;
	}
}
div.institutionGroup{
	margin: auto 10%;
}
/** 

Publications 

**/
@media (min-width: 801px) {
	img.publications {
		height: 300px;
		width: 200px;
	}
}
.publicationsGroup {
	display: flex;
	margin-left: 5%;
	width: 90%;
}

.pub_info{
	min-width: 70%;
}
.pub_type{
	display: inline-block;
	width: 30%;
	border-radius: 5px;
	padding: 1%;
	margin: 1%;
	background-color: #CE9178;
	color : #252526;
	text-decoration: none;
	text-align: center;
}
.pub_type:hover{
	background-color:#4EC8AF;
	color : #252526;
	cursor: pointer;
}

.pub_award{
	display: inline-block;
	width: 30%;
	border-radius: 5px;
	padding: 1%;
	margin: 1%;
	background-color: gold;
	color : #252526;
	text-decoration: none;
	text-align: center;
}

.pub_date{
	display: inline-block;
	width: 20%;
	border-radius: 10px;
	padding: 1%;
	margin: 1%;
	background-color: transparent;
	color : #4EC8AF;
	border: #4EC8AF solid 1px;
	text-decoration: none;
	text-align: center;
}

.pub_imgbox {
	display:inline-block;
	margin: 0;
	text-align: center;
	vertical-align: middle;
	min-width: 30%;
}

/** 

Certifications 

**/
@media (min-width: 801px) {
	img.certifications {
		height: 100px;
		width: 100px;
	}

	.certificationsGroup {
		display: block;
		margin-left: 10%;
	}

	.imgbox {
		display:inline-block;
		margin: auto;
		text-align: center;
		vertical-align: middle;
		min-width: 50%;
	}
}
/** 

PROJECTS 

**/

div.projectInfo {
	margin: auto 10%;
}
a.try{
	padding: 0.5% 10%;
	margin : 1%;
	border-radius: 10px;
	color : #252526;
	background-color : #CE9178;
	text-decoration: none;
}
a.try:hover{
	background-color: #4EC8AF;
}
/** 

CONTACT 

**/
div#contactDiv{
	align-items: center;
	}
	div#contactDiv input{
		margin: auto 10%;
		padding: 1%;
		width : 80%;
		border: none;
		border-radius: 10px;
	}
	
	div#contactDiv textarea{
		margin: auto 10%;
		padding: 1%;
		width : 80%;
		border: none;
		border-radius: 10px;
		resize:vertical;
	}
	
	div#contactDiv button{
		margin: auto 10%;
		padding: 1%;
		width : 82%;
		border: none;
		border-radius: 10px;
		color: #252526;
		background-color: #CE9178;
	}
	div#contactDiv button:hover{
		cursor: pointer;
		background-color: #4EC8AF;
	}
/** 

FOOTER 

**/
footer{
	text-align: center;
	background-color: transparent;
}
img.footer{
	margin: auto 1%;
	height : 20px;
	width : 20px;
}
#github:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/github-green.png?raw=true');
}
#linkedin:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/linkedin-green.png?raw=true');
}
#x:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/x-green.png?raw=true');
}
#researchgate:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/research_gate-green.png?raw=true');
}
#orcid:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/orcid-green.png?raw=true');
}
#cisuc:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/cisuc-green.png?raw=true');
}
#google_scholar:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/google_scholar-green.png?raw=true');
}
#ciencia_vitae:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/ciencia_vitae-green.png?raw=true');
}
#scopus:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/scopus-green.png?raw=true');
}
#web_of_science:hover{
	content: url('https://github.com/DylanPerdigao/dylanperdigao.github.io/blob/main/icons/social/web_of_science-green.png?raw=true');
}
/*

ANIMATION

 */
/*HTML*/
html{
	animation: fadein 2s;
}
@keyframes fadein {
	0% {
		opacity: 0;
		transform: scale(1.01);
	}
	70% {
		opacity: 0;
		transform: scale(1.01);
	}
	100%{
		opacity: 1;
	  	transform: none;
  	}
}
/*SECTIONS*/
.square {
	opacity: 0;
	transform: scale(1.2);
}
@media (prefers-reduced-motion: no-preference) {
	.square {
		transition: opacity 1.5s ease, transform 1.5s ease;
	}
}
.square-transition {
	opacity: 1;
	transform: none;
}