@font-face{
	font-family: 'quicksand';
	src: url('font_face/Quicksand-Light.otf');
}
@font-face{
	font-family: 'source';
	src: url('font_face/SourceCodePro-Medium.otf');
}
@font-face{
	font-family: 'sourceBold';
	src: url('font_face/SourceCodePro-Bold.otf');
}
*{margin: 0; padding: 0;}
body{
	font-family: source;
	text-align: center;
	background-color: rgb(20,20,20);
	color: white;
	/* overflow-y: hidden; */
}

h1{
	font-family: sourceBold;
}
.section, .surSection{
	display: flex;
}

#profile{
	height: 70vh;
	background-size: cover;
	background-image: url('../media/IMG_9238.jpeg');
}
#profile .super{
	display: block;
}
#profile .top{
	height: 75%;
	text-align: left;
}
#profile .top .alignement{
	width: 50%;
	overflow-y: hidden;
}
#profile .top .alignement img{
	display: block;
	height: 25%;
	margin: auto;
}
#profile .top .alignement.left{
	text-align: left;
	visibility: hidden;
}
#profile .top .alignement.right{
	text-align: right;
}
#profile .top .alignement.left .grand{
	display: inline-block;
}
#profile .top .alignement.right .grand{
	display: inline-block;
}

#profile .bottom{
	height: 25%;
}
#profile .bottom h1{
	font-size: 4em;
}

#projects{
	background-color: #2A2A2A;
}
#projects .section, #projects .surSection{
	min-height: 80vh;
	padding-top: 10vh;
	padding-bottom: 10vh;
	background-color: #262626;
}
#projects #preview{
	height: 30vh;
	display: none;
}
#projects #preview .click{
	cursor: pointer;
	text-align: right;
	width: 5%;
	height: 100%;
	display: inline-flex;
	vertical-align: top;
	/* background: green; */
}#projects #preview .click img{
	width: 100%;
}
#projects #preview .canvas{
	display: inline-block;
	/* background: red; */
	width: 90%;
	vertical-align: top;
}
#projects #preview .subSection{
	width: 80%;
	height: 100%;
	display: inline-flex;
	vertical-align: top;
}
#projects .section#aboutMe{
	background-color: #282828;
	text-align: center;
}
#projects .section#katalogi{
	background-color: #242424;
}
#projects .section#obatala{
	background-color: #222222;
}
#projects .section#skills{
	background-color: #202020;
}

#aboutMe .details, .aboutMe .details, .subSection[num="aboutMe"] .details{
	text-align: left;
	margin-top: 3%;
}
#aboutMe h1, .subSection[num="aboutMe"] h1, .aboutMe h1{
	margin-bottom: 15px;
}
.links img{
	height: 80px;
}

.section, .surSection{
	text-align: left;
	padding-left: 10%;
	padding-right: 10%;
}
.subSection{
	text-align: left;
}.subSection[num="aboutMe"], .aboutMe .show{
	text-align: center;
}
.section .titre, .surSection .titre, .subSection .titre{
	text-align: center;
	display: block;
}
.section h1, .surSection h1, .subSection h1{
	display: inline-block;
	text-align: center;
	vertical-align: middle;
	color: white;
}
.section img, .surSection img, .subSection img{
	height: 60px;
	vertical-align: middle;
}
.section h2, .surSection h2, .subSection h2{
	margin-top: 3%;
}
.section h3, .surSection h3, .subSection h3{
	margin-top: 1%;
}

.reference{
	cursor: pointer;
}

@media (max-width: 800px){
	#profile{
		background-image: url('../media/IMG_9241.jpeg');
		height: 80vh;
	}
}