h1#title {
	position: absolute;
	font-size: 4vw;
	color: white;
	top: 50%;
	left: 50%;
	transform:translate(-50%, -50%);
	font-family: 'Quicksand', sans-serif;
}

h2#description {
	position: absolute;
	font-size: 2vw;
	color: white;
	top: 60%;
	left: 50%;
	transform:translate(-50%, -50%);
	font-family: 'Quicksand', sans-serif;
}

label {
	color: white;
}

html {
  scroll-behavior: smooth;
}

html, body {
	width: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden;
}

nav {
	font-family: 'Quicksand', sans-serif;
}

section#accueil {
	height: 100vh;
	width: auto;
}

section#section1 {
	position: static;
	width: auto;
	padding: 10vw;
	background-color: black;
}

section#section2 {
	position: relative;
	width: auto;
	padding: 10vw;
	background-color: black;
	color: white;
}

section#contact {
	position: static;
	width: auto;
	padding: 10vw;
	padding-bottom: 5vh;
	background-color: black;
	color: white;
}
/* video */

source {
	position: absolute;
	top: 50%; 
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	min-width: 100vw; 
	min-height: 100vh; 
	width: auto; 
	height: auto;
	overflow: hidden;
	background-size: cover;
}

@media (min-aspect-ratio: 16/9) {
	video {
		width:100%;
		height: auto;
	}
}

@media (max-aspect-ratio: 16/9) {
	video { 
		width:auto;
		height: 100%;
	}
}

@media (max-aspect-ratio: 16/9) {
	video {
		display: none;
	}

	body {
	background-color: black;
	}
}

#svg {
	position: absolute;
	top: 50%; 
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);
	z-index: 1;

}

@keyframes moncube {
	0% {
		transform: rotateX(100deg) rotateY(90deg);
	}
	50% {
		transform: rotateX(-100deg) rotateY(90deg);
	}
	100% {
		transform: rotateX(100deg) rotateY(270deg);
	}
}

.scene {
	position: absolute;
	top: 50%; 
	left: 50%;
	-webkit-transform: translateX(-50%) translateY(-50%);
	transform: translateX(-50%) translateY(-50%);

}
#cube {
 	width: 200px;
 	height: 200px;
 	margin: 0 auto 40px;
 	transform-style: preserve-3d;
 	transform: rotateX(45deg) rotateY(45deg);
 	animation: 8s moncube infinite;
}

#cube div {
 	position: absolute;
 	width: 200px;
 	height: 200px;
}

#cube div img {
	height: 200px;
}

#front {
	transform: translateZ(100px);
	transition: all 1s;
}

#back {
 	background: #AFA;
 	transform: translateZ(-100px);
 	transition: all 1s;
}

#left {
 	background: #FAA;
 	transform: translateX(-100px) rotateY(270deg);
 	transition: all 1s;
}

#right {
 	background: #FFA;
 	transform: translateX(100px) rotateY(90deg);
 	transition: all 1s;
}

#top {
	background: #FFA;
	transform: translateY(-100px) rotateX(90deg);
	transition: all 1s;
}

#bottom {
	background: #FFA;
	transform: translateY(100px) rotateX(270deg);
	transition: all 1s;
}

#cube:hover {
	animation-play-state: paused;
}

#cube:hover #front {
	transform: translateZ(200px);
}

#cube:hover #back {
 	background: #AFA;
 	transform: translateZ(-200px);
}

#cube:hover #left {
 	background: #FAA;
 	transform: translateX(-100px) rotateY(270deg) translateZ(100px);
}

#cube:hover #right {
 	background: #FFA;
 	transform: translateX(100px) rotateY(90deg) translateZ(100px);
}

#cube:hover #top {
	background: #FFA;
	transform: translateY(-100px) rotateX(90deg) translateZ(100px);
}

#cube:hover #bottom {
	background: #FFA;
	transform: translateY(100px) rotateX(270deg) translateZ(100px);
}

/* add */

::-webkit-scrollbar {
	width:3px;
}

::-webkit-scrollbar-thumb {
	background-color: black;
}