/* Pour le corps de la page */
body
{
    background-color: #274C6C;
    
}

/* Pour le gros titre */
h1{
    color: #D29201;
    text-align: center;
    font-size: 40px;
    text-decoration: underline;
    font-family: "Times New Roman", cursive;
}

h3{
    color: #D29201 ;
    font-family: "Comic Sans MS", cursive;
    margin: 5px;
    padding: 5px;
}

/* Style pour les Id. Un Id peut être attribuée une seule fois. 
La syntaxe commence par # */


/* Pour le premier paragraphe */
#explication_jeu
{
    background-image:url("nombre2.jpg");
    background-repeat: repeat;
    font-family: Impact, Arial, Verdana,cursive;
    font-size: 20px;
    color: #071622;

    border: 2px solid #071622;
    
    border-radius: 10px; /* Permet d'arrondir les coins de la bordure */

    box-shadow: 6px 6px 0px #071622; /* L'ombre du cadrage sera flouté de 6px 
    sur la droite et en bas. La gauche et le haut ne seront pas flouté */
    padding: 25px 27%; /* La marge interieur par rapport au paragraphe  */
    margin: 40px; /* La marge exterieur par rapport au paragraphe */
    text-align: justify;
}

/* Le style est donné pour ces deux Id */
#valeur, #aLaRechercheDuBonNombre
{
    margin-top: 7px;
    color: #ff78b4;
    font-size: 25px;
    font-weight: bold;
    font-family: "georgia", cursive;
    text-align: center;
}


/* Style pour les class. Une class peut être attribuée à plusieurs parties. */

.paragraphe
{
    color: #219c1a;
    font-family: "Comic Sans MS", cursive;
    font-size: 25px;
    text-align: center;
    font-weight: bold;
}


/* Pour la classe de la jauge. On modifie la division */
.ConteneurGlisseur
{
    width: 95%;
    height: 50px;
    margin-left: 2%;
    margin-right: 2%;
    margin-top: 25px;
    margin-bottom: 25px;
}

/* On modifie directement le style de la jauge et ce quel que soit le naviguateur.*/
.Glisseur_nombres
{
    -webkit-appearance : none; /* cette propriété est utilisée par Chrome, Safari et opera. Le glisseur restera sous sa forme par défaut */
    -moz-appearance: none; /* cette propriété est utilisée par Firefox */
    width: 100%;
    height: 20px;
    background: #740838;
    outline: transparent;
    opacity: 0.85;
    transition: opacity 0.2s;
    -webkit-transition: 0.2s;
    border-radius: 35%;
    box-shadow: 0px 1px 10px 1px #4d854a; /* Joue sur l'ombre du curseur*/
    cursor: pointer;
}

/* Modification pour le bouton de chrome*/
.Glisseur_nombres::-webkit-slider-thumb
{
    -webkit-appearance:none;
    appearance: none;
    width: 20px; /* Modifie la largeur du bouton*/
    height: 20px;/* Modifie la hauteur du bouton*/
    background: white; /* Modifie la couleur du bouton*/
    border-radius: 20%;
}

/* Modification pour le bouton de firefox*/
.Glisseur_nombres::-moz-range-thumb
{
    -moz-appearance:none;
    appearance: none;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 20%;
}

.Glisseur_nombres::before
{
    content: '0';
    color: white;
    font-size: 1.2em;
    position: absolute;
    left: 1%;
    top: auto;
}
.Glisseur_nombres::after
{
    content: '100';
    color: white;
    font-size: 1.2em;
    position: absolute;
    right: 1%;
    top: auto;
}
.Glisseur_nombres:hover
{
    background-color: #ff78b4; 
}

.reinitialiserBouton
{
    text-align: center;
    border-radius: 20px;
    background: #F19E6F;
    border: 2px solid #F19E6F;
    padding: 10px;
    margin-top: 25px;
    color: #740838;
    font-size: 1.2em;
    font-weight: bold;
    font-family: "georgia", cursive;
}
.reinitialiserBouton:hover
{
    background-color: #D29201;
    border: 2px solid #FBE2DD;
}

/* https://openclassrooms.com/fr/courses/146276-tout-sur-le-javascript/143440-td-jeu-du-plus-ou-moins */