styleResponsive.css

@media screen and (max-width: 955px) {
    header {
        padding-top: 58px;
    }

    .logo_header img {
        display: none;
    }

    .logo_header2 img {
        display: flex;
        top: 6px;
        left: 80px;
        padding-left: 10px;
        position: absolute;
        border-left: 1px solid #00000010;
    }

    footer {
        text-align: left;
    }

    .w3c {
        right: 10px;
    }

    input:checked+.slider {
        background-color: #ffbc81;
    }

    /*Menu Hamburguer*/
    #menu {
        z-index: 2;
    }

    #menu-bar {
        width: 45px;
        height: 40px;
        margin: 25px 0 20px 20px;
        cursor: pointer;
    }

    .bar {
        height: 5px;
        width: 100%;
        background-color: #ff7800;
        display: block;
        border-radius: 5px;
        transition: 0.3s ease;
    }

    #bar1 {
        transform: translateY(-4px);
    }

    #bar3 {
        transform: translateY(4px);
    }

    .nav {
        transition: 0.3s ease;
        display: none;
    }

    .nav ul {
        padding: 0 0px;
        text-align: left;
    }

    .nav li {
        border: none;
        list-style: none;
        padding: 7px 0;
        display: list-item;
    }

    .dark-mode .nav li {
        border: none;
    }

    .nav li a {
        color: white;
        font-size: 20px;
        text-decoration: none;
    }

    .nav li a:hover {
        font-weight: bold;
    }

    .menu-bg,
    #menu {
        top: 0;
        left: 0;
        position: absolute;
    }

    .menu-bg {
        z-index: 1;
        width: 0;
        height: 0;
        margin: 30px 0 20px 20px;
        background: radial-gradient(circle, #ff7800, #ff7800);
        border-radius: 50%;
        transition: 0.3s ease;
    }

    .change {
        display: block;
    }

    .change .bar {
        background-color: white;
    }

    .change #bar1 {
        transform: translateY(4px) rotateZ(-45deg);
    }

    .change #bar2 {
        opacity: 0;
    }

    .change #bar3 {
        transform: translateY(-6px) rotateZ(45deg);
    }

    .change-bg {
        width: 520px;
        height: 460px;
        transform: translate(-60%, -30%);
    }
}