burger_css.css

html, body {
    max-width: 100%;
    overflow-x: hidden;
}


.croix span {
    width: 100%;
    height: 1px;
    border-radius: 12px;
    display: block;
}

.croix span::before,
.croix span::after {
    content: "";
    width: 20px;
    background-color: black;
    display: block;
    border-radius: 12px;
    height: 3px;
}

.croix span::before {
    transform: translateY(-10px);
    transform: rotate(45deg);
}

.croix span::after {
    transform: translateY(10px);
    transform: rotate(-45deg);
    margin-top: -3px;

}

/*===============================*/

.burger {
    width: 20px;
    height: 15px;
    cursor: pointer;
    z-index: 20;
    position: relative;
    top: 50%;
    left: 50%;
    
}

.burger span {
    width: 100%;
    height: 4px;
    background-color: white;
    border-radius: 12px;
    display: block;
    transition: background-color 0.5s ease-in-out;

    position: relative;
    top: 50%;
}

.burger span::before,
.burger span::after {
    content: "";
    width: 100%;
    background-color: white;
    display: block;
    transition: all 0.5s ease-in-out;
    border-radius: 12px;
    height: 4px;
}

.burger span::before {
    transform: translateY(-10px);

}

.burger span::after {
    transform: translateY(10px);
    margin-top: -4px;
}


.burger.active span {
    background-color: transparent;
}

.burger.active span::before {
    transform: rotateZ(45deg) translateY(0);
}

.burger.active span::after {
    transform: rotateZ(-45deg) translateY(0);
}