/* paramètres du corps de mon site */

body {
    font-family: 'Ubuntu', sans-serif;
    color: #f8f8f8;
    background-color: #292929;
    text-align: center;
}

/* ---------- en-tête et header ----------*/

/* style de la liste de navigation */
nav ul {
    list-style-type: none; /* enlève les puces (bullet points) */
    display: flex; /* active flexbox - outil d'alignement */ 
    justify-content: center; /* centrage */
    gap: 20px; /* espacement entre les items de 20px */
}

/* style des liens dans la navigation */
nav a {
    text-decoration: none; /* j'ai enlevé les puces */
    color: #010101; /* couleur assez sombre */
    display: flex;
    align-items: center; 
    gap: 5px; /* espace entre les icones et le texte */
    border-radius: 5px; /* arrondissement des bords de 5px */
}

/* ---------- main ---------- */
/* titres */
h2, h3 {
    color: #f8f8f8;
}

/* centrage des images dans les balises figure */
figure {
    margin: 20px;
    text-align: center;
}

/* style de ma tête sur mon cv */
.maphoto img {
    border-radius: 50%; /* sert à faire un cercle */
    border: 2px solid #F2F2F2; /* contour clair de 2px */
    width: 170px;
    height: 170px; /* longueur & largeur */
    object-fit: cover; /* ma tête n'est pas déformée */
}

/* video et audio */
video, iframe {
    max-width: 100%; /* empêche la video de devenir plus large que demandé */
    display: block;
    margin: 30px auto; /* setup des marges, 30px d'espacement en haut et en bas, le reste en "auto" pour le placement horizontal */
}

.video {
    display: flex; /* video et audio */
}

.video1 {
    display: block;
    margin: 30px auto;
    border: 1px solid #d8d8d8; /* bordure grise de taille 1 pixel */
}

.video2 {
    display: block;
    margin: 30px auto;
    border: 1px solid #d8d8d8;
}

/* ---------- footer ---------- */
footer {
    padding: 20px;
    margin-top: 40px; /* marge du haut - moyen que j'ai trouvé pour baisser le footer */
    background-color: #141414;
    color: #f8f8f8;
}