nav, #nav{
    background-color: rgb(32, 32, 32);
    /* background-color: rgb(255, 86, 35); */
        width: 100%;
    }
    
    nav ul {
        width: 80%;
        margin: auto;
        text-align: center;
    }
    
    nav ul li {
        list-style: none;
        display: inline-block;
        padding: 20px 20px 20px 15px;
    }
    
    nav ul li a {
        text-decoration: none;
        color: white;

        transition: 0.5s;
    }
    
    .toggle{
        width: 100%;
        padding: 20px 0;
        text-align: right;
        display: none;
        /* background-color: rgb(56, 56, 56); */
        /* background-color: rgb(216, 50, 0); */
        background-color: rgb(32, 32, 32);
    }
    
    .toggle i {
        margin-right: 20px;
        font-size: 24px;
    }

    .toggle h2 {
        color: white;
        font-size: 26px;
        font-weight: bold;
        float: left;
        margin-left: 30px;
    }
    
    .menu{
        color: white;
    }
    
    @media screen and (max-width: 768px) {
        .toggle {
            display: block;
        }

        .toggle h2 {
            color: white;
            font-size: 26px;
            font-weight: bold;
            float: left;
            margin-left: 30px;
        }
    
        nav ul {
            display: none;
        }
    
        nav ul li {
            display: block;
            text-align: left;
            padding: 20px 20px 20px 0px;
        }
    
        .active {
            display: block;
        }
    }