body { /*Contenu principal du html*/
    display: flex;
    width: 100%;
    margin: 0;
    background-image: url(https://img.freepik.com/vecteurs-libre/texture-elegante-fond-blanc_23-2148438405.jpg?size=626&ext=jpg);
    background-size: cover;
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
}

header{ /*En tete de mon html dans mon cas le menu*/
    background:rgb(0, 0, 0);
    font-size: 15px;
    font-family: Georgia, 'Times New Roman', Times, serif;
    color: white;
}

.dropdownmenu{ /*Pour le menu entier*/
    display: block;
    width: 500px;
    align-items: center;
}

.dropdownmenu ul{ /*Pour les sous menus*/
    margin: auto;
    position: relative;
    padding-left: 0;
}

.dropdownmenu a,
.dropdownmenu li{ /*Pour les titres du menu*/
    padding: 10px;
    margin: 0;
    text-align: center;
    position: relative;
    list-style-type: none;
    text-decoration: none;
}

.dropdownmenu li:hover ul {/*Survolage du menu*/
    position: relative;
    top: 36px;
    z-index: 100; 
}

/* Gestion des couleurs */ 
.dropdownmenu li { 
    background-color: rgb(0, 0, 0); /* Couleur d'arriere-plan du menu */ 
}
.dropdownmenu li a {
    color: rgb(255, 255, 255); /* Couleur du texte du menu */
} 
.dropdownmenu li:hover {
    background-color:rgb(45, 166, 214); /* Couleur d'arriere-plan du menu au survol */ }
.dropdownmenu li:hover a {
    color: rgb(255, 255, 255); /* Couleur du texte du menu au survol */ 
}
.dropdownmenu ul li {
    background-color: rgb(0, 0, 0); /* Couleur d'arriere-plan des sous-menu */
}
.dropdownmenu ul li:hover {
    background-color: rgb(45, 166, 214); /* Couleur d'arriere-plan des sous-menu au survol */ 
} 
.dropdownmenu ul li a {
    color: rgb(255, 255, 255); /* Couleur du texte des sous-menu */ 
} 
.dropdownmenu ul li:hover a { 
    color: rgb(255, 255, 255); /* Couleur du texte des sous-menu au survol */
}

a{ /*Correspond a mes liens et titres de mon menu*/
    display: block;
    width: auto;
    height: 30px;
    font-size: 20px;
    line-height: 25px;

}

li{ /*La largeur de mon menu*/
    width: auto;
}

h1{ /*L'emplacement des titres de paragraphes*/
    padding-top: 5%;
    text-align: left;
}

.pagedaccueil{ /*Bloc entier pour profil et contact, emplacement sur la page et dimension*/
    display: flex;
    align-content: flex-end;
    flex-wrap: wrap;
    margin-left: 38%;

}

#profil { /*Bloc pour le profil l'emplacement du texte, emplacement sur la page*/
    flex-basis: 100%;
    padding-bottom: 50%;
    padding-right: 5%;
    padding-left: 5%;
    text-align: left;
}

#contact{ /*Bloc pour contact l'emplacement du texte, emplacement sur la page*/
    flex-basis: 100%;
    padding: 3%;
    padding-bottom: 6%;
    background-color:rgb(45, 166, 214);
    text-align: left;
}

/* #signature{
    right: 100%;
} */
#picturefirstpage img{ /*Image au dessus de menu, avoir une image ronde, et son emplacement*/
    display: block;
    height: 200px;
    width: 200px;
    border-radius: 50%;
    margin-top: 10%;
    margin-bottom: 15%;
    margin-left: 30%;
    margin-right: 30%;
}

#picturecontactpage{ /**/
    width: 300px;
    height: 200px;
    text-align: center;
}

#experienceformation{ /*Bloc entier pour le bloc experience et formation emplacement sur la page et dimension*/
    display: flex;
    flex-wrap: wrap;
    flex-basis: 40%;
    margin-left: 38%;

}

#experience{ /*Bloc pour l'experience l'emplacement du texte, emplacement sur la page*/
    width: auto;
    height: auto;
    padding: 10px;
    text-align: left;
}

#formation{ /*Bloc pour formation l'emplacement du texte, emplacement sur la page*/
    width: auto;
    height: auto;
    padding: 10px;
    text-align: left;
}

.logocontact{ /*Bloc entier pour les logos en dessous du menu*/
    display: flex;
    justify-content: space-between
}

#logolinkedin{ /*Bloc pour le logo linkedin, emplacement comparer au logo gmail*/
    margin-left: 35%;

}

#logogmail{ /*Bloc pour le logo gmail*/
    margin-right: 35%;
    margin-bottom: 40%;
}

#competence{ /*Bloc pour les competences l'emplacement du texte, emplacement sur la page*/
    margin: 5%;
    padding-left: 20%;
    padding-right: 30%;
    padding-bottom: 5%;
    text-align: left;
}

#logocompetence{ /*Bloc entier pour les differents logo leurs emplacements et dimension sur la page*/

}

#logo_htmlcss{ /*Bloc pour le logo HTML CSS son emplacement et dimension sur la page*/
    padding-left: 100%;
}

#logo_java{ /*Bloc pour le logo JAVA son emplacement et dimension sur la page*/
    margin-right: 75%;
}

#logo_python{ /*Bloc pour le logo PYTHON son emplacement et dimension sur la page*/
    padding-left: 100%;

}

#logo_github{ /*Bloc pour le logo GITHUB son emplacement et dimension sur la page*/
    margin-right: 75%;
}

#langue{
    padding-top: 15%;
    text-align: left;
    list-style-type: none;
    text-decoration: none;
}

#centredinteret{
    padding-top: 5%;
    text-align: left;
}

.infoperso{
    margin:auto;
}

#descriptif{
    width: 500px;
    height: 200px;
    padding: 10px;
    border-color: red;
    border: 2px solid;
    text-align: left;
}

.navigate{/*Bloc de type classe pour gerer l'ensemble du formulaire et photo*/
    display: flex;
    flex-basis: 50%;
    margin-left: 15%;

}

#remerciement{ /*Bloc pour les remerciements, emplacements sur la page et dimension*/
    display: block;
    align-content: center;
    margin-left: 25%;
    padding: 5%;
}

input[type=text], select { /*Gestion du formulaire pour l'input texte, taille, background*/
    width: auto;
    padding: 10px 20px;
    margin: 2px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
  
input[type=submit] { /*Gestion de la partir submit du formulaire*/
    width: auto;
    background-color: #4CAF50;
    color: white;
    padding: 10px 25px;
    margin: 10px 50px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}
  
input[type=submit]:hover { /*Couleur de fond du submit*/
    background-color: #45a049;
}
.form-control{ /*Gestion du formulaire message taille, background*/
    width: auto;
    padding: 10px 20px;
    margin: 5px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}