/* On crée ici le carré montrant l'image d'un dé */
.box {
  margin-left: 15%;
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 150px;
  height: 150px;
  /*  On y insère une image  */
  background-image: url(imgD.png);
  /*  On définit la transition */
  transition:
    width 2s,
    height 2s,
    rotate 2s;
}

/* On définit ici les paramètres finaux du carré une fois la transition terminée ( taille et de combien de degrés l'image doit tourner) */

/* La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.*/

.box:hover {
  width: 300px;
  height: 300px;
  rotate: 180deg;
}

/*  On crée différents paramètres par division qui sont ensuite utilisés dans le code html  */

/* Cette division se concentre sur la création de marges, la taille et la création d'un fond de couleur */
div#PY_LD{
  margin-right: 10%;
  margin-left: 3%;
  margin-top: 3%;
  margin-bottom: 30%;
  background-color: #b44646;
  color: white;
  font-size: 150%;
  font-weight: 900;

}

/* Cette division se concentre sur la création de marges et importe une image  */

div#PY_LD1{
  margin-right: 20%;
  margin-left: 6%;
  margin-top: 3%;
  margin-bottom: 3%;
  background-image: url('DLD.png');

}

/* Cette division se concentre sur la création de marges  */
div#PY_roulette{
  margin-right: 20%;
  margin-left: 3%;
  margin-top: 3%;
  margin-bottom: 3%;
 
}

/* Cette division se concentre sur l'importation d'une image, l'ajustement de sa taille et de sa position mais aussi la couleur du texte, la répartition de l'espace et la définition de la hauteur minimale. (Elle empêche ainsi que la valeur utilisée de la propriété height devienne inférieure à min-height.) */

div#idx{
  color: #f0f0f0;
  justify-content: center;
  min-height: 100vh;
  background-image: url("background.jpg");
  background-size:25%;
  background-position: top;
  position: relative;

}

/* Cette division se concentre sur la création d'un fond de couleur  */

div#choix{
  background-color: #f7e155;
  margin: 2.5%;

}

/* Cette division se concentre sur la création de marges  */

div#PY_PFC{
  margin-left: 25%;
  margin-top: 3%;
  margin-bottom: 3%;

}

/* Cette division se concentre sur la création de marges, l'importation d'une image et la couleur du texte */

div#PY_bataille{

  margin: 4%;
  background-image: url(Bbataille.png);
  color: white;
    
}

/* Cette division se concentre sur la création de marges  */

div#cas{

  margin: 4%;
  margin-left: 15%;

}
/*  On s'occupe ici des paramètres du titre principal (couleur, titre souligné, police...) */
h1 { 
  font-size: 400%;
  text-decoration:underline;
  font-family: var(--font-title);
  color: rgb(83, 213, 253);
  font-weight:unset;
  margin-left: 20%;
 
}

/*On définit ici la taille du texte du paragraphe*/
p{ 
  font-size: 130%;
}

/* les instruction h1,h2,h3,h4,h5 et h6 permettent d'écrire les titres en gras et de taille décroissante, sachant que la police h5 et h6 est inférieure à celle des paragraphes, notés 'p'   */

h3, h4{ 
  font-size: 200%; 
}
h6{ 
  font-size: 80%; 
}

/* En plus des rôles énoncés ci-dessus, h2 souligne le texte   */

h2{ 
  font-size: 200%;
  text-decoration:underline;

}


/* On définit l'affichage des boutons  */

nav {
  display: flex;
  gap: 0.5rem;
  
}

/*Les instructions suivantes permettent de modifier la couleur des boutons (liens entre les pages html)*/

a {
  flex: 1;
  /* couleur de base*/
  background-color: #0080ff;
  /* couleur de la police  */
  color: #fff; 
  /* On définit la bordure et les différents écarts de remplissage sur les quatre côtés  */
  border: 1px solid;
  padding: 0.5rem;
  text-align: center;
  text-decoration: none;
  /* temps de transition pour ne pas avoir une transition brusque*/
  transition: all 0.5s ease-out;
  font-size: 200%;
 
}

/* La pseudo-classe :hover permet de spécifier l'apparence d'un élément au moment où l'utilisateur le survole avec le pointeur, sans nécessairement l'activer.*/

a:hover,
a:focus {
  /* On sélectionne la couleur qui apparait après la transition et on indique que le texte est blanc */ 
  background-color: #ae51a5;
  color: #ffffff;
}