* {
	margin: 0;
	padding: 0;
	text-decoration: none;
	background-color: #0f151b;
	font-family: Gill Sans;
	color: #ffffff;
}

/* ---------- NAVIGATION BAR ---------- */

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

div.container {
	margin: 1em auto;
	padding: 3em 3em;
	text-align: right;
	animation: fadeIn 2s;
}

div.container a {
	color: #FFF;
	text-decoration: none;
	font: 25px Raleway;
	margin: 0px 0.8em;
	padding: 10px 10px;
	position: relative;
	z-index: 0;
	cursor: pointer;
}

div.nav a.active { color: #ffffff; }

div.nav a { color: rgba(255, 255, 255, 0.3); }

div.nav a:hover { color: #12c8d0; }

div.nav a:before, div.nav a:after {
	position: absolute;
	opacity: 0.5;
	height: 100%;
	width: 2px;
	content: '';
	background: #FFF;
	transition: all 0.3s;
}

div.nav a:before {
	left: 0px;
	top: 0px;
}

div.nav a:after {
	right: 0px;
	bottom: 0px;
}

div.nav a:hover:before, div.nav a:hover:after {
	opacity: 1;
	height: 2px;
	width: 100%;
}


/* ---------- INDEX PAGE ---------- */

.line1, .line2, .line3, .line4, .line5 {
	white-space: nowrap;
	overflow: hidden;
	margin: 0.5rem auto;
	font-size: 2rem;
	font-weight: bold;
}

.line1 { font-size: 1em; }

.line2 { font-size: 4em; }

.line3 {
	font-size: 2em;
	color: #12c8d0;
}

.line4, .line5 {
	font-size: 1em;
}

@keyframes translateHomeText {
	0% { 
		transform: translateX(-40%);
		opacity: 0;
	}
	100% { 
		transform: translateX(0);
		opacity: 1;
	}
}

.home-text {
	margin: 6em 7em;
	position: absolute;
	font-size: 1.5em;
	animation: translateHomeText 2s ease-in-out;
}

@keyframes translateHomeImg {
	0% {
		transform: translateX(45%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.home-img {
	border-radius: 40px;
	margin: 5em 70em;
	position: absolute;
	animation: translateHomeImg 2s ease-in-out;
}

@keyframes rotateYEffect {
	0% {
		transform: rotateY(0deg);
	}
	100% {
		transform: rotateY(180deg);
	}
}

#logo {
	position: absolute;
	top: 2em;
	left: 6em;
	width: 100px;
	height: 100px;
	animation: rotateYEffect 3000ms linear infinite;
}

/* ---------- PORTFOLIO PAGE ---------- */

.projectTitle {
	font-size: 3em;
	text-align: center;
	margin: 1em auto;
	padding: 0.5em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	width: 70%;
	animation: fadeIn 3s;
}

@keyframes slideBottom {
	0% {
		transform: translateY(-100%);
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		opacity: 1;
	}
}

.intro {
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 3em;
	animation: slideBottom 3s;
}

.separator { visibility: hidden; }

.separator.visible {
	text-align: center;
	align-items: center;
	width: 0%;
	margin: 5em auto;
	max-width: 10em;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	transform-origin: center;
	animation: expandLine 2s ease-out 0.5s forwards;
	visibility: visible;
}

.projectDivLeft, .projectDivRight {
	display: flex;
	max-width: 80em;
	margin: 0 auto;
	margin-bottom: 2em;
}

@keyframes slideLeft {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

@keyframes slideRight {
	0% {
		transform: translateX(-50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0);
		opacity: 1;
	}
}

.projectDivLeft { visibility: hidden; }
.projectDivRight { visibility: hidden; }

.projectDivLeft.visible {
	animation: slideLeft 3s;
	visibility: visible;
}

.projectDivRight.visible {
	animation: slideRight 3s;
	visibility: visible;
}

.projectRight, .projectLeft {
	flex: 1;
}

.titleProjectRight, .videoProjectLeft, .titleProjectLeft, .videoProjectRight {
	flex: 1;
	text-align: center;
}

.titleProjectRight, .titleProjectLeft {
	font-size: 2em;
}

.grade {
	margin: auto;
	margin-top: 0.5em;
	background-color: #5cb85c;
	max-width: 4em;
	border-radius: 0.3em;
}

.descriptionProjetRight, .descriptionProjetLeft {
	margin-top: 1em;
	font-size: 1.1em;
}

.videoLeft {
	margin-top: 2em;
	width: 320px;
	height: 180px;
	transition: transform 0.3s;
	transform-origin: center center;
}

.videoRight {
	margin-top: 2em;
	width: 320px;
	height: 180px;
	transition: transform 0.3s;
	transform-origin: center center;
}

.videoLeft:hover {
	transform: scale(3.5) translate(28.5%, 6.25%);
}

.videoRight:hover {
	transform: scale(3.5) translate(-28.5%, 6.25%);
}

@keyframes slideTop {
	0% { transform: translateY(100%); }
	100% { transform: translateY(0); }
}

#myBtn {
	display: none;
	position: fixed;
	width: 5em;
	height: 5em;
	bottom: 30px;
	right: 30px;
	border: none;
	outline: none;
	background-color: #FFF;
	color: white;
	cursor: pointer;
	padding: 15px;
	border-radius: 100%;
	animation: slideTop 1s, fadeIn 3s;
}

.arrow {
	margin-top: 0.5em;
	background-color: #FFF;
	border: solid black;
	border-width: 0 0.5em 0.5em 0;
	display: inline-block;
	padding: 1em;
	transform: rotate(-135deg);
	-webkit-transform: rotate(-135deg);
}

#myBtn:hover {
	outline: 0.3em solid #4ECDC4;
	outline-offset: 0.5em;
}

/* ---------- CONTACT PAGE ---------- */

@keyframes translateTitle {
	0% {
		transform: translateY(-70%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

.contactTitle {
	text-align: center;
	font-size: 3em;
	margin-top: 1em;
	animation: translateTitle 2s;
}

@keyframes expandLine {
    0% { width: 0%; }
    100% { width: 20%; }
}

.titleLine {
	border-bottom: 2px solid #4ECDC4;
	width: 0%;
	margin: auto;
	margin-top: 1em;
	margin-bottom: 5em;
	transform-origin: center;
	animation: expandLine 2s ease-out 0.5s forwards;
}

.contactSection {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 5em;
	text-align: center;
	max-width: 800px;
	margin: 0 auto;
}

@keyframes translateLinkedin {
	0% {
		transform: translateX(-50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

@keyframes translateGithub {
	0% {
		transform: translateY(20%);
		opacity: 0;
	}
	100% {
		transform: translateY(0%);
		opacity: 1;
	}
}

@keyframes translateMail {
	0% {
		transform: translateX(50%);
		opacity: 0;
	}
	100% {
		transform: translateX(0%);
		opacity: 1;
	}
}

.linkedin { animation: translateLinkedin 2s; }
.github { animation: translateGithub 2s; }
.mail { animation: translateMail 2s; }

.contactImg {
	display: block;
	margin: 0 auto;
}

.contactName {
	text-align: center;
	margin-top: 1em;
	font-size: 3em;
	font-weight: bold;
}

@keyframes expandLine1 {
    0% { width: 0%; }
    100% { width: 80%; }
}

@keyframes expandLine2 {
    0% { width: 0%; }
    100% { width: 60%; }
}

@keyframes expandLine3 {
    0% { width: 0%; }
    100% { width: 50%; }
}

.contactNameLine1, .contactNameLine2, .contactNameLine3 {
	border-bottom: 2px solid #4ECDC4;
	width: 0%;
	margin: auto;
}

.contactNameLine1 { animation: expandLine1 2s ease-out 1.5s forwards; }

.contactNameLine2 { animation: expandLine2 2s ease-out 1.5s forwards; }

.contactNameLine3 { animation: expandLine3 2s ease-out 1.5s forwards; }

.contactInfo {
	font-size: 1em;
	text-align: center;
	margin-top: 1.8em;
}

.contactImg {
	--s: 200px;
	--b: 8px;
	--c: #4ECDC4;
	
	width: var(--s);
	aspect-ratio: 1;
	outline: calc(var(--s)/2) solid rgba(255, 255, 255, 0.050);
	outline-offset: calc(var(--s)/-2);
	cursor: pointer;
	transition: .3s;
	border-radius: 50%;
}

.contactImg:hover {
	outline: var(--b) solid var(--c);
	outline-offset: var(--g);
}