/*Fichier CSS gérant la totalité de la mise en forme du site*/


/*permet d'avoir la police rétro du site
ATTENTION Firefox n'accepte pas les url qui n'ont pas https, les liens d'url local ne sont donc pas prit en compte
Il faudra l'adapter lorsque les éléments seront mis en ligne*/
@font-face {
    font-family: bit-Operator ;
    src: url('../police/8bit/8bitoperatorplus-bold-webfont.woff2') format('woff2'),
         url('../police/8bit/8bitoperatorplus-bold-webfont.woff') format('woff');
}

/*Permet de modifier l'espace entre le titre et le menu en fonction de la taille de l'écran
Plus l'écran sera petit, plus l'espace sera grand*/


/*ceci concerne le Titre principal de la page d'accueil*/
@media (max-width:  860px){
	.titre{
		padding-top : 1em;
	}
	.video{
		height: 30em;
	}
}


@media only screen and (max-width:  475px){
	.titre{
		padding-top : 2.25em;
	}
}




/*Même principe mais pour le titre de la page description.html*/
@media only screen and (max-width:  1400px){
	#descriptionTitre{
		padding-top : 0.5em;
	}
}


@media only screen and (max-width:  860px){
	#descriptionTitre{
		padding-top : 2em;
	}
}

@media only screen and (max-width:  475px){
	#descriptionTitre{
		padding-top : 3.75em;
	}
}





/*Même principe mais pour le titre de la page personnages.html*/
@media only screen and (max-width:  1300px){
	#personnagesTitre{
		padding-top : 0.5em;
	}
}



@media only screen and (max-width:  860px){
	#personnagesTitre{
		padding-top : 2em;
	}
}

@media only screen and (max-width:  475px){
	#personnagesTitre{
		padding-top : 3.5em;
	}
}



/*Même principe mais pour le titre de la page avis.html*/
@media only screen and (max-width:  1400px){
	#avisTitre{
		padding-top : 0.5em;
	}
}


@media only screen and (max-width:  860px){
	#avisTitre{
		padding-top : 2em;
	}
}

@media only screen and (max-width:  475px){
	#avisTitre{
		padding-top : 3.5em;
	}
}



/*il n'y a pas de scroll horizontal
tous les éléments du site auront la police rétro*/
html{
	height: 100%;
	margin : 0;
	padding: 0;
	max-width: 100%;
  overflow-x: hidden;
  font-family: bit-Operator;
}

/*il s'agit de la grille principale
j'aurais aimé utiliser la technique que nous a montré monsieur Domergue mais je n'arivais pas à la faire fonctionner et je devais avancer...
J'ai donc opté pour cette solution qui fonctionne mais qui nécessite beaucoup plus de css à cause des classes à définir à chaque éléments de la grille
il y a 12 colonnes séparées de 32px et aucun pixel de séparation entre les lignes
il n'y a pas de nombre de lignes défini
le fond est noir
étant donné qu'il y a le scroll vertical, il est nécessaire de mettre 
un léger margin pour éviter que les images et textes ne se trouvent derrière le scroll*/
.grid-container{ 
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(0px, auto);
	grid-column-gap: 32px;
	grid-row-gap: 0;
	background-color: #000000;
	padding: 1em;
}

/*les éléments lisés feront 23px de taille de police avec un texte centré de couleur blanche
j'ai utilisé l'unité de mesure vmax parce que cela permet d'adapter la police à la taille du viewport*/
.grid-container > div, nav, footer, section, article, aside, h1, h2, h3, p, figcaption{
	text-align: center;
	font-size: 1.4vmax;
	color: #ffffff;
}

/*utilisé principalement par les éléments dans les grilles voulent prendre tout l'espace de la cellule*/

.gros{
	width: 100%;
}

.center{
	text-align: center;
	align-self: center;
}

.espaceHaut{
	margin-top: 3em;
}






/*le css ci dessous correspond à celui du menu*/


/*définit la taille du logo ainsi qu'une légère marge (.5 = 0.5)*/
.logo img{
	width: 75px;
	height: auto;
	margin-left: .5em;
	margin-top: .5em;
}

/*définit une marge entre chaque onglet*/
.onglet{
	margin-left: 1em;
	margin-right: 1em;
}


/*le titre possède la plus grande taille de texte
étant donné que le menu est fixe, il y a une marge entre le haut de la page et lui
il y en a également une vers le bas pour faire en sorte qu'il ne soit pas collé avec l'élément du bas*/
.titre{
	font-size: 5vmax;
	grid-column: 1 / 13;
	grid-row: 2;
	margin-bottom: 10px;
	margin-top: 1em;
}

/* menu nav 
la position est fixée à l'image
il y a une bordure blanche en dessous du menu
top 0 fixe le menu en haut
z-index 1 permet de définir le menu au 1er plan, sinon certains éléments auraient pu passer devant le menu en scrollant*/
nav{
	background-color: #000000;
	vertical-align: center;
	position: fixed;
	width: 97%;
	grid-row: 1;
	grid-column: 1 / 13;
	border-bottom: solid;
	border-color: white;
	border-width: 3px;
	font-size: 1.4vmax;
	top: 0;
	z-index: 1;
}

nav a{
	color: white;
	text-align: center;
	text-decoration: none;
	float: left;
}

/* Pas de puce devant la liste
Le contenu sera rogné ou caché */
nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

/* Pas de puce devant la liste*/
nav ul > li {
	display: inline-block;
	margin-top: .5em;
}

/* La balise nav ul li a sera disposée en bloc 
les liens ne seront pas soulignés*/
nav ul > li a {
 	display: block;
 	color: white;
 	text-align: center;
	padding: 14px 16px;
 	text-decoration: none;
}

/* Au survol de la souris (:hover) on aura :
Une couleur de fond html #dc6309
Et du texte de couleur noire
 */
nav ul > li a:hover {
 	background-color: #01c5ff;
 	color: black;
}








/*css pour l'easter egg, le rend caché mais pas introuvable*/
.dogo, .dogo > button{
	background-color: #000000;
	height: 50px;
	border : solid;
	border-width: .3px;
	border-color: #111111;
}

.dogo{
	grid-column: 12;
	grid-row: 3;
	padding: 0;
	margin:  0;
}

/* 3 / 11 définit que la vidéo prend presque toute la largeur avec 2 colonnes à gauche et à droite*/
.video{
	grid-column: 3 / 11;
	grid-row: 3;
	height: 40em;
	width: 100%;
}









/*le css ci dessous correspond à celui de la zone de téléchargement du jeu*/


/*les h2 possède une grosse police étant donné qu'il s'agit de sous-menus*/
#comment{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 4;
}



/*les images possèdent une position relative pour pouvoir être placées correctement*/
.boutonPC{
	grid-column: 3 / 5;
	grid-row: 5;
	text-align: center;
	align-self: center;
	position: relative;
}


/*l'image que l'on veut afficher au survol ne doit pas être affichée
on la met en position absolute pour qu'elle soit au même endroit que l'image de base
left 0 permet d'éviter les marges*/
.boutonPC .PcHover {
    display: none;
    position: absolute;
    left: 0;
}

/*lorsqu'on survol l'image, l'image de survol devient visible et s'aligne*/
.boutonPC:hover .PcHover {
    display: inline;
    text-align: center;
	align-self: center;
}



.boutonPS4{
	grid-column: 6 / 8;
	grid-row: 5;
	text-align: center;
	align-self: center;
	position: relative;
}

.boutonPS4 .PS4Hover {
    display: none;
    position: absolute;
    left: 0;
}
.boutonPS4:hover .PS4Hover {
    display: inline;
    text-align: center;
	align-self: center;
}



.boutonSwitch{
	grid-column: 9 / 11;
	grid-row: 5;
	text-align: center;
	align-self: center;
	position: relative;
}

.boutonSwitch .SwitchHover {
    display: none;
    position: absolute;
    left: 0;
}
.boutonSwitch:hover .SwitchHover {
    display: inline;
    text-align: center;
	align-self: center;
}








/*le css ci dessous correspond à celui de la description de Deltarune*/

#description{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 6;
}

.fontaine{
	grid-column: 3 / 11;
	grid-row: 7;
}




.presentationDelta{
	text-align: center;
	grid-column: 2 / 12;
	grid-row: 8;
}

/*le texte à côté d'une image est aligné pour faire comme s'il était collé à elle*/
.rapportUndertale{
	text-align: right;
	grid-column: 1 / 7;
	grid-row: 9;
	align-self: center;
}

.presentePerso{
	grid-column: 7 / 13;
	grid-row: 9;
}

.memeUnivers{
	text-align: center;
	grid-column: 1 / 7;
	grid-row: 10;
}

.redirectionInfos{
	grid-column: 8 / 12;
	grid-row: 10;
	align-self: center;
	height: 35%;
}





/*le css ci dessous correspond à celui de la musique*/

#musique{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 11;
}

.musiqueParaph1{
	grid-column: 1 / 5;
	grid-row: 12 / 14;
}

.musiqueParaph2{
	grid-column: 1 / 5;
	grid-row: 14 / 16;
}


/*Le display flex et les options dessous permettent de faire en sorte que l'image soit centrée par rapport à sa position dans la grille*/
.imgMusique{
	grid-column: 9 / 13;
	grid-row: 12 / 14;
	display: flex;
  justify-content: center;
  align-items: center;
  margin: auto;
  margin-left: auto;
  margin-right: auto;
}

/*concerne le texte au dessus du contrôle de musique*/
figure > figcaption{
	text-align: left;
	padding-left: 1em;
}


.emptyTown{
	grid-column: 5 / 9;
	grid-row: 12;
	margin: 0;
}

.field{
	grid-column: 5 / 9;
	grid-row: 13;
	margin: 0;
}

.beforeTheStory{
	grid-column: 5 / 9;
	grid-row: 14;
	margin: 0;	
}

.worldRevolve{
	grid-column: 5 / 9;
	grid-row: 15;
	margin: 0;
}

.cyber{
	grid-column: 9 / 13;
	grid-row: 14;
	text-align: center;
	margin: 0;
}

.bigShot{
	grid-column: 9 / 13;
	grid-row: 15;
	text-align: center;
	margin: 0;
}

/*Permet de faire en sorte que tous les audio prenne la taille de la cellule associée*/
.emptyTown > audio ,.field >audio, .beforeTheStory > audio, .worldRevolve > audio, .cyber >audio, .bigShot > audio{
width: 100%;
}

.redirectionMusique{
	grid-column: 1 / 5;
	grid-row: 16;
	align-self: center;
	height: 100%;
	padding: 5px;
}





/*le css ci dessous correspond à celui de la desciption des personnages*/

#personnages{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 17;
}

.para1GPerso{
	margin: 0;
	padding: 0;
	text-align: right;
	grid-column: 1 / 5;
	grid-row: 18;
}

.para2GPerso{
	text-align: right;
	margin: 0;
	padding: 0;
	grid-column: 1 / 5;
	grid-row: 19;
}

.para3GPerso{
	text-align: right;
	grid-column: 1 / 5;
	grid-row: 20 / 22;
}

.imgPerso{
	grid-column: 5 / 9;
	grid-row: 18 / 22;
}

.para1DPerso{
	margin: 0;
	padding: 0;
	text-align: left;
	grid-column: 9 / 13;
	grid-row: 18 / 20;
}

.para2DPerso{
	text-align: left;
	grid-column: 9 / 13;
	grid-row: 20;
}

.redirectionPerso{
	margin: 0;
	padding: 0;
	grid-column: 9 / 13;
	grid-row: 21;
}





/*le css ci dessous correspond à celui de la boutique*/

/*j'ai défini l'image de la boutique comme une grille pour réussir à définir une zone cliquable pour la redirection
qui puisse coller à ce qui est affiché sur l'image.
la zone cliquable correspond donc grâce à la définition d'une certaine cellule de la grille de l'image*/
.gridBoutique{
	grid-column: 1 / 13;
	grid-row: 23 / 24;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(0px, auto);
	grid-column-gap: 32px;
	grid-row-gap: 0;
}

#imgBoutique{
	padding-top: 4em;
	grid-column: 1 / 13;
	grid-row: 1 / 13;
}

.accesBoutique{
	grid-column: 9 / 12;
	grid-row: 7;
	width: 100%;
	height: 300%;
	margin-top: 2em;
}




/*le css ci dessous correspond à celui de l'avis*/

#avis{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 25;
}

.imgAvis{
	grid-column: 1 / 6;
	grid-row: 26 / 30;
	margin-bottom: 4em;
}

.para1Avis{
	grid-column: 6 / 13;
	grid-row: 26;
}

.para2Avis{
	grid-column: 6 / 13;
	grid-row: 27;
}

.para3Avis{
	grid-column: 6 / 13;
	grid-row: 28;
}

.redirectionAvis{
	margin: 0;
	padding: 0;
	grid-column: 7 / 12;
	grid-row: 29;
	margin-bottom: 4em;
}



/*le css ci dessous correspond à celui du footer*/


/*section pour revenir en haut
Il s'agit donc d'une grille de 12 colonnes avec des lignes de minimum 5px
Il n'y a pas de goutières, j'ai défini la bordure de droite pour qu'elle fasse un trait blanc*/
.gridRevenirHaut{ 
	grid-column: 1 / 5;
	grid-row: 30;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
	border-right: solid;
	border-color: #ffffff;
	border-width: 8px;
}

.revenirHaut{
	font-size: 2vmax;
	grid-column: 1 / 13;
	grid-row: 1;
	height: 50%;
}

.retourHaut{
	grid-column: 2 / 12;
	grid-row: 2;
}



/*section de navigation
Il s'agit donc d'une grille de 12 colonnes avec des lignes de minimum 5px
Il n'y a pas de goutières, j'ai défini la bordure de droite pour qu'elle fasse un trait blanc*/
.gridNav{
	grid-column: 5 / 9;
	grid-row: 30;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
	border-right: solid;
	border-color: #ffffff;
	border-width: 8px;
} 

/*alligne le texte de navigation vers la gauche*/
.gridNav > p{
	text-align: left;
}

/*cette technique permet de centrer les images dans les grilles de navigation et de redirection vers le haut*/
.gridNav > img, .gridRevenirHaut > img{
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.navigation{
	font-size: 2vmax;
	grid-column: 1 / 13;
	grid-row: 1;
}

/*il y a 6 paragraphes correspondant à chaques éléments de navigation*/
.para1Foot{
  grid-column: 4 / 13 ;
  grid-row: 2;
}

.para2Foot{
  grid-column: 4 / 13;
  grid-row: 3;
}

.para3Foot{
  grid-column: 4 / 13;
  grid-row: 4;
}

.para4Foot{
  grid-column: 4 / 13;
  grid-row: 5;
}

.para5Foot{
  grid-column: 4 / 13;
  grid-row: 6;
}

.para6Foot{
  grid-column: 4 / 13;
  grid-row: 7;
}


/*il y a une image devant chaque redirection pour coller plus à l'ambiance de Deltarune*/
.puce1{
  width: 70%;
  grid-column: 1/3;
  grid-row: 2;
}

.puce2{
width: 70%;
  grid-column: 1/3;
  grid-row: 3;
}

.puce3{
  width: 70%;
  grid-column: 1/3;
  grid-row: 4;
}

.puce4{
  width: 70%;
  grid-column: 1/3;
  grid-row: 5;
}

.puce5{
  width: 70%;
  grid-column: 1/3;
  grid-row: 6;
}

.puce6{
  width: 70%;
  grid-column: 1/3;
  grid-row: 7;
}


/*section pour les contacts
Il s'agit donc d'une grille de 12 colonnes avec des lignes de minimum 5px
Il n'y a pas de goutières*/
.gridContact{
	grid-column: 9 / 13;
	grid-row: 30;
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
}

.contact{
	font-size: 2vmax;
	grid-column: 1 / 13;
	grid-row: 1;
}

.siteOfi{
	grid-column: 1 / 13;
	grid-row: 2;
}

.paraTwitter{
	grid-column: 4 /13;
	grid-row: 3;
	align-self: center;
}

.twitter{
	grid-column: 1 / 4;
	grid-row: 3;
}


.paraSpotify{
	grid-column: 4 / 13;
	grid-row: 4;
	align-self: center;
}

.spotify{
    grid-column: 1 / 4;
	grid-row: 4;
}


.paraYoutube{
    grid-column: 4 / 13;
	grid-row: 5;
	align-self: center;
}

.youtube{
    grid-column: 1 / 4;
	grid-row: 5;
}


/*section du copyright
j'ai défini la bordure du haut pour qu'elle fasse un trait blanc*/

.paraCopyright{
	grid-column: 1 / 13;
	grid-row: 31;
	border-top: solid;
	border-color: #ffffff;
	border-width: 5px;
	margin-top: 2em;
	padding-top: 2em;
}

.paraLegal{
	grid-column: 1 / 13;
	grid-row: 32;
}

/*j'ai fait en sorte qu'il n'y ai pas de couleur ou de soulignement pour les liens externes dans le footer
J'ai mit text-decoration : none au lieu de : 0 car sinon ça ne fonctionne pas sur Firefox ou edge*/
.gridContact a, .gridNav  a, .paraLegal a{
	text-decoration: none;
	color: #ffffff;
}

/*changement de couleur des liens externes lorsqu'on les survol*/
.gridContact a:hover, .gridNav  a:hover, .paraLegal a:hover{
	color: #01c5ff
}




/*permet de faire en sorte que le déplacement par ancrage s'effectue correctement éttant donné que le menu est fixe
S'il n'y avait pas ces paramètres, le titre des parties serait sous le menu, ce qui n'est pas très esthétique*/

#comment, #description, #musique, #personnages, #avis{
	margin-top: 0;
	padding-top: 1.5em;
}





/*le css ci-dessous concerne la page description.html
Il n'y a que de la disposition*/


#descriptionTitre{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 6;
	margin-top: 1em;
}

.memeUniversDescri{
	text-align: center;
	grid-column: 1 / 13;
	grid-row: 10;
}

.imgField{
  grid-column: 1 / 7;
  grid-row: 11;
  	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.imgCyber{
  grid-column: 7 / 13;
  grid-row: 11;
}

.para1Descri{
	grid-column: 1 / 13;
	grid-row: 12;
}

.imgSchool{
	grid-column: 1 / 7;
	grid-row: 13 / 15;
}

.para1DDescri{
	grid-column: 7 / 13;
	grid-row: 13;
	align-self: center;
}

.para2DDescri{
	grid-column: 7 / 13;
	grid-row: 14;
	align-self: center;
}

.para2Descri{
	grid-column: 1 / 13;
	grid-row: 15;
}

.imgFall{
	grid-column: 2 / 12;
	grid-row: 16;
}

.para3Descri{
	grid-column: 1 / 13;
	grid-row: 17;
}

.para1GDescri{
    grid-column: 1 / 7;
    grid-row: 18;
    align-self: center;
}

.para2GDescri{
	grid-column: 1 / 7;
	grid-row: 19;
	align-self: center;
}

.imgMenuCombat{
	grid-column: 7 / 13;
	grid-row: 18 / 20;
}

.para3GDescri{
    grid-column: 1 / 7;
    grid-row: 20;
    align-self: center;
}

.para4GDescri{
	grid-column: 1 / 7;
	grid-row: 21;
	align-self: center;
}

.para5GDescri{
    grid-column: 1 / 7;
    grid-row: 22;
    align-self: center;
}

.imgCombat{
	grid-column: 7 / 13;
	grid-row: 20 / 23;
	align-self: center;
}



/*le css ci-dessous concerne la page personnages.html*/

#personnagesTitre{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 17;
	margin-top: 1em;
}

.kris{
	grid-column: 2 / 4;
	grid-row: 18;
	text-align: center;
	align-self: center;
	position: relative;
}

.susie{
	grid-column: 5 / 9;
	grid-row: 18;
	width: 63%;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.ralsei{
	grid-column: 10 / 12;
	grid-row: 18;
	width: 105%;
}


/*Cet élément est une grille concernant les informations sur le personnage de Kris
Il s'agit d'un ID pour que je puisse utiliser le javascript et récupérer l'élément
La grille est cachée de base jusqu'à ce que l'utilisateur clique sur la photo de Kris*/
#paraKris{
	grid-column: 1 / 13;
	grid-row: 19;
	display: grid;
	visibility: hidden;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
}

/*Cet élément est une grille concernant les informations sur le personnage de Susie
Il s'agit d'un ID pour que je puisse utiliser le javascript et récupérer l'élément
La grille est cachée de base jusqu'à ce que l'utilisateur clique sur la photo de Susie*/
 #paraSusie{
 grid-column: 1 / 13;
	grid-row: 19;
	display: grid;
	visibility: hidden;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
 }

/*Cet élément est une grille concernant les informations sur le personnage de Ralsei
Il s'agit d'un ID pour que je puisse utiliser le javascript et récupérer l'élément
La grille est cachée de base jusqu'à ce que l'utilisateur clique sur la photo de Ralsei*/
 #paraRalsei{
 	grid-column: 1 / 13;
 	grid-row: 19;
	display: grid;
	visibility: hidden;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
 }

 .nomPerso{
	grid-column: 2 / 12;
	grid-row: 1;
	font-size: 3.5vmax;
}

.para1Perso{
	grid-column: 2 / 6;
	grid-row: 2;
}

.para2Perso{
	grid-column: 2 / 6;
	grid-row: 3;
}

.img1Perso{
	grid-column: 7 / 9;
	grid-row: 2 / 4;
	width: 80%;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.img2Perso{
	grid-column: 10 / 12;
	grid-row: 2 / 4;
	width: 80%;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.img1PersoRalsei{
	grid-column: 7 / 9;
	grid-row: 2 / 4;
	width: 100%;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.para3Perso{
	grid-column: 7 / 12;
	grid-row: 4;
	align-self: center;
}

.para4Perso{
	grid-column: 7 / 12;
	grid-row: 5;
	align-self: center;
}

.imgActionPerso{
	grid-column: 3 / 6;
	grid-row: 4 / 6;
	margin-bottom: 1em;
}





/* Le css ci-dessous correspond à la page avis.html*/

#avisTitre{
	font-size: 3.5vmax;
	grid-column: 1 / 13;
	grid-row: 25;
	margin-top: 1em;
}

/*zone concernant la saisie d'informations pour le formulaire, c'est une grille*/
.zoneAvis{
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: minmax(5px, auto);
	grid-column-gap: 0;
	grid-row-gap: 0;
	grid-column: 2 / 12;
	grid-row: 26;
	margin-bottom: 4em;
}

.note{
	grid-column: 2 / 12;
	grid-row: 1;
}

.paraConnaissance{
	grid-column: 1 / 7;
	grid-row: 2;
}

.connaissanceDelta{
	grid-column: 8 / 10;
	grid-row: 2;
	text-align: left;
}

.paraDejaJoue{
	grid-column: 1 / 7;
	grid-row: 3;
}

.dejaJoueDelta{
	grid-column: 8 / 10;
	grid-row: 3;
	text-align: left;
}

.paraEnvie{
	grid-column: 1 / 7;
	grid-row: 4;
}

.envieDelta{
	grid-column: 8 / 10;
	grid-row: 4;
	text-align: left;
}

.paraPk{
	grid-column: 1 / 7;
	grid-row: 5;
}

.pk{
	grid-column: 8 / 13;
	grid-row: 5;
	text-align: left;
}

.paraBug{
	grid-column: 1 / 7;
	grid-row: 6 ; 
	margin-bottom: 2em;
}

.bug{
	grid-column: 8 / 13;
	grid-row: 6;
	font-family: bit-Operator;
    font-size: 0.8vmax;
    margin-bottom: 2em;
}

.paraAmeliorations{
	grid-column: 1 / 7;
	grid-row: 7;
	margin-bottom: 2em;
}

.ameliorations{
	grid-column: 8 / 13;
	grid-row : 7;
	font-family: bit-Operator;
    font-size: 0.8vmax;
    margin-bottom: 2em;
}

.envoyer{
	grid-column: 4 / 10;
	grid-row: 8;
	height: 3em;
	width: 80%;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
    font-family: bit-Operator;
    font-size: 1.3vmax;
}



/*Ce css correspont à la page de résultat du formulaire
chaque réponses sont en bleu pour que l'on puisse les différencier facilement des questions*/

#reponses{
	font-size: 3vmax;
	grid-column: 1 / 13;
	grid-row: 1;
	padding-top: 1em;
}


.paraResNote{
	grid-column: 2 / 12;
	grid-row: 2;
	text-align: left;
}

.resNote{
	grid-column: 10;
	grid-row: 2;
	color: #01c5ff;
}

.paraResConnaissance{
	grid-column: 2 / 12;
	grid-row: 3;
	text-align: left;
}

.resConnaissance{
	grid-column: 10;
	grid-row: 3;
	color: #01c5ff;
}

.paraResDeja{
	grid-column: 2 / 12;
	grid-row: 4;
	text-align: left;
}

.resDeja{
	grid-column: 10;
	grid-row: 4;
	color: #01c5ff;
}

.paraResEnvie{
	grid-column: 2 / 12;
	grid-row: 5;
	text-align: left;
}

.resEnvie{
	grid-column: 10;
	grid-row: 5;
	color: #01c5ff;
}

.resRaison{
	grid-column: 2 / 12;
	grid-row: 6;
	text-align: left;
}

.resCheck0{
	grid-column: 3 / 12;
	grid-row: 7;
	text-align: left;
	color: #01c5ff;
}

.resCheck1{
	grid-column: 3 / 12;
	grid-row: 8;
	text-align: left;
	color: #01c5ff;
}

.resCheck2{
	grid-column: 3 / 12;
	grid-row: 9;
	text-align: left;
	color: #01c5ff;
}

.resCheck3{
	grid-column: 3 / 12;
	grid-row: 10;
	text-align: left;
	color: #01c5ff;
}

.resCheck4{
	grid-column: 3 / 12;
	grid-row: 11;
	text-align: left;
	color: #01c5ff;
}

.paraResBug{
	grid-column: 2 / 12;
	grid-row: 12;
	text-align: left;
}

.resBug{
	grid-column: 3 / 12;
	grid-row: 13;
	text-align: left;
	color: #01c5ff;
}

.paraResAmelio{
	grid-column: 2 / 12;
	grid-row: 14;
	text-align: left;
}

.resAmelio{
	grid-column: 3 / 12;
	grid-row: 15;
	text-align: left;
	color: #01c5ff;
}

.merci{
	grid-column: 2 / 12;
	grid-row: 16;
}

.susieAct{
	grid-column: 3 / 8;
	grid-row: 17;
}

.retourMenuAvis{
	grid-column: 8 / 10;
	grid-row: 17;
	display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    margin-left: auto;
    margin-right: auto;
}

.retourMenuAvis > img{
	width: 100%;
}