body {
    font-family: arial; /*change la police d'écriture de toute la page web*/
    background-color: rgb(29, 29, 122); /*change couleur de fond de toute la page web*/
    color: white; /*change la couleur de l'écriture de toute la page web*/
    display: flex; /*permet de mettre toute la page web en responsive et de changer son alignement*/
    flex-direction: column; /*aligne toute la page web en colonne*/
}

.ba {
    box-sizing: block; /*créer un bloc qui englobe tout dans la classe ba*/
    width: 93%; /*définit la largeur du bloc*/
    text-align: center; /*définit l'alignement du texte au centre du bloc*/
}

main {
    box-sizing: block; /*créer un bloc qui englobe toute la balise main*/
    position: absolute; /*définit le positionnement du main*/
    left: 22%; /*déplace le main vers la droite*/
    right: 10%; /*reduit la largeur du main vers la gauche*/
}

#photo {
    width: 140px; /*définit la largeur de la photo*/
    height: 180px; /*définit la hauteur de la photo*/
    margin-top: 10px; /*définit l'espacement externe de la photo à partir du haut de la page*/
    box-sizing: border-box; /*créé un bloc qui englobe la photo avec la posibilité d'ajouter une bordure*/
    border: 6px solid; /*ajoute une bordure à la photo*/
    border-radius: 25px; /*définit la courbure des cotés de la bordure*/
}

aside {
    box-sizing: border-box; /*créé un bloc qui englobe la balise aside avec la posibilité d'ajouter une bordure*/
    box-shadow: 0px 0px 5px black; /*créé une ombre au bloc*/
    position: fixed; /*définit le positionnement du aside*/
    top: 0; /*définit le aside en commençant par le haut de la page*/
    left: 0; /*définit le aside en commençant par la gauche de la page*/
    padding-left: 10px; /*créé un espacement interne au bloc à partir de la bordure*/
    width: 20%; /*définit la largeur de aside*/
    height: 100%; /*définit la hauteur de aside sur toute la page*/
    color: white; /*change la couleur de l'écriture pour aside*/
    background-color: rgb(25, 25, 25); /*change couleur de fond de aside*/
    ul {
        list-style-type: none; /*enlève les points/tirets de la liste dans aside*/
    }
    img {
        width: 60px; /*définit la largeur des logos dans la liste*/
        height: 60px; /*définit la hauteur des logos dans la liste*/
    }
}

#contact {
    line-height: 25px; /*change la taille de la police de l'id contact*/
}

#tel {
    width: 20px; /*définit la largeur de l'image dans l'id tel*/
    height: 20px; /*définit la hauteur de l'image dans l'id tel*/
    position: absolute; /*définit le positionnement de l'id tel*/
    left: 20px; /*déplace vers la droite l'image dans l'id tel*/
  
}

#mail {
    width: 20px; /*définit la largeur de l'image dans l'id mail*/
    height: 20px; /*définit la hauteur de l'image dans l'id mail*/
    position: absolute; /*définit le positionnement de l'id mail*/
    left: 20px; /*déplace vers la droite l'image dans l'id mail*/
    
}

#driver {
    width: 25px; /*définit la hauteur de l'image dans l'id driver*/
    height: 25px; /*définit la hauteur de l'image dans l'id driver*/
    padding-right: 10px; /*définit l'espacement interne droit de l'image dans l'id driver*/
    position: absolute; /*définit le positionnement de l'id driver*/
    left: 17px; /*déplace vers la droite l'image dans l'id driver*/
}

.softwares {
    display: flex; /*définit le positionnement de la classe softwares*/
    flex-flow: row wrap; /*définit l'alignement en ligne et le retour à la ligne*/
    align-content: center; /*centre les éléments horizontalements (car en ligne)*/
    justify-content: flex-start; /*met les éléments à gauche verticalements (car en ligne)*/
    position: relative; /*définit le positionnement de la classe*/
    left: -20px; /*déplace vers la gauche*/
    li {
        margin-bottom: 10px; /*définit l'espacement externe bas des logos*/
        margin-right: 5%; /*définit l'espacement externe droit des logos*/
    }
}

article {
    display: flex; /*définit le positionnement de la balise article*/
    flex-direction: column; /*aligne les éléments en colonne*/
    box-sizing: block; /*créé un bloc*/
    width: 90%; /*définit la largeur de article*/
    background-color: white; /*change la couleur de fond de article*/
    margin-bottom: 20px; /*définit l'espacement externe bas de article*/
    padding: 10px; /*définit l'espacement interne de article*/
    border-radius: 25px; /*définit la courbure des cotés de la bordure*/
    color: black; /*change la couleur de l'écriture pour article*/
}

nav {
    position: relative; /*définit le positionnement de la balise nav*/
    left: 10%; /*déplace nav vers la droite*/
    margin-left: 40%; /*définit l'espacement externe gauche de nav*/
    ul {
        li {
            display: inline-block; /*met la liste en ligne*/
            a {
                display: block; /*créé un bloc*/
                padding-top: 50px; /*définit l'espacement interne haut*/
                padding-bottom: 50px; /*définit l'espacement interne bas*/
                padding-left: 100px; /*définit l'espacement interne gauche*/
                padding-right: 100px; /*définit l'espacement interne droit*/
                text-decoration: none; /*enlève le soulignement*/
                border: 2px solid transparent; /*définit une bordure*/
                border-radius: 25px; /*définit la courbure des cotés de la bordure*/
                background-color: white; /*change la couleur de fond*/
                font-weight: 700; /*change la taille de la police et met un peu de gras*/
                color: rgb(29, 29, 122); /*change la couleur de la police*/
                &:hover {
                    border: 2px solid white; /*change la couleur de la bordure lorsque l'on passe dessus*/
                    background-color: rgb(29, 29, 122); /*change la couleur de fond lorsque l'on passe dessus*/
                    color: white; /*change la couleur de la police lorsque l'on passe dessus*/
                }
            }
        }
    }
}


section {
    display: flex; /*permet de mettre en responsive et de changer son alignement*/
    position: fixed; /*définit le positionnement de la balise section*/
    top: 0; /*définit le section en commençant par le haut de la page*/
    right: 0;/*définit le section en commençant par la droite de la page*/
    height: 100%; /*définit la hauteur de section sur toute la page*/
    color: white; /*change la couleur de la police*/
    background-color: rgb(25, 25, 25); /*change la couleur de fond de section*/
}

#cvvideo {
    width: 600px; /*définit la largeur de cvvideo*/
    height: 360px; /*définit la hauteur de cvvideo*/
    border: solid 6px white; /*définit une bordure*/
    border-radius: 25px; /*définit la courbure des cotés de la bordure*/
    box-sizing: border-box; /*créé un bloc*/
    position: relative; /*définit le positionnement de l'id cvvideo'*/
    left: 21%; /*déplace cvvideo vers la droite*/
}

#ytvideo {
    width: 600px; /*définit la largeur de ytvideo*/
    height: 360px; /*définit la hauteur de ytvideo*/
    border: solid 6px white; /*définit une bordure*/
    border-radius: 25px; /*définit la courbure des cotés de la bordure*/
    box-sizing: border-box; /*créé un bloc*/
    position: relative; /*définit le positionnement de l'id ytvideo'*/
    left: 60%; /*déplace ytvideo vers la droite*/
    top: -360px; /*déplace ytvideo vers le haut*/
}

form { 
    position: relative; /*définit le positionnement de la balise form*/
    left: 10%; /*déplace form vers la droite*/
    text-align: center; /*définit l'alignement du texte au centre du bloc*/
    margin: auto; /*définit la marge externe*/
    width:60%; /*définit la largeur de form*/
    box-sizing: block; /*créé un bloc*/
    background-color: rgb(25, 25, 25); /*change la couleur de fond de form*/
    padding: 20px; /*définit la marge interne*/
    border: solid 6px; /*définit une bordure*/
    border-radius: 25px; /*définit la courbure des cotés de la bordure*/
    p {
        position: relative; /*définit le positionnement de la balise p*/
        top: -25px; /*déplace p vers le haut*/
    }
    input {
        position: relative; /*définit le positionnement de la balise input*/
        top: -25px; /*déplace input vers le haut*/
    }
}

#message {
    position: relative; /*définit le positionnement de l'id message'*/
    top: -25px; /*déplace message vers le haut*/
    left: 80px; /*déplace message vers la droite*/
}

#envoyer {
    position: relative; /*définit le positionnement de l'id envoyer'*/
    top: 5px; /*déplace envoyer vers le bas*/
    left: -85px; /*déplace envoyer vers la gauche*/
}

#réinitialiser {
    position: relative; /*définit le positionnement de l'id réinitialiser'*/
    top: 5px; /*déplace réinitialiser vers le bas*/
    left: -85px; /*déplace réinitialiser vers la gauche*/
}