body {
    background-color: antiquewhite;
}
body .burger{
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
}

body .burger .line:nth-child(1) {
    width: 30px;
    height: 3px;
    background: #000000; /* Première ligne de couleur rouge, ajustez selon vos besoins */
    margin: 3px 0;
}

body .burger .line:nth-child(2) {
    width: 20px;
    height: 3px;
    background: #000000; /* Deuxième ligne de couleur verte, ajustez selon vos besoins */
    margin: 3px 0;
}

body .burger .line:nth-child(3) {
    width: 10px;
    height: 3px;
    background: #000000; /* Troisième ligne de couleur bleue, ajustez selon vos besoins */
    margin: 3px 0;
}

body .burger:hover .line:nth-child(1) {
    width: 30px;
    background: #000000;
    
}

body .burger:hover .line:nth-child(2) {
    width: 30px;
    background: #000000;
    transform: scale(1);
    transition-duration: 2000ms;
}

body .burger:hover .line:nth-child(3) {
    width: 30px;
    background: #000000;
    transform: scale(1);
    transition-duration: 2000ms;
}