html,body,section {
	min-height: 100% !important;
	min-width: 100% !important;
	margin: 0;
}

@font-face {
 font-family: "Assistant-ExtraBold";
 src: url("fonts/Assistant-ExtraBold.ttf");
}
@font-face {
 font-family: "Assistant";
 src: url("fonts/Assistant-Regular.ttf");
}


.container {
	position: relative;
	display: flex;
	flex-direction: column;
	left: 60px;
	bottom: 0;
	color: #fefefe;

	font-family: "Assistant";

}


#site-landing {
	position: fixed;
	right: 0;
	bottom: 0;
	min-width: 100%;
	min-height: 100%;
	background-color: rgb(30, 30, 30);
}

.blue {
	color: #08fdd8;
}

.icone {
	height: 24px;
	width: 24px;
	fill: #08fdd8;
}

h1 {
	margin: 0;
	font-size: 4.5em;
	font-family: "Assistant-ExtraBold";
	position: relative;
	top: 8%;
	left: 5%;
}


/* NavBar */
.navbar {
	position: fixed;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	top: 0;
	padding: 0;
	background: #101010;
	color: white;
	width: 60px;
	min-height: 100%;
	z-index: 8;
}

nav {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

nav > a {
	color: #888888;
	fill: #888888;
	text-decoration: none;
	padding-top: 30px;
	padding-bottom: 30px;
	width: 60px;
	display: flex;
    align-items: center;
    justify-content: center;

}

nav > a > span {
	display: none;
	position: absolute;
}
nav > a > svg {
	position: absolute;
}


nav > a:hover {
	text-decoration: none;
	fill: #28EDED;
	color: #28EDED;
}

nav > a.active {
	text-decoration: none;
	color: #28EDED;
	fill: #28EDED;
}






/* Social Medias */
.social-medias {
	padding-bottom: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.text-hover-anim > span {
	margin-left: -1px;
}

.social-medias > a {
	padding-top: 2px;
	padding-bottom: 2px;
	text-decoration: none;
	color: #888888;
}
.social-medias > a:hover {
	text-decoration: none;
	color: #BBBBBB;
}

/* first page */


/**/

.text-intro {
	font-family: "Assistant-ExtraBold";
	margin: 0;
	font-size: 4.5em;
	position: relative;
	top: 10%;
	left: 5%;
}

.char-boing {
	display: inline-block;
}
.char-boing:hover {
	color: #08fdd8;
}
.char-boing.style-spe:hover {
	color: #A05CFF;
}

.focus-letter{
	animation:bounce 0.6s;
}
@keyframes bounce {
  0%,100%{ transform:translate(0); }
  60%{ transform:scale(1.2,0.8) translate(1px); }
  70%{ transform:scale(0.8,1.2);}
  80%{ transform:scale(1.1,0.9) translate(1px); }
  90%{ transform:scale(0.95,1.05);}
}

.warp {
	display: inline-block;
	animation: flash 2s;
	animation-iteration-count: infinite;
}
@keyframes flash {
  0%,100%{ opacity: 1; }
  24%{ opacity: 1; }
  25%{ opacity: 0; }
  75%{ opacity: 0; }
  76%{ opacity: 1; }

}

.style-spe {
	color: #A05CFF;
}


.profil {
	position: relative;
	top: 10%;
	right: 10%;
}

/* Page Profile */
.text-profil {
	margin: 0;
	font-size: 1.5em;
	position: relative;
	max-width: 50%;
	top: 15%;
	left: 5%;
}

/* Page Skills */

.cloudContainer {
	position: relative;
	display: flex;
	flex-direction: row;
	top: 10%;
	left: 2%;
	min-height: 10em !important;
	min-width: 80% !important;
}
.col-header {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	width: 100%;
	font-family: "Assistant-ExtraBold";
	font-size: 3em;
}


/* Page Projects*/

.grid {
	top: 10%;
	left: 5%;
	height: 60%;
	width: 80%;
}

.card {
	min-width: 100%;
	min-height: 100%;
}

.card-bg {
	background-repeat: no-repeat;
	background-size: cover;
}

.grid-item {
	min-height: 30%;
	min-width: 20%;
	background-color: #101010;

}

.title {
	color: white;
	font-weight: 300;
	position: absolute;
	left: 20px;
	top: 15px;
}



/* Contact */
.contact-form {
	margin: 0;

	position: absolute;
	display: flex;
	flex-direction: column;

	max-width: 50%;
	top: 30%;
	left: 5%;
}

.row > input:first-child {
	margin-right: 10px;
}

input {
	padding: 0.5em 1em 0.5em 1em;
	font-size: 1.2em;
	border: 0;
	background-color: rgb(50,50,50);
	color:rgb(180,180,180);
	min-width: 18em;
	min-height: 2em;
}
textarea {
	padding: 0.5em 1em 0.5em 1em;
	font-size: 1.2em;
	margin-left: 10px;
	margin-right: 10px;
	background-color: rgb(50,50,50);
	color:rgb(180,180,180);
	border: 0;
	min-width: 18em;
	min-height: 20em;
}





/* Events */
.event {
	position: absolute;
	display: flex;

	min-height: 120px;
	min-width: 120px;
}

.event > svg {
	min-height: 100%;
	min-width: 100%;
	overflow: visible;
}