/*
  But :     
  Auteur : Luca Dias Madeira
  Date :   07.06.2021 / V1.0
*/

nav li select, nav li input {
	background-color: #4CAF50;
	color: #333;
	font-family: arial;
	font-weight: bold;
	border-top-left-radius: 6px;
	border-top-right-radius: 6px;
	border: none;
	margin-right: 3px;
}

nav li input {
	width: 100px;
}

nav li select option {
	font-family: arial;
	font-weight: bold;
}

nav li select:hover, nav li input:hover {
	background-color: #09f5ba;
}

a {
	color: #4CAF50;
	text-decoration: none;
}

div a:visited {
	color: bisque;
}

a:hover {
	color: #09f5ba;
}

div a:hover {
	text-decoration: underline;
}



div.pg3 ul li img {
	border-radius: 12px;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 2px;
	width: 200px;
	height: 200px;
}

div.pg2 ul li img.ingredient {
	border-radius: 12px;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 2px;
	width: 200px;
	height: 200px;
}

div.pg2 ul li img.preview {
	border-radius: 12px;
	margin-top: 3px;
	margin-bottom: 0px;
	margin-left: 2px;
	height: 20%;
	width: fit-content;
}

div ul li p:first-child {
	font-family: Verdana, Arial, serif;
	font-size: smaller;
}

div ul li:first-child {
	height: auto;
	max-width: 40%;
}

div ul li p {
	padding-left: 1em;
	font-size: xx-small;
	max-width: 190px;
	text-align: center;
}

div ul li:last-child {
	padding-bottom: 0em;
	max-width: 100%;
}

div ul
/*objet de la liste flex*/
{
	list-style-type: none;
	/*élimine le point des objets de liste*/

	/*distance entre les objets*/

	padding: 0;/*npt*/
	/*distance avec les autres sections*/
	overflow: hidden;/*npt*/
	/*empêche les objets de déborder*/
	background-color: #333;
	/*couleur de fond*/
	position: relative;/*npt*/
	/*position classique*/
	width: 100%;/*npt*/
	/*largeur prise par la liste sur la page*/
	border-radius: 12px;
	/*arrondissement des bordures*/
}







/*--------------------------------------------------------------------------*/

body
/*effets généraux appliqués à la page*/
{
	background-image: url("../img/body_bg.png");
	/*image de fond*/
	background-repeat: no-repeat;
	/*ne répète pas l'image*/
	background-size: cover;
	/*modifie l'image pour tout couvrir*/
	background-attachment: fixed;
	/*empêche les trous*/
	background-color: #cccccc;
	/*couleur de fond au cas où l'image ne marche pas*/
	margin: 0px;
	/*pour que le body prenner toute la page*/
	font-family: arial;
	/*police de caractères appliqué de base*/
	color: white;
	/*couleur de police de base*/
	font-weight: bold
	/*si texte de base est gras*/
}

/*--------------------------------------------------------------------------*/

nav ul 
/*liste contenant les liens*/
{
	list-style-type: none;/*npt*/
	/*élimination du point devant chaque éléments li*/
	margin: 0;/*npt*/
	/*éliminations des distances avec les autres éléments*/
	padding: 0;/*npt*/
	/*élimination de la distance avec les bordures*/
	overflow: hidden;/*npt*/
	/*pour que les liens ne sortent pas de la zone voulue*/
	background-color: #333;
	/*couleur de fond de la barre*/
	position: fixed;/*npt*/
	/*position colée en permanence au même point de la fenêtre*/
	top: 0; /*npt*/
	/*positionne l'élément tout en haut de la page*/
	width: 100%;/*npt*/
	/*couvre la largeur totale de la page*/
	z-index: 10;/*npt*/
	/*positionne tout devant l'élément afin que d'autres éléments le cache*/
}

nav li
/*éléments de la liste de navigation*/
 {
	float: left;/*npt*/
	/*fait que les éléments se suivre horizontalement*/
	display: block;/*npt*/
	/*permet aux éléments de se suivre tels des blocks et non du texte*/
    padding-top: 14px;/*npt*/

	/*modifie distance avec bordures, augmente distance avec les autres liens*/
}

nav li:last-child
/*dernier élément de la liste, sert à aller tout en bas de la page*/
{
	float: right;/*npt*/
	/*fait venir le block à droite*/
}

nav li a
/*lien des éléments de la liste*/
{
	padding: 14px 10px;
	/*distance avec les bordures*/
}


nav #rechercherbtn a:hover, nav li a.homebutton:hover:not(.active), nav li:last-child:hover
/*liens de navigations sauf la page actuelle quand la souris passe dessus*/
{
	background-color: #111;
	/*couleur de fond quand souris sur élément*/
}

nav a.active
/*l'élément de la liste de la page active*/
{
	background-color: #4CAF50;
	/*couleur page active*/
}


.redsearch
/*pour avertir des recherches non async*/
{
	color: red;
	/*couleur du bouton*/
}