html
{
	background-color:black;
}

canvas {
	padding-left: 0;
	padding-right: 0;
	margin-left: auto;
	margin-right: auto;
	display: block;
	height: 97vh;
	border: 1px solid white;
	/*Les vh c'est les unités du viewport
	c'est pour que le canvas prenne toute
	la hauteur visible par l'utilisateur*/
}

#score {
	position: absolute;
	top: 50px;
	right: 400px;
	color:white;
}

#audioWrapper {
	position: absolute;
	top: 0;
	left: 0;
}

audio {
	position: relative;
	/*	display: block;*/
	
	display: none;
	width: 500px;
}

#stop {
	position: absolute;
	top: 5px;
	left: 5px;
	display:none;
}

#mute {
	position:absolute;
	top:100px;
	right : 220px;
}

#nextMusic{
	position:absolute;
	top:50px;
	right : 220px;
}

#clear_leaderBoard{
	position : absolute;
	top : 100px;
	right:350px;
}
#change_fun{
	position:absolute;
	top : 30px;
	left : 30px;
}

/* Partie polices */
@font-face 
{
    font-family: LLPIXEL3;
    src: url('../Polices/LLPIXEL3.ttf') format('truetype');
}

@font-face 
{
    font-family: myFirstFont;
    src: url('../Polices/CFPunkisnotDead-Regular.ttf') format('truetype');
}

@font-face 
{
    font-family: SuperMario;
    src: url('../Polices/SuperMario256.ttf') format('truetype');
}

@font-face 
{
    font-family: Starjout;
    src: url('../Polices/Starjout.ttf') format('truetype');
}

/* Partie vidéo */
#video-fond {
	overflow: hidden;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -2;
}

#video-fond > video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -1;
}
/* 1. Pas de support d'object-fit */

@media (min-aspect-ratio: 16/9) {
	#video-fond > video {
		height: 300%;
		top: -100%;
	}
}

@media (max-aspect-ratio: 16/9) {
	#video-fond > video {
		width: 300%;
		left: -100%;
	}
}
/* 2. En cas de support d'object-fit, écrase les règles en (1) */

@supports (object-fit: cover) {
	#video-fond > video {
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		object-fit: cover;
	}
}