body { /* personnalisation et règles de base du contenu de la page Formulaire */
    background-image: url(../medias/fond.png); /* fond */
    background-repeat: no-repeat; /* pour éviter que le fond se répète pour remplir la page */
    background-size: cover; /* pour que le fond s'étende pour remplir la page */
}

h4 { /* personnalisation du titre principale du formulaire au centre de la page, mis en h4 pour le différencier des autres et éviter qu'il soit trop espacer des autres sans raison */
    font-size: 32.5px;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px #ccc; /* blanc légèrement plus foncé*/
    background-color: #fff; /* blanc */
    width: 600px;
}

h5 { /* personnalisation du bouton VALIDER, même raison que pour le titre du formulaire */
    font-size: 32.5px;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #d3ffa0; /* vert pomme */
    background-color: #d3ffa0; /* vert pomme */
    width: 200px;
}

h5:hover {
    font-size: 35px;
    background-color: #95bb6a;
    box-shadow: 0 0 10px 2px #9ab976;
    transition: font-size 0.1s ease-in-out;
}

h5:not(:hover) {
    font-size: 32.5px;
    transition: font-size 0.1s ease-in-out;
}

p { /* personnalisation de l'aide / indication / instruction en-dessous du formulaire */
    color: #ffa;
    opacity: 0.7;
    font-size: 20px;
    white-space: pre-wrap;
}

body::before { /* création et personnalisation du carré blanc servant de base au formulaire au centre de l'écran */
    content: "";
    display: block;
    width: 600px;
    height: 4000px;
    background-color: #fff; /* blanc */
    position: fixed;
    z-index: -1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 40px;
    opacity: 0.35;
    box-shadow: 0 0 30px 3px #fff; /* blanc */
  }

ul { /* personnalisation de la base des rubriques situées en haut à gauche de l'écran */
    width: 200px;
    float: left;
    margin: 0 20px 0 0;
    padding: 20px 0;
    background-color: transparent;
    display: flex;
    list-style-type: none;
    margin-left: 20px;
}

ul li { /* personnalisation des rubriques entre elles */
    margin-right: 30px;
}
  
a { /* personnalusation des rubriques individuellement */
    color: #fff; /* blanc */
    font-size: 35px;
    text-decoration: none;
    font-family: 'Montserrat', sans-serif;
}

a:hover {
    font-size: 37px;
    text-shadow: 0 0 10px #fff;
    transition: text-shadow 0.2s ease-in-out;
    transition: font-size 0.2s ease-in-out;
}

a:not(:hover) {
    font-size: 35px;
    transition: font-size 0.2s ease-in-out;
}

#valid {
	font-size: 32.5px;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #d3ffa0; /* vert pomme */
    background-color: #d3ffa0; /* vert pomme */
    width: 200px;
}

input[type="number"] {
      width: 100px; 
    }